深刻浅出react和redux笔记总结

设计高质量的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