名词解释
- 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,这是一本不错的入门书,讲得很详细。