【Day06】生命周期 Lifecycle（Class Component）

React 元件拥有从产生、渲染
到被移除解放资源的各个阶段
称之为生命周期（Lifecycle）。

Class Component 生命周期

• Mount：初始化阶段（只执行一次）
• Update：组件更新阶段
• Unmount：组件卸载阶段（只执行一次）

Mount

• constructor
• getDerivedStateFromProps
• render
• componentDidMount

Update

• getDerivedStateFromProps
• shouldComponentUpdate
• render
• getSnapshotBeforeUpdate
• componentDidUpdate

Unmount

• componentWillUnmount

生命周期方法

• constructor：创建 class component 时必定呼叫的方法，进行资料宣告、初始化、预备、函式绑定的地方
• getDerivedStateFromProps：初始化时、props 或 state 改变时执行

class App extends React.Component{
	...
	static getDerivedStateFromProps(props, state){
		return{
			age: 23
		}
	}
}

• shouldComponentUpdate：用於避免没必要的更新，以达到优化效果
• render：将 HTML 输出到 DOM
• getSnapshotBeforeUpdate：更新前执行，让组件在DOM发生变化前捕获一些信息（如滚动位置），用意是把更新前的最後一刻DOM的状况纪录下来
• componentDidMount：
  • 第一次渲染（安装完毕）後唯一触发的生命周期函数，只会执行一次
  • render 完毕後呼叫，用於处理数据，比方说传入API资料，

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

一开始要就触发的东西，一般都放在 componentDidMount 里面执行。

• componentDidUpdate：组件更新完毕後执行
• componentWillUnmount：元件被移除时呼叫一次，进行一些收尾工作，比方说移除新增的元素、监听事件与定时器
• componentDidCatch：捕获组件错误信息

componentDidCatch(error, info)

• static getDerivedStateFromError

class App extends React.Component{
	...
	async componentDidMount(){
		const user = await fetch("/api/user").then(res => json());
		this.setState({ user });
	}
}

• forceUpdate：直接调用render()强制重新渲染组件，包含子组件也会重新渲染

生命周期参考图片 | 图片来源

参考资料：

【React.js入门 - 16】 React生命周期(1/4): Mount(上)- 在渲染以前