React 生命周期(旧)

React 生命周期(旧)

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

　　　　　　1. constructor()

　　　　　　2. componentWillMount()

　　　　　　3. render()

　　　　　　4. componentDidMount() ====> 常用

　　　　　　　　一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息

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

　　　　　　1. shouldComponentUpdate()

　　　　　　2. componentWillUpdate()

　　　　　　3. render() ====> 必须使用的一个

　　　　　　4. componentDidUpdate()

　　3. 卸载组件：由ReactDOM.unmountComponentAtNode()触发

　　　　　　1. componentWillUnmount() ====> 常用

　　　　　　　　一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息

 

 

 

class Count extends React.Component {
            // 构造器
            constructor(props) {
                console.log('Count-constructor');
                super(props)
                // 初始化状态
                this.state = { count: 0 }
            }
            render() {
                console.log('render')
                const { count } = this.state
                return (
                    <div>
                        <h2>当前求和为{count}</h2>
                        <button onClick={this.add}>点我+1</button> 
                        <button onClick={this.death}>点我卸载</button>
                        <button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button>
                    </div>
                )
            }
            add = () => {
                let { count } = this.state
                this.setState({count: ++count})
            }
            death = () => {
                ReactDOM.unmountComponentAtNode(document.getElementById('test'))
            }
            force = () => {
                this.forceUpdate()
            }
            // 组件挂载完毕的钩子
            componentDidMount() {
                console.log('Count---componentDidMount');
            }
            // 组件将要卸载的钩子
            componentWillUnmount() {
                console.log('Count---componentWillUnmount');
            }
            // 控制组件更新的"阀门"
            shouldComponentUpdate() {
                console.log('Count---shouldComponentUpdate');
                return false;
            }
            // 组件将要更新的钩子
            componentWillUpdate() {
                console.log('Count---componentWillUpdate');
            }
            // 组件更新完毕的钩子
            componentDidUpdate() {
                console.log('Count---componentDidUpdate');
            }
        }
        ReactDOM.render(<Count/>, document.getElementById('test'))

 

 

点击+1按钮

 

 

 点击卸载按钮

 

 

 强制更新：forceUpdate() 

      　　        不管更新的 "阀门" 有没有开启，强制更新都是会执行 render 的，但是如果阀门关闭，正常更新是不会执行 render 的

 

 

 

        class A extends React.Component {
            // 初始化状态
            state = { car: '奔驰' }
            render() {
                return (
                    <div>
                        <div>我是A组件</div>
                        <button onClick={this.changeCar}>换车</button>
                        <B car={this.state.car}/>
                    </div>
                )
            }
            changeCar = () => {
                this.setState({car: '奥拓'})
            }
        }
        class B extends React.Component {
            // 组件将要接收新的 props 的
            componentWillReceiveProps() {
                console.log('B---componentWillReceiveProps');
            }
            // 控制组件更新的"阀门"
            shouldComponentUpdate() {
                console.log('B---shouldComponentUpdate');
                return true;
            }
            // 组件将要更新的钩子
            componentWillUpdate() {
                console.log('B---componentWillUpdate');
            }
            // 组件更新完毕的钩子
            componentDidUpdate() {
                console.log('B---componentDidUpdate');
            }
            render() {
                console.log('B---render');
                return (
                    <div>我是B组件，接收到的车是{this.props.car}</div>
                )
            }
        }
        ReactDOM.render(<A/>, document.getElementById('test'))

 

componentWillReceiveProps 父组件第二次及以后render，子组件会执行