"react": "^17.0.2",

react生命周期有哪几个阶段

1、挂载时

当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：

constructor() ：构造函数，通过给 this.state 赋值对象来初始化内部 state；为事件处理函数绑定实例
static getDerivedStateFromProps(nextProps, prevState)：组件更新，相当于componentwillmount 和 componentWillReceiveProps合并

render() ：组件在这里生成虚拟的 DOM 节点
componentDidMount() :组件真正在被装载之后

2、更新时

当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：

static getDerivedStateFromProps()
shouldComponentUpdate(nextProps,nextState):组件接受到新属性或者新状态的时候（可以返回 false，接收数据后不更新，阻止 render 调用，后面的函数不会被继续执行了）

render():组件重新描绘
getSnapshotBeforeUpdate(prevProps，prevState)：替换componentWillUpdate函数，将参数返回并传递给componentDidUpdate周期函数

componentDidUpdate():组件已经更新

3、卸载时

当组件从 DOM 中移除时会调用如下方法：

componentWillUnmount():组件即将销毁

DerivedStateFromPropsSnapshotBeforeUpdateshouldComponentUpdate	来自道具的派生状态更新前快照应该组件更新

//App.js
export default class App extends Component {
	constructor(props) {
		super(props)
		this.state = {
			name: '这是个初始化的数据',
		}
		console.log('father constructor');
	}

	static getDerivedStateFromProps(nextProps, prevState){
		console.log('father getDerivedStateFromProps',nextProps, prevState);
		return null
	}
	shouldComponentUpdate(nextProps,nextState){
		console.log('father shouldComponentUpdate',nextProps,nextState);
		return true
	}

	getSnapshotBeforeUpdate(prevProps, prevState){
		console.log('father getSnapshotBeforeUpdate',prevProps, prevState);
		return null
	}

	componentDidUpdate(){
		console.log('father componentDidUpdate');
	}
  
	componentDidMount(){
		console.log('father componentDidMount');
	}
  
	componentWillUnmount(){
		console.log('father componentWillUnmount');
	}
  
  handleContext = () => {
		console.log('=====子组件调用父组件方法,改变父组件的state值=====')
		this.setState({
			name:'子组件调用父组件方法'
		})
	}
	render() {
		console.log('father render');
		const { name } = this.state
		return (
			<div className="App">
				<div>state值=====：{name}</div>
				<button onClick={()=>{
					console.log('=====改变state值=====');
					this.setState({
						name:'这是个改变state值的数据'
					})
				}}>改变state值</button>
        
        <Children name={name} handleContext={this.handleContext}></Children>
			</div>
		)
	}
}

componentWillMount 

数据渲染之前，不能和getDerivedStateFromProps、getSnapshotBeforeUpdate同时使用

react的错误处理

当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法：

注意点⚠️：

getDerivedStateFromProps()会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。
此方法适用于，即state的值在任何时候都取决于props,派生状态会导致代码冗余，并使组件难以维护。

谨慎使用。

父子组件的生命周期

1、挂载时

father constructor
father getDerivedStateFromProps

father render
children constructor

children getDerivedStateFromProps
children render

children componentDidMount
father componentDidMount

2、更新时

父组件更新state值时：

=====父组件改变state值=====

father getDerivedStateFromProps
father shouldComponentUpdate

father render
children getDerivedStateFromProps

children shouldComponentUpdate
children render

children getSnapshotBeforeUpdate
father getSnapshotBeforeUpdate

children componentDidUpdate
father componentDidUpdate

子组件更新state值时：

=====子组件改变state值=====

children getDerivedStateFromProps
children shouldComponentUpdate

children render
children getSnapshotBeforeUpdate

children componentDidUpdate

=====子组件调用父组件方法,改变父组件的state值=====

同：父组件更新state值时

3、卸载时

children componentWillUnmount
father componentWillUnmount

//Children.js
import React, { useEffect,Component } from 'react'
export default class Children extends Component {
    constructor(props){
        super(props)
        this.state={
            count:0
        }
        console.log('children constructor');
    }


    static getDerivedStateFromProps(nextProps, prevState){
      console.log('children getDerivedStateFromProps',nextProps, prevState);
      return null
    }
    shouldComponentUpdate(nextProps,nextState){
      console.log('children shouldComponentUpdate',nextProps,nextState);
      return true
    }

    getSnapshotBeforeUpdate(prevProps, prevState){
      console.log('children getSnapshotBeforeUpdate',prevProps, prevState);
      return null
    }

    componentDidUpdate(){
      console.log('children componentDidUpdate');
    }

    componentDidMount(){
      console.log('children componentDidMount');
    }
    componentWillUnmount(){
      console.log('children componentWillUnmount');
    }

    handleLog = () => {
        console.log("children Component");
    };
    render(){
        const {name,handleContext} = this.props
        const {count} = this.state
        console.log('children render');
        return (
            <div>
                <h1>这是childern页面</h1>
                <div>这是个从父组件通过props值获取的数据：{name}</div>
                <div>这是子组件的state值：{count}</div>
                <button onClick={()=>{
                    console.log('=====子组件改变state值=====');
                    this.setState({
                        count:++this.state.count
                    })
                }}>数字增加</button>
                <button onClick={handleContext}>子组件调用父组件方法</button>
            </div>
        )
    }
}

React V7.0.2组件生命周期

react生命周期有哪几个阶段

1、挂载时

2、更新时

3、卸载时

react的错误处理

父子组件的生命周期

1、挂载时

2、更新时

3、卸载时