react生命周期函数(学习笔记)

    科技2022-07-13  128

    生命周期函数指在某一个时刻组件会自动调用执行的函数 React声明周期的四个大阶段:

    Initialization:初始化阶段。 Mounting: 挂载阶段。 Updation: 更新阶段。 Unmounting: 销毁阶段

    render()函数,就是一个生命周期函数,它在state发生改变时自动执行。这就是一个标准的自动执行函数。 constructor不算生命周期函数。我们叫构造函数,它是ES6的基本语法。虽然它和生命周期函数的性质一样,但不能认为是生命周期函数。

    Mounting阶段叫挂载阶段,伴随着整个虚拟DOM的生成,它里边有三个小的生命周期函数,分别是: componentWillMount : 在组件即将被挂载到页面的时刻执行。 render : 页面state或props发生变化时执行。 componentDidMount : 组件挂载完成时被执行。 componentWillMount和componentDidMount这两个生命周期函数,只在页面刷新时执行一次,而render函数是只要有state和props变化就会执行。 React生命周期中的Updation阶段,也就是组件发生改变的更新阶段,它有两个基本部分组成,一个是props属性改变,一个是state状态改变。1-shouldComponentUpdate—组件发生改变前执行 2-componentWillUpdate—组件更新前,shouldComponentUpdate函数之后执行 3-render----开始挂载渲染 4-componentDidUpdate----组件更新之后执行

    shouldComponentUpdate函数会在组件更新之前,自动被执行。比如写入 它要求返回一个布尔类型的结果,必须有返回值,返回true,就同意组件更新;返回false,就反对组件更新。 componentWillUpdate在组件更新之前,在shouldComponenUpdate之后被执行。但是如果shouldComponentUpdate返回false,这个函数就不会被执行了。 componentDidUpdate在组件更新之后执行。

    componentWillReceiveProps 函数 凡是组件都有生命周期函数,所以子组件也是有的,并且子组件接收了props,这时候函数就可以被执行了。 子组件接收到父组件传递过来的参数,父组件render函数重新被执行,这个生命周期就会被执行。 也就是说这个组件第一次存在于Dom中,函数是不会被执行的; 如果已经存在于Dom中,函数才会被执行。 componentWillUnmount,它是在组件去除时执行。

    shouldComponentUpdate函数,改善React组件性能的例子。 nextProps:变化后的属性;nextState:变化后的状态;

    shouldComponentUpdate(nextProps,nextState){ if(nextProps.content!==this.props.content){//需要改变值属性值 return true }else{ return false } }

    部分笔记来源:技术胖

    Processed: 0.013, SQL: 8