react生命周期

总结-旧生命周期

初始化阶段: 由ReactDOM.render()触发---初次渲染

1. constructor()
2. componentWillMount()
3. render()
4. componentDidMount() ===> 常用
   一般在这个钩子中做一些初始化的事,例如:开启定时器,发送网络请求,订阅消息

更新阶段: 由组件内部this.setState()或父组件render触发

1. shouldComponentUpdate()
2. componentWillUpdate()
3. render() ===> 常用
4. componentDidUpdate()

卸载组件: ReactDOM.unmountComponentAtNode()触发

组件挂载流程

1. componentWillUnmount() ===> 常用
   一般在这个钩子中做一些收尾的事,例如:关闭定时器,取消订阅消息

    class Count extends React.Component {
            // 最先调用
            constructor(props) {
                super(props);
                console.log('count---constructor');
                this.state = { count: 0 }
            }
 
            // 组件将要挂载
            //WARNING! To be deprecated in React v17. Use componentDidMount instead.
            componentWillMount() {
                console.log('count---componentWillMount');
            }
 
            // 组件挂载完毕的钩子
            componentDidMount() {
                console.log('count---componentDidMount')
            }
 
            componentWillUnmount() {
                console.log('count---componentWillUnmount');
            }
 
            // 控制更新阀门
            shouldComponentUpdate(nextProps, nextState) {
                console.log('count---shouldComponentUpdate');
                return true;
            }
            // 组件将要更新的钩子
            //WARNING! To be deprecated in React v17. Use componentDidUpdate instead.
            componentWillUpdate(nextProps, nextState) {
                console.log('count---componentWillUpdate')
            }
            // 组件更新之后
            componentDidUpdate(prevProps, prevState) {
                console.log('count---componentDidUpdate');
            }
 
            add = () => {
                let { count } = this.state;
                count += 1;
                this.setState({ count: count });
            }
            unload = () => {
                root.unmount(document.getElementById('test'));
            }
 
            // 初始化渲染,状态更新之后 执行
            render() {
                const { count } = this.state;
                console.log('count---render');
                return (
                    <div>
                        <h2>当前求和为: {count}</h2>
                        <button onClick={this.add}>点我加一</button>
                        <button onClick={this.unload}>卸载组件</button>
                    </div>
                )
            }
        }

父组件render流程

      class A extends React.Component {
            constructor(props) {
                super(props);
                this.state = { carName: '奔驰' };
            }
            changeCar = () => {
                this.setState({ carName: '宝马' });
            }
            render() {
                return (
                    <div>
                        <h1>A</h1>
                        <button onClick={this.changeCar}>换车</button>
                        <B carName={this.state.carName} />
                    </div>
                )
            }
        }
 
        class B extends React.Component {
            // 组件将要接收到新的props的钩子
            //WARNING! To be deprecated in React v17.
            //  Use new lifecycle static getDerivedStateFromProps instead.
            componentWillReceiveProps(props) {
                console.log('count---componentWillReceiveProps', props)
            }
            render() {
                return (
                    <div>
                        <h1>B</h1>
                        <h2>现在的车: {this.props.carName}</h2>
                    </div>
                )
            }
        }

新生命周期

class Count extends React.Component {
 
            // 最先调用
            constructor(props) {
                super(props);
                console.log('count---constructor');
                this.state = { count: 0 }
            }
 
            // 使用场景极其罕见,state值取决于props
            static getDerivedStateFromProps(props, state) {
                console.log('getDerivedStateFromProps', props, state);
                return null;
            }
 
            // 在最近一次渲染之前调用,传值给DidUpdate
            getSnapshotBeforeUpdate = (prevProps, prevState) => {
                console.log('getSnapshotBeforeUpdate');
                return 'nihao';
            }
 
            // 组件挂载完毕的钩子
            componentDidMount() {
                console.log('count---componentDidMount')
            }
 
            componentWillUnmount() {
                console.log('count---componentWillUnmount');
            }
 
            // 控制更新阀门
            shouldComponentUpdate(nextProps, nextState) {
                console.log('count---shouldComponentUpdate');
                return true;
            }
            // 组件更新之后
            componentDidUpdate(prevProps, prevState, snapshotValue) {
                console.log('count---componentDidUpdate', snapshotValue);
            }
 
            add = () => {
                let { count } = this.state;
                count += 1;
                this.setState({ count: count });
            }
            unload = () => {
                root.unmount(document.getElementById('test'));
            }
 
            // 初始化渲染,状态更新之后 执行
            render() {
                const { count } = this.state;
                console.log('count---render');
                return (
                    <div>
                        <h2>当前求和为: {count}</h2>
                        <button onClick={this.add}>点我加一</button>
                        <button onClick={this.unload}>卸载组件</button>
                    </div>
                )
            }
        }