React组件生命周期

组件生命周期

只有类组件才有生命周期,分别为创建时、更新时、卸载时

1.1生命周期创建时

• constructor:创建时执行

作用:

1. 绑定事件bind改变this
2. 声明state
3. 非受控表单

• render:组件DOM挂载前执行
  作用:渲染DOM
• componentDidMount:组件DOM挂载后执行
  作用:发送ajax,axios请求,获取DOM元素

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
    constructor() {
        super()
        console.log('constructor---创建时执行');
        console.log('获取的DOM元素为:' + document.getElementById('title'));
    }
    render() {
        console.log('render---组件DOM挂载前执行');
        console.log('获取的DOM元素为:' + document.getElementById('title'));
        return (
            <div>
                <div id="title">山竹</div>
            </div>
        )
    }
    componentDidMount() {
        console.log('componentDidMount---组件DOM挂载后执行');
        console.log('获取的DOM元素为:' + document.getElementById('title').innerHTML);
    }
}


ReactDOM.render(<App />, document.getElementById('root'));

效果

1.2生命周期更新时

执行时机：setState()、 forceUpdate()、 组件接收到新的props
说明：以上三者任意一种变化，组件就会重新渲染
更新时常见函数

1. shouldComponentUpdate
2. render 方法

• 作用:更新组件DOM
• 注意 不要在render方法中 调用 this.setState()会触发无限更新

3. componentDidUpdate

• 作用:发起ajax请求 setState

1.2.1setState()

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
    state = {
        count: 0
    }
    // 点击按钮时触发
    handelClick = () => {
        // setState触发
        this.setState({
            count: this.state.count + 1
        })
    }
    render() {
        console.log('render---setState触发更新时调用函数');
        // 跟创建时触发的是同一个render,但不能获取DOM,点击触发更新时可以
        console.log('获取的DOM元素为:' + document.getElementById('title'));
        return (
            <div>
                <div id="title">当前地鼠被打次数为:{this.state.count}</div>
                <button onClick={this.handelClick}>按钮</button>
            </div>
        )
    }
    componentDidUpdate() {
        // 作用:发起ajax请求 setState
        console.log('componentDidUpdate---setState触发更新时调用函数');
        console.log('获取的DOM元素为:' + document.getElementById('title'));
    }
}
ReactDOM.render(<App />, document.getElementById('root'));

效果

1.2.2 forceUpdate()

在如上代码点击触发事件时修改一句代码即可看到效果,会发生强制更新

   // 点击按钮时触发
    handelClick = () => {
        // forceUpdate触发
        this.forceUpdate()
    }

1.2.3props()

父子传递的方式

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
    state = {
        count: 0
    }
    // 点击按钮时触发
    handelClick = () => {
        this.setState({
            count: this.state.count + 1
        })
    }
    render() {
        console.log('App---render');
        return (
            <div>
                {/* 引用子组件并传递 */}
                <Son count={this.state.count} />
                <button onClick={this.handelClick}>按钮</button>
            </div>
        )
    }
    componentDidUpdate() {
        console.log('App---componentDidUpdate');
    }
}
class Son extends Component {
    render() {
        console.log('Son---render');
        return <div id="title">当前地鼠被打次数为:{this.props.count}</div>
    }
    componentDidUpdate() {
        console.log('Son---componentDidUpdate');
    }
}

ReactDOM.render(<App />, document.getElementById('root'));

效果

1.3生命周期卸载时

1. 触发卸载时的条件 可以使用条件渲染达到
2. 执行的函数 componentWillUnMount

作用： 做一些清理工作 比如： 清除定时器 、移除事件的监听

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
    state = {
        count: 0
    }
    // 点击按钮时触发
    handelClick = () => {
        this.setState({
            count: this.state.count + 1
        })
    }
    render() {
        return (
            <div>
                {/* 引用子组件并传递 */}
                {this.state.count === 2 ? '地鼠被打死了' : <Son count={this.state.count} />}

                <button onClick={this.handelClick}>按钮</button>
            </div>
        )
    }
}
class Son extends Component {
    componentWillUnmount() {
        console.log('componentWillUnmount被调用')
    }
    render() {
        return <div id="title">当前地鼠被打次数为:{this.props.count}</div>
    }
}
ReactDOM.render(<App />, document.getElementById('root'));

效果

不常用生命周期

static getderivedstatefromprops

static getDerivedStateFromProps

getSnapshotBeforeUpdate()

• static getDerivedStateFromError()
• componentDidCatch()

新版完整生命周期函数

旧版的生命周期钩子函数