生命周期(存在期)

77 阅读4分钟

存在期

  • 在存在期主要就做了一件事情,通过用户与页面交互,state或props发生变化,组件就发生更新。
  • 存在期里的钩子函数其实就是对state和props的监听。

componentWillReceiveProps(newProps)

条件:当组件获取新属性的时候,第一次渲染不会调用。 用处:这个时候可以根据新的属性来修改组件状态。

shouldComponentUpdate(newProps,newState){}

  • 条件:接收到新属性或者新状态的时候在render前会被调用(除了调用forceUpdate和初始化渲染意外)
  • 用处:该方法让我们有机会决定是否重新渲染组件,如果该函数返回值false,那么不会重新渲染组件,是react性能优化非常重要的一环。组件接受新的state或者props时调用,我们可以设置在此对比前后两个propsstate是否相同,如果相同则返回false阻止更新,因为相同的属性状态一定会生成相同的dom树,这样就不需要创建虚拟的dom树和旧的dom树及逆行diff算法对比,节省大量性能,尤其时在dom结构复杂的时候。

该函数什么时候调用?

只要调用setState方法,就会立马调用shouldComponentUpdate(组件应该更新吗),返回值是true组件就会继续更新,如果为false,组件就不会更新。

shouldComponentUpdate(newProps,newState) newProps是新的props属性(读取时直接props.变量名) newState是改变后的状态(读取时直接state.变量名)

  • 很多时候该函数都是控制父组件变化时子组件是否更新,在子组件里写该函数判断子组件的props或者state变没变,return对应的false/true。
  • 如果shouldComponentUpdate返回值为true,就接着进入组件的新的生命周期,紧接着调用componeWillUpdate——>render(){}(这个其实也是第一次渲染组时的render方法,只是状态变了重新渲染)——>componentDidUpdate(){}
  • 返回值为false,就直接回到运行中,也就是第一次组件渲染之后的状态中。

conponentWillUpdate(){}

shouldComponentUpdate钩子函数执行完成之后,立马执行conponentWillUpdate钩子函数。

  • 条件:当组件确定更新,在render之前调用
  • 用处:这个时候可以确定一定会更新组件,可以执行更新前的操作(但在项目里很少用,几乎不用)
  • 注意:该函数中不能使用setState,setState的操作应该在componentWillReceiveProps方法中调用。否则会造成死循环

render(){}

和实例化的render一样,根据状态变化重新渲染对应的DOM更新,组件更新

conponentDidUpdate(){}

  • 条件:更新被应用到DOM之后
  • 用处:这个方法在更新真实DOM成功之后调用,当我们需要访问真实的DOM时,这个方法就也经常用到。
  • render()方法调用完之后,更新之后的dom也已经挂载到页面上,之后再对更新之后的DOM做哪些操作,就可以写在这里。

componentWillReceiveProps(np){}

父向子传值,子存到state里,再通过子组件的state渲染子组件,这时候即使穿过来的props改变了,子组件里的state里的值还是原来的。

下面是写在子组件里的代码
componentWillReceiveProps(np){//np里存的就是父组件状态改变之后传过来的数据,
                             //shouldComponentUpdate会自动返回true或者false
        // 它的作用就是把改变过后的props拿到,并放到state里
        this.setState({lists:np.pbg})//pbg是子组件调用时的属性名
    }

当我们接收到父组件传过来的值存到state里,state={aa:this.props.a},在子组件里使用它this.state.aa,而不是this.props.a,父组件传过来的a发生变化时,子组件数据并不会更新,是因为子组件里的state的aa是初始化的值,并没有把改变后的值存到状态里,想让aa的值发生变化,就调用componentWillReceiveProps(np){}函数。

销毁期

  • 销毁阶段,只有一个函数被调用。
  • componentWillUnmount(){}
  • 每当组件使用完成,这个组件就必须从DOM中销毁,此时该方法就会被调用。当我们再组件中使用setInterval,那我们就需要再这个方法中调用clearInterval。
  • 组件具体怎么销毁,不用我们来写,组件之间一切换,就被销毁了