react生命周期 - K

总结-旧生命周期

初始化阶段: 由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>
                )
            }
        }