挑战 React 第二十二篇

上篇讲到生命週期主要分成以下四大类:

MountingUpdatingUnmountingError Handling

Update

Update 生命週期

Update 有五个生命週期

static getDerivedStateFromProps(nextProps, prevState)
承上篇自己没用过这个方法，但官网表示:是一个 static 静态函数，因此无法操作 class 中的属性 (ex. this.state)无条件的根据 prop 更新内部 state，也就是只要有传入prop 值， 就更新state只有 prop 和 state 不同时才更新 stateshouldComponentUpdate(nextProps, nextState, nextContext)React 的预设行为是每当 state 有所改变时就重新 render，而这个生命週期可以让 component 是否要 rerender，但官方建议不要依赖这个方法来「避免」 render使用于效能最佳化render()回传 React ElementgetSnapshotBeforeUpdate(prevProps, prevState)
自己没用过这个方法，但官网表示:会在最近一次 render 的 output 被提交给 DOM 时被呼叫这个生命週期方法回传的值会被当作一个参数传递给 componentDidUpdate()它让你在 DOM 改变之前先从其中抓取一些资讯（例如滚动轴的位置）回传 null or snapshot的值componentDidUpdate(prevProps, prevState, snapshot)call APIRerender 的时候只会 call 一次

官方表示 getDerivedStateFromProps / shouldComponentUpdate / getSnapshotBeforeUpdate 这三个生命週期比较少使用。

实际範例

利用 console.log() 印出生命週期

ParentLifeCycle

import React, { Component } from 'react';import ChildLifeCycle from './ChildLifeCycle';class ParentLifeCycle extends Component {  constructor(props) {    super(props);      this.state = {       name: 'aaaa',    }    console.log('Parent Constructor');  }  static getDerivedStateFromProps(nextProps, prevState) {    console.log('Parent getDerivedStateFromProps');    // 回传 null 表示 state 无异动    return null;  }  componentDidMount() {    console.log('Parent componentDidMount');  }  shouldComponentUpdate(nextProps, nextState, nextContext) {    console.log('Parent shouldComponentUpdate');    // 预设值为 true    return true;  }  getSnapshotBeforeUpdate(prevProps, prevState) {    console.log('Parent getSnapshotBeforeUpdate');    return null;  }  componentDidUpdate() {    console.log('Parent componentDidUpdate');  }  render() {    console.log('Parent render');    return (      <div>        <div>Parent LifeCycle</div>        <ChildLifeCycle />      </div>    )  }}export default ParentLifeCycle;

ChildLifeCycle

import React, { Component } from 'react';class ChildLifeCycle extends Component {  constructor(props) {    super(props);      this.state = {       test: 'aaaa',    }    console.log('Child Constructor');  }  static getDerivedStateFromProps(nextProps, prevState) {    console.log('Child getDerivedStateFromProps');    // 回传 null 表示 state 无异动    return null;  }  componentDidMount() {    console.log('Child componentDidMount');  }  shouldComponentUpdate(nextProps, nextState, nextContext) {    console.log('Child shouldComponentUpdate');    // 预设值为 true    return true;  }  getSnapshotBeforeUpdate(prevProps, prevState) {    console.log('Child getSnapshotBeforeUpdate');    return null;  }  componentDidUpdate() {    console.log('Child componentDidUpdate');  }    render() {    console.log('Child render');    return (      <div>        <div>Child LifeCycle</div>      </div>    )  }}export default ChildLifeCycle;

下面截图网页呈现目前只有载入的生命週期

加入更新状态的 click 事件

changeName = () => {    this.setState({      name: 'changeName'    });  }  render() {    console.log('Parent render');    return (      <div>        <div>Parent LifeCycle</div>        <button onClick={this.changeName}>update state</button>        <ChildLifeCycle />      </div>    )  }

再次查看按了change state 的 console.log

Unmounting

Unmounting 生命週期

只有一个 componentWillUnmount()

在ㄧ个 component 被 unmount 和 destroy 后马上被呼叫不应该在 componentWillUnmount() 内呼叫 setState()移除计时器(setInterval)和网路请求或是任何在 componentDidMount() 内建立的 subscription

参考 React 官方网站连结