React 基础小知识：生命周期

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

组件生命周期

组件从创建到死亡会经历一些特定的阶段。
React 组件中包含一系列钩子函数（即生命周期回调函数），会在特定的时刻调用。
我们在定义组件时，会在特定的生命周期回调函数中做特定的工作。

React 生命周期(旧)

react生命周期(旧).png

以下案例可以展示一个组件的生命周期

class Count extends React.Component {
  // 构造器
  constructor(props) {
    console.log('Count---constructor');
    super(props);
  }
  
  state = {count: 0};
  
  // 加一效果的 按钮回调
  add = () => {
    const {count} = this.state;
    this.setState({count: count + 1});
  }
  
  // 卸载组件的按钮回调
  death = () => {
    ReactDOM.unmountComponentAtNode(document.getElementById('test'))
  }
  
  // 强制更新的按钮回调
  force = () => {
    this.forceUpdate()
  }
  
  // 组件将要挂载的钩子
  componentWillMount() {
    console.log('Count---componentWillMount');
  }
  
  // 组件挂载完毕的钩子
  componentDidMount() {
    console.log('Count---componentDidMount');
  }
  
  // 组件将要卸载的钩子
  componentWillUnmount() {
    console.log('Count---componentWillUnmount');
  }
  
  // 控制组件更新的“阀门”
  shouldComponentUpdate(nextProps, nextState) {
    console.log('Count---shouldComponentUpdate');
    // 当返回值为 true 的时候，当前组件进行 render。
    // 如果返回值是 false 则不进行 render。
    return true;
  }
  
  // 组件将要更新的钩子
  componentWillUpdate() {
    console.log('Count---componentWillUpdate');
  }
  
  // 组件更新完毕的钩子
  componentDidUpdate() {
    console.log('Count---componentDidUpdate');
  }
  
  // 组件初始化和更新渲染函数
  render() {
    console.log('Count---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>
    );
  }
}
ReactDOM.render(<Count />, document.getElementById("test"));
复制代码

以下案例可以展示父子组件的生命周期

class A extends React.Component {
  state = {carName: '奔驰'}

  changeCar = () => {
    this.setState({carName: '宝马'})
  }

  render() {
    return(
      <div>
        <div>我是A组件</div>
        <button onClick={this.changeCar}>换车</button>
        <B carName={this.state.carName}/>
      </div>
    );
  }
}

class B extends React.Component {
  // 组件将要接收新的 props 的钩子
  componentWillReceiveProps(props) {
    console.log('B---componentWillReceiveProps', props);
  }

  // 组件将要更新的钩子
  componentWillUpdate() {
    console.log('B---componentWillUpdate');
  }
  
  // 组件更新完毕的钩子
  componentDidUpdate() {
    console.log('B---componentDidUpdate');
  }
  
  render() {
    console.log('B---render');
    return(
      <div>我是B组件，接收到的车是：{this.props.carName}</div>
    );
  }
}

ReactDOM.render(<A />, document.getElementById("test"));
复制代码

生命周期的三个阶段（旧）：

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

constructor()
componentWillMount()
render()
componentDidMount() ---> 常用，一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息

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

shouldComponentUpdate() ---> forceUpdate() 强制更新时没有这个
componentWillUpdate()
render() ---> 常用
componentDidUpdate()

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

componentWillUnmount() ---> 常用，一般在这个钩子中做一些收尾工作，例如：关闭定时器、取消订阅消息

React 生命周期(新)

react生命周期(新).png

React 从 v16.3 的版本开始，对生命周期的钩子进行了渐进式的调整，分别废弃和新增了一些生命周期的钩子函数：

即将废弃三个钩子：componentWillReceiveProps、componentWillMount、componentWillUpdate。在目前兼容性版本中使用这些钩子需要增加 UNSAFE_ 前缀。
新增两个新钩子：getDerivedStateFromProps、getSnapshotBeforeUpdate。

class Count extends React.Component {
  // 构造器
  constructor(props) {
    console.log('Count---constructor');
    super(props);
  }
  
  state = {count: 0};
  
  // 加一效果的 按钮回调
  add = () => {
    const {count} = this.state;
    this.setState({count: count + 1});
  }
  
  // 卸载组件的按钮回调
  death = () => {
    ReactDOM.unmountComponentAtNode(document.getElementById('test'))
  }
  
  // 强制更新的按钮回调
  force = () => {
    this.forceUpdate()
  }
  
  // 从 props 中获取派生 state
  static getDerivedStateFromProps(props, state) {
    console.log('getDerivedStateFromProps', props, state)
    // 若 state 的值在任何时候都取决于 props，那么可以使用 
    // return props
    return null
  }
  
  // 在更新之前获取快照
  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log('getSnapshotBeforeUpdate', prevProps, prevState)
    // 任何返回值将作为参数传递给 `componentDidUpdate()`
    return null
  }
  
  // 组件挂载完毕的钩子
  componentDidMount() {
    console.log('Count---componentDidMount');
  }
  
  // 组件将要卸载的钩子
  componentWillUnmount() {
    console.log('Count---componentWillUnmount');
  }
  
  // 控制组件更新的“阀门”
  shouldComponentUpdate(nextProps, nextState) {
    console.log('Count---shouldComponentUpdate');
    // 当返回值为 true 的时候，当前组件进行 render。
    // 如果返回值是 false 则不进行 render。
    return true;
  }
  
  // 组件更新完毕的钩子
  componentDidUpdate(prevProps, prevState, snapshotValue) {
    console.log('Count---componentDidUpdate', prevProps, prevState, snapshotValue);
  }
  
  // 组件初始化和更新渲染函数
  render() {
    console.log('Count---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>
    );
  }
}
ReactDOM.render(<Count count="199"/>, document.getElementById("test"));
复制代码

生命周期的三个阶段（新）：

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

constructor()
getDerivedStateFromProps()
render()
componentDidMount() ---> 常用，一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息

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

getDerivedStateFromProps()
shouldComponentUpdate()
render() ---> 常用
getSnapshotBeforeUpdate()
componentDidUpdate()

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

componentWillUnmount() ---> 常用，一般在这个钩子中做一些收尾工作，例如：关闭定时器、取消订阅消息

React 基础小知识：生命周期

组件生命周期

React 生命周期(旧)

React 生命周期(新)

猜你喜欢