React组件生命周期及组件之间的通信
名词解释
- state：它是组件的属性，主要用来存储组件自身需要的数据。
- 虚拟DOM：它是ReactJS中提出的一个概念，是将真实的DOM结构映射成一个JSON数据结构。
1.组件生命周期
1.创建阶段
getDefaultProps()：该方法会返回一个对象，并缓存下来。然后与父组件指定的props对象合并，最后赋值给this.props作为该组件的默认属性。
2.实例化阶段
getInitialState()：初始化组件state的值，其返回值会赋值给组件的this.state属性。componentWillMount()：业务逻辑的处理都应该放在这里，如对state的操作等。render()：渲染并返回一个虚拟DOM。当返回null或false时，表明不需要渲染任何东西。componentDidMount()：在该方法中，ReactJS会使用render方法返回的虚拟DOM对象来创建真是的DOM结构。在这里可以对根据虚拟DOM结构而生成的真实DOM进行相应的处理 。
3.更新阶段
主要发生在用户操作之后或父组件有更新的时候。
componentWillReceiveProps(object nextProps)：在该函数中，通常可以调用this.setState方法来完成对state的修改。shouldComponentUpdate(nextProps, nextState)：该方法用来拦截新的props或state，然后根据实现设定好的判断逻辑，作出最后要不要更新组件的决定。return一个boolean值。componentWillUpdate(object nextProps, object nextState)：当shouldComponentUpdate()返回true时，可以在该方法中做一些更新之前的操作。render：根据一系列的diff算法，生成需要更新的虚拟DOM数据。实践表明，在render中，最后只做数据和模板的组合，不应进行state等逻辑的修改，这样组件结构更清晰。componentDidUpdate：该方法在组件的更新已经同步到DOM中后出发，我们常在该方法中做一些DOM操作。
4.销毁阶段
componentWillUnmount：当组件需要从DOM中移除时，我们通常会做一些取消事件绑定、移除虚拟DOM中对应的组件数据结构、销毁一些无效的定时器等工作。
2.组件之间的通信
- 子组件调用父组件的方法：
只需父组件把要被调用的方法以属性的方式放在子组件上，子组件内部便可以通过“this.props.被调用的方法”这样的方式来获得父组件传过来的方法。 - 父组件调用子组件的方法：
子组件被设置为ref之后，父组件就可以通过this.ref.xxx来获取到子组件了。其中xxx为子组件ref的值。
3.其它tips
合理使用key属性：
合理使用key属性有时能减少需要页面渲染时更新的DOM节点。
如在没有key属性的First和Second组件之间插入一个Third组件，React JS的Diff算法的结果是，First组件不变，先将Second组件进行删除，然后在创建并插入Third组件，最后再创建并插入Second组件。
如果给上述三个组件都添加上key属性，则算法结果会有所改变：First组件不变，Second组件不变，只是在Second组件之前创建并插入来Third组件。
最近在学习React Native，重温了一下React组件的生命周期及组件之间的通信。
以上内容来自《React Native入门与实践》一书的部分读书笔记，BTW，这是一本不错的入门书，讲得很详细。
