React笔记(组件生命周期)

参考资料

组件未插入真实DOM

componentWillMount()

• 组件Render前执行
• 只执行一次
• 在componentWillMount中做的事都可以放到constructor()中做

componentDidMount()

• 组件Render后执行
• 只执行一次
• render返回一个jsx对象-->react调用createElement()读取该jsx对象属性，用于构造虚拟DOM-->虚拟DOM插入文档，成为真实DOM

组件被重新渲染(更新的过程实质是子组件接收父组件参数后重新render的过程)

compentWillReceiveProps(nextprops)

• 父组件为子组件传递参数后，触发子组件调用该函数(不管父组件的props是否改变)
• 写日志

componentWillReceiveProps(nextProps)
    {
        console,log("当前props日志")
        console.log("current: "+this.props.name)
        console.log("next: "+nextProps.name)
    }

shouldComponentUpdate(nextProps, nextState)

• state或props改变时都会触发
• 返回true时，启用diff算法(结合key)进行Virtual DOM的计算与比较，从而得出DOM树的最小修改量，再交给componentWillUpdate()去执行
• 避免节点被重复渲染

 if(nextProps.item.name!==this.props.item.name)
                {
                return true;
                }
                else
                {
                    return false;
                }

componentWillUpdate()

组件移出真实DOM

componentDidUpdate()

• 执行完后触发render

componentWillUnmount()

• 我们为组件注册的事件必须在该函数中卸载