平时写react 小技巧

react

  • Stateless function 无状态组件平时写组件用到比较多的就是无状态组件,不但优雅,也是优化react性能的一种手段。

      const Greeting = ({ name, style }) => {

    return <div style={style}>{name}</div>

    };

  • Array as children 把数组数据渲染出来

    经常会遇到处理数组数据的情况,可以用下面的方式简单的渲染出来。

      render() {

    return (

    (<ul>

    {List.map((item) => (

    <li>{item}</li>

    ))}

    </ul>)

    )

    }

  • 封装基础类组件

    比如 <input type="text" > 每次写很麻烦吧,可以封装一个成一个组件

      const input = (props) => {

    return <input type = {props.type} {...props} />

    }

  • Layout Component 布局组件

    组件可以分成很多类类,有的是布局类,有的是功能类。下面是一种布局类的组件。

      <FlexContainer>

    <div style={{ flex: 1 }}>{this.props.leftSide}</div>

    <div style={{ flex: 2 }}>{this.props.rightSide}</div>

    </FlexContainer>

  • Higher Order Component 高阶组件

    高阶组件很像decorator,提升组件的能力。比如你想一些组件里面使用一下功能,react-router 中

      import { withRouter } from 'react-router'

    withRouter(SomeComponent)

    例子:

      var Enhance = ComposedComponent => class extends React.Component {

    componentDidMount() {

    this.setState({ name: "李狗子" });

    }

    render() {

    return <ComposedComponent {...this.props} name = {this.state.name} />;

    }

    };

  • 受控组件,不受控组件

    项目中经常会用到这两种情况如:
    受控组件,更新的时候需要使用this.setState

      constructor() {

    super();

    this.state = {value: ""}

    }

    render() {

    return <input type="text" value={this.state.value} />

    }

    不受控组件,主要需要通过ref来获取input的值。

      render() {

    return <input type="text" ref="myInput" />

    }

    两种方法都可以在特定的场合去使用,个人觉得数据相对重要的页面需要使用受控组件会比较合适。

  • 使用三元表达式

    项目中经常有判断语句,用三元表达式可以很方便的写出想要的逻辑

      const demo = ({ isOK }) => {

    return isOK

    ? <p> Yes </p>

    : <p> No </p>

    };

  • 给setState传入function

    可以使用function来更新state

      this.setState((prevState, props) => ({

    return ...

    }));

  • 通过ref属性获取component

    场景:下面的例子是初始化组件后,让input默认获取光标。ref最终指向的已经渲染好的DOM节点,或者是react class的实例。具体可以看官方的文档

      componentDidMount() {

    this.input.focus();

    }

    render() {

    return (

    <input

    ref={comp => { this.input = comp; }}

    />

    )

    }

  • 切勿使用...props传递数据

    一个非常错误的做法比如:

      <Component {...props} />

    props上面如果有非常多的属性,会造成非常昂贵的计算。正确的应该

      <Component name = { props.name } />


以上是平时写React用到的一些写法小技巧,说有用还蛮有用的!

有错误的地方还请指正!谢谢大家。

下面2个链接都很棒哦!记得收藏star...

参考:

https://github.com/vasanthk/react-bits

react 代码规范

https://github.com/airbnb/javascript/tree/master/react

dangerouslySetHTML 和 style 属性

dangerouslySetHTML

出于安全考虑的原因(XSS 攻击),在 React.js 当中所有的表达式插入的内容都会被自动转义,就相当于 jQuery 里面的 text(…) 函数一样,任何的 HTML 格式都会被转义掉:

class Editor extends Component {

constructor() {

super()

this.state = {

content: '<h1>React.js 小书</h1>'

}

}

render () {

return (

<div className='editor-wrapper'>

{this.state.content}

</div>

)

}

}

假设上面是一个富文本编辑器组件,富文本编辑器的内容是动态的 HTML 内容,用 this.state.content 来保存。我希望在编辑器内部显示这个动态 HTML 结构,但是因为 React.js 的转义特性,页面上会显示:

表达式插入并不会把一个 <h1> 渲染到页面,而是把它的文本形式渲染了。那要怎么才能做到设置动态 HTML 结构的效果呢?React.js 提供了一个属性 dangerouslySetInnerHTML,可以让我们设置动态设置元素的 innerHTML:

...

render () {

return (

<div

className='editor-wrapper'

dangerouslySetInnerHTML={{__html: this.state.content}} />

)

}

...

需要给 dangerouslySetInnerHTML 传入一个对象,这个对象的 __html 属性值就相当于元素的 innerHTML,这样我们就可以动态渲染元素的 innerHTML 结构了。

有写朋友会觉得很奇怪,为什么要把一件这么简单的事情搞得这么复杂,名字又长,还要传入一个奇怪的对象。那是因为设置 innerHTML 可能会导致跨站脚本攻击(XSS),所以 React.js 团队认为把事情搞复杂可以防止(警示)大家滥用这个属性。这个属性不必要的情况就不要使用。

style

React.js 中的元素的 style 属性的用法和 DOM 里面的 style 不大一样,普通的 HTML 中的:

<h1 style='font-size: 12px; color: red;'>React.js 小书</h1>

在 React.js 中你需要把 CSS 属性变成一个对象再传给元素:

<h1 style={{fontSize: '12px', color: 'red'}}>React.js 小书</h1>

style 接受一个对象,这个对象里面是这个元素的 CSS 属性键值对,原来 CSS 属性中带 - 的元素都必须要去掉 - 换成驼峰命名,如 font-size 换成 fontSizetext-align 换成 textAlign

用对象作为 style 方便我们动态设置元素的样式。我们可以用 props 或者 state中的数据生成样式对象再传给元素,然后用 setState 就可以修改样式,非常灵活:

<h1 style={{fontSize: '12px', color: this.state.color}}>React.js 小书</h1>

只要简单地 setState({color: 'blue'}) 就可以修改元素的颜色成蓝色。

Prop 验证

随着应用不断变大,保证组件被正确使用变得非常有用。为此我们引入propTypesReact.PropTypes 提供很多验证器 (validator) 来验证传入数据的有效性。当向 props 传入无效数据时,JavaScript 控制台会抛出警告。注意为了性能考虑,只在开发环境验证 propTypes。下面用例子来说明不同验证器的区别:

React.createClass({

propTypes: {

// 可以声明 prop 为指定的 JS 基本类型。默认

// 情况下,这些 prop 都是可传可不传的。

optionalArray: React.PropTypes.array,

optionalBool: React.PropTypes.bool,

optionalFunc: React.PropTypes.func,

optionalNumber: React.PropTypes.number,

optionalObject: React.PropTypes.object,

optionalString: React.PropTypes.string,

// 所有可以被渲染的对象:数字,

// 字符串,DOM 元素或包含这些类型的数组。

optionalNode: React.PropTypes.node,

// React 元素

optionalElement: React.PropTypes.element,

// 用 JS 的 instanceof 操作符声明 prop 为类的实例。

optionalMessage: React.PropTypes.instanceOf(Message),

// 用 enum 来限制 prop 只接受指定的值。

optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),

// 指定的多个对象类型中的一个

optionalUnion: React.PropTypes.oneOfType([

React.PropTypes.string,

React.PropTypes.number,

React.PropTypes.instanceOf(Message)

]),

// 指定类型组成的数组

optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),

// 指定类型的属性构成的对象

optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),

// 特定形状参数的对象

optionalObjectWithShape: React.PropTypes.shape({

color: React.PropTypes.string,

fontSize: React.PropTypes.number

}),

// 以后任意类型加上 `isRequired` 来使 prop 不可空。

requiredFunc: React.PropTypes.func.isRequired,

// 不可空的任意类型

requiredAny: React.PropTypes.any.isRequired,

// 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接

// 使用 `console.warn` 或抛异常,因为这样 `oneOfType` 会失效。

customProp: function(props, propName, componentName) {

if (!/matchme/.test(props[propName

以上是 平时写react 小技巧 的全部内容, 来源链接: utcz.com/z/382602.html

回到顶部