实例化阶段包括:
1:getInitialState
2:componentWillMount
3:render:根据 state 的值,生成页面需要的虚拟 DOM 结构
4:componentDidMount:可以设置state,会触发再次渲染,组件内部可以通过 ReactDOM.findDOMNode(this)来获取当前组件的节点操作DOM
更新阶段包括:
1: componentWillReceiveProps(nextProps):当组件接收到新的props时会触发该函数,通常可以调用this.setState方法来比较this.props和nextProps的执行状态,完成对state的修改
2:shouldComponentUpdate(nextProps, nextState):该方法用来拦截新的props或state,然后判断是否更新组件
3:componentWillUpdate(nextProps, nextState):更新之前调用
4:render:根据diff算法,生成需要更新的虚拟DOM数据
5:componentDidUpdate(prevProps, prevState):更新之后调用,可以进行DOM 操作
tips:render中最好只是数据和模板的组合,不应该修改state
如果shouldComponentUpdate返回false,componentWillUpdate,render,componentDidUpdate都不会被调用
网友评论