详解React生命周期及钩子函数

  • Z时代
  • 2024-01-10
  • 分类：综合

react

父组件

import React , {Component} from 'react'
import Son from './Son'
class Father extends Component {
    constructor(props){
        // 可以绑定this 设置props 根据属性设置状态  给方法绑定this
        super(props)
        console.log('Father : constructor')
        this.state = {
            color : 'blue'
        }
    }
    componentWillMount(){
        // 修改state  不会触发update  可以做初始数据的获取
        console.log('Father : componentWillMount')
        // this.state = {
        //     color : 'blue'
        // }  // color值被改变 但是会报错，建议用setState
    }
    render(){
        // 父组件在render过程中会触发子组件的初始化阶段，当所有的组件都转载完成后，父组件才会执行didmount
        console.log('Father : render')
        return (
           <div>
               <button className='Btn' style = {{color:this.state.color}}
                    onClick = {()=> this.changeColor('red')}
               >变成红色</button>
               <button onClick = {()=> this.changeColor('yellow')}>变成黄色</button>
               {this.state.color !== 'yellow' && <Son color={this.state.color}/> }
           </div>
        )
    }
    changeColor(color){
        this.setState({color})
    }
    componentDidMount(){
        // 可以操作真实的DOM  初始化结束
        console.log('Father : componentDidMount',document.querySelector('.Btn'))
    }
    // 当组件componentDidMount之后，就进入运行中阶段，此时只要数据(props,state)变化就会触发对应的生命周期钩子" title="生命周期钩子">生命周期钩子函数
    shouldComponentUpdate(){
        console.log("Father:shouldComponentUpdate");
        console.log('Father:',arguments)
        return true;
    }
    componentWillUpdate(){
        console.log("Father:componentWillUpdate")
        console.log('Father',arguments)
    }
    componentDidUpdate(){
        console.log('Father:componentDidUpdate')
        console.log('Father',arguments)
    }
}
export default Father

子组件

import React , {Component} from 'react'
class Son extends Component {
    constructor(props){
        super(props)
        this.state = {
            style:{
                width:'200px',
                height:'200px',
                backgroundColor:this.props.color   
            }
        }
        console.log('Children : constructor');
    }
    componentWillMount(){
        console.log('Children : componentWillMount')
    }
    render(){
        console.log('Childern : render')
        return (
            <div style={this.state.style}>
            </div>
        )
    }
    componentDidMount(){
        console.log('Children : componentDidMount ')
    }
    // 当组件componentDidMount之后，就进入运行中阶段，此时只要数据(props,state)变化就会触发对应的生命周期钩子函数
    // componentWillReceiveProps->shouldComponentUpdate->componentWillUpdate->render->componentDidUpdate
    componentWillReceiveProps(props){
        // 这个钩子函数中，新的属性还没挂载到this上，参数props是最新的props
        console.log('Children : componentWillReceiveProps',arguments)
        this.setState((prevState,props)=>{
            console.log(prevState,props,'this.setState函数写法中接收的参数') // props 是最新的props
            let newstyle = { ...prevState.style }
            newstyle.backgroundColor = props.color
            return {style:newstyle}
        })
    }
    // 当属性或者状态变化后都会执行，需要返回true和false，默认返回true，控制是否执行下面的钩子函数（是否重新渲染）
    shouldComponentUpdate(props, state){
        // 此时，最新的属性和最新的状态依然没有挂载到this上，需要从函数中接收
        console.log('Children:shouldComponentUpdate',arguments);
        return true;
    }
    componentWillUpdate(props, state){
         // 此时，最新的属性和最新的状态依然没有挂载到this上，需要从函数中接收 没什么作用
        console.log('Children:componentWillUpdate',arguments)
    }
    componentDidUpdate (prevprops, prevstate) {
        // 在这里可以得到重新渲染后的dom
        if ( prevprops.color !== this.props.color ) {
            // 此次组件rerender是因为color变化
        }
        console.log('Children:componentDidUpdate')
    }
    componentWillUnmount () {
        // 当组件被销毁的时候会执行这个钩子函数
        console.log('Children:componentWillUnmount')
    }
}
export default Son

初始渲染

注意：父组件在render过程中会触发子组件的初始化阶段，当所有的子组件都装载（compoentDidMount）完成后，父组件才会执行自己的componentDidMount

点击变成红色按钮后

当组件componentDidMount之后，就进入运行中阶段，此时只要数据(props,state)变化就会触发对应的生命周期钩子函数。

会依次执行 componentWillReceiveProps->shouldComponentUpdate（scu）->componentWillUpdate->rende->componentDidUpdate

点击变成黄色按钮后 销毁子组件

当组件销毁后会执行组件的 componentWillMount 这个钩子函数。

注意在React中组件销毁的时候连带dom一起消失的，所以没有销毁后的钩子

以上是 详解React生命周期及钩子函数 的全部内容， 来源链接： utcz.com/z/381137.html

回到顶部