设计高质量的React组件
1.组件的生命周期
1.装载过程
- constructor
- getlnitialState:只在 React.createClass 方法创造的组件类才会用到
- getDefaultProps:只在 React.createClass 方法创造的组件类才会用到,用ES6的话,在构造函数中通过给 this.state 赋值完成状的初始化,通过给类属性(注意是类属性,而不是类的实例对象属性) defaultProps 赋值指定 props 初始值,达到的效果是完全一样的,
- componentWillMount:我们通常不用定义 componentWillMount 函数,顾名思义, componentWilJMount发生在“将要装载”的时候,这个时候没有任何渲染出来的结果,即使调用 this setState修改状态也不会引发重新绘制,一切都迟了 换句话说,所有可以在这个componentWillMount中做的事情,都可以提前到 constructor 中间去做,可以认为这个函数存在的主要目的就是为了和 componentDidMount 对称)(componentWillMount 可以在服务器端被调用,也可以在浏览器端被调用)
- render:render 函数应该是一个纯函数,完全根据 this.state this.props 来决定返回的结果,而且不要产生任何副作用,render 函数本身并不往DOM树上渲染或者装载内容,它只是返回JSX表示的对象,然后由 React 库来根据返回对象决定如何渲染,所以一个render里面有多个组件时,是所有的组件都转载完成(已经放在DOM树)后,才会依次调用各个组件的componentDidMount
- componentDidMount:只能在浏览器端被调用
2.更新过程
- componentWillReceiveProps:只要是父组件的 render 函数被调用,在 render 函数里面被渲染的子组件就会经历更新过程,不管父组件传给子组件的 props 有没有改变,都会触发子组件的 componentWillReceiveProps 函数,通过 this.setState 方法触发的更新过程不会调用这个函数,这是因为这个函数适合根据新的 props 值(也就是参数 nextProps )来计算出是不是要更新内部状态 state。
- shouldComponentUpdate:在更新过程中, React 库首先调用 shouldComponentUpdate 函数,如果这个函数返回true ,那就会继续更新过程,接下来调用 render 函数;反之,如果得到 false ,那就立刻停止更新过程,也就不会引发后续的渲染了,不会调用render(下面的3个都不调用)
- componentWillUpdate:
- render
- componentDidUpdate:可以利用 componentDidMount 函数执行其他 UI 库的代码,比如 jQuery 代码 React 组件被更新时,原有的内容被重新绘制,这时候就需要在 componentDidUpdate 函数再次调用 jQuery 代码
3.卸载过程
- componentWillUnmount:在componentDidMount 中用非 React 的方法创造了一些 DOM 元素,如果撒手不管可能会造成内存泄露,那就需要在 componentWillUnmount 中把这些创造的 DOM 元素清理掉
2.小细节
- PropTypes 提供一系列验证器,可用于确保组件接收到的数据类型是有效的,在开发过程中避免犯错,但是在发布产品代码时,用一种自动的方式将propTypes 去掉,这样最终部署到产品环境的代码就会更优,现有的 babel-react-optimize 就具有这个功能,可以通过npm 安装,但是应该确保只在发布产品代码时使用它
- 组件向外传递数据是调用父组件的方法来改变父组件的state值。
从Flux到Redux
1.Flux 55