?命周期?法，用于在組件不同階段執行?定義功能。在組件被創建并插?到 DOM 時(即掛載中階段 (mounting))，組件更新時，組件取消掛載或從 DOM 中刪除時，都有可以使用的生命周期方法。
一、React V16.3之前的?命周期
二、React V17之后的?命周期
V17可能會廢棄的三個生命周期函數用getDerivedStateFromProps替代，?前使?的話加上
UNSAFE_:
componentWillMount
componentWillReceiveProps
componentWillUpdate
引入兩個新的?命周期函數:
static getDerivedStateFromProps
getSnapshotBeforeUpdate
如果不想?動給將要廢棄的?命周期添加 UNSAFE_ 前綴，可以?下?的命令 ：
npx react-codemod rename-unsafe-lifecycles <path>
新引?的兩個生命周期函數
static getDerivedStateFromProps(props, state)
getDerivedStateFromProps 會在調? render ?法之前調?，并且在初始掛載及后續更新時都會被
調用。它應返回一個對象來更新 state，如果返回 null 則不更新任何內容。
請注意，不管原因是什么，都會在每次渲染前觸發此方法。這與 UNSAFE_componentWillReceiveProps 形成對比，后者僅在父組件重新渲染時觸發，?不是在內部調? setState 時。
import React, { Component } from "react";
import PropTypes from "prop-types";
export default class LifeCyclePage extends Component {
? ? static defaultProps = {
? ? ? ? msg: "omg"
? ? }
? ? static propTypes = {
? ? ? ? msg: PropTypes.string.isRequired
? ? }
? ? constructor(props) {
? ? ? ? super(props);
? ? ? ? this.state = {
? ? ? ? ? ? count: 0
? ? ? ? }
? ? ? ? console.log("constructor");
? ? }
? ? static getDerivedStateFromProps(props, state) {
? ? ? ? // getDerivedStateFromProps 會在調用 render 方法之前調?
? ? ? ? // 并且在初始掛載及后續更新時都會被調?
? ? ? ? // 它應返回一個對象來更新 state，如果返回 null 則不更新任何內容
? ? ? ? console.log("getDerivedStateFromProps");
? ? ? ? return count > 1 ? { count: 0 } : null;
? ? }
? ? // componentWillMount() { // v17廢棄
? ? //? ? console.log("componentWillMount");
? ? // }
? ? componentDidMount() {
? ? ? ? console.log("componentDidMount");
? ? }
? ? shouldComponentUpdate(nextProps, nextState) {
? ? ? ? console.log("shouldComponentUpdate", nextState, this.state);
? ? ? ? return true;
? ? }
? ? // componentWillUpdate() { // v17廢棄
? ? //? ? console.log("componentWillUpdate");
? ? // }
? ? componentDidUpdate() {
? ? ? ? console.log("componentDidUpdate");
? ? }
? ? setCount = () => {
? ? ? ? this.setState({
? ? ? ? ? ? count: this.state.count + 1
? ? ? ? })
? ? }
? ? render() {
? ? ? ? console.log("render");
? ? ? ? const { count } = this.state;
? ? ? ? return (
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <h3>LifeCyclePage</h3>
? ? ? ? ? ? ? ? <p>{count}</p>
? ? ? ? ? ? ? ? <button onClick={this.setCount}>改變count</button>
? ? ? ? ? ? ? ? <Child count={count}/>
? ? ? ? ? ? </div>
? ? ? ? )
? ? }
}
class Child extends Component {
? ? // 初次渲染的時候不會執行，只有在已掛載的組件接收新的props的時候，才會執行
? ? // componentWillReceiveProps(nextProps) { // v17廢棄
? ? //? ? console.log("componentWillReceiveProps", nextProps);
? ? // }
? ? componentWillUnmount() {
? ? ? ? console.log("componentWillUnmount");
? ? }
? ? render() {
? ? ? ? console.log("Child render");
? ? ? ? const { count } = this.props;
? ? ? ? return (
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <h3>Child</h3>
? ? ? ? ? ? ? ? <p>{count}</p>
? ? ? ? ? ? </div>
? ? ? ? )
? ? }
}
步驟1：首次進入頁面的打印執行順序為
1.constructor
2.getDerivedStateFromProps
3.render
4.Child render
5.componentDidMount
步驟2：點擊按鈕后的打印執行順序為
1.getDerivedStateFromProps
2.shouldComponentUpdate? {count:1}? {count:0}
3.render
4.Child render
5.componentDidUpdate
再此點擊按鈕后的打印執行順序為
1.getDerivedStateFromProps
2.shouldComponentUpdate? {count:0}? {count:1}
3.render
4.Child render
5.componentDidUpdate
getSnapshotBeforeUpdate(prevProps, prevState)
在render之后，在componentDidUpdate之前。
getSnapshotBeforeUpdate() 在最近一次渲染輸出(提交到 DOM 節點)之前調用。它使得組件能在發生更改之前從 DOM 中捕獲一些信息(例如，滾動位置)。此生命周期的任何返回值將作為參數傳遞給 componentDidUpdate(prevProps,? prevState,? snapshot) 。
import React, { Component } from "react";
import PropTypes from "prop-types";
export default class LifeCyclePage extends Component {
? ? static defaultProps = {
? ? ? ? msg: "omg"
? ? }
? ? static propTypes = {
? ? ? ? msg: PropTypes.string.isRequired
? ? }
? ? constructor(props) {
? ? ? ? super(props);
? ? ? ? this.state = {
? ? ? ? ? ? count: 0
? ? ? ? }
? ? ? ? console.log("constructor");
? ? }
? ? static getDerivedStateFromProps(props, state) {
? ? ? ? console.log("getDerivedStateFromProps");
? ? ? ? return null;
? ? }
? ? // componentWillMount() { // v17廢棄
? ? //? ? console.log("componentWillMount");
? ? // }
? ? componentDidMount() {
? ? ? ? console.log("componentDidMount");
? ? }
? ? shouldComponentUpdate(nextProps, nextState) {
? ? ? ? console.log("shouldComponentUpdate", nextState, this.state);
? ? ? ? return true;
? ? }
? ? getSnapshotBeforeUpdate(prevProps, prevState) {
? ? ? ? // 在render之后，在componentDidUpdate之前
? ? ? ? console.log("getSnapshotBeforeUpdate", prevProps, prevState);
? ? ? ? return {
? ? ? ? ? ? content: "我是getSnapshotBeforeUpdate"
? ? ? ? };
? ? }
? ? // componentWillUpdate() { // v17廢棄
? ? //? ? console.log("componentWillUpdate");
? ? // }
? ? componentDidUpdate(prevProps, prevState, snapshot) {
? ? ? ? console.log("componentDidUpdate", prevProps, prevState, snapshot);
? ? }
? ? setCount = () => {
? ? ? ? this.setState({
? ? ? ? ? ? count: this.state.count + 1
? ? ? ? })
? ? }
? ? render() {
? ? ? ? console.log("render");
? ? ? ? const { count } = this.state;
? ? ? ? return (
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <h3>LifeCyclePage</h3>
? ? ? ? ? ? ? ? <p>{count}</p>
? ? ? ? ? ? ? ? <button onClick={this.setCount}>改變count</button>
? ? ? ? ? ? ? ? <Child count={count}/>
? ? ? ? ? ? </div>
? ? ? ? )
? ? }
}
class Child extends Component {
? ? // 初次渲染的時候不會執行，只有在已掛載的組件接收新的props的時候，才會執行
? ? // componentWillReceiveProps(nextProps) { // v17廢棄
? ? //? ? console.log("componentWillReceiveProps", nextProps);
? ? // }
? ? componentWillUnmount() {
? ? ? ? console.log("componentWillUnmount");
? ? }
? ? render() {
? ? ? ? console.log("Child render");
? ? ? ? const { count } = this.props;
? ? ? ? return (
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <h3>Child</h3>
? ? ? ? ? ? ? ? <p>{count}</p>
? ? ? ? ? ? </div>
? ? ? ? )
? ? }
}
步驟1：首次進入頁面的打印執行順序為
1.constructor
2.getDerivedStateFromProps
3.render
4.Child render
5.componentDidMount
步驟2：點擊按鈕后的打印執行順序為
1.getDerivedStateFromProps
2.shouldComponentUpdate? {count:1}? {count:0}
3.render
4.Child render
5.getSnapshotBeforeUpdate? {msg: "omg"}? {count: 0}
6.componentDidUpdate? {msg: "omg"}? {count: 0}? {content: "我是getSnapshotBeforeUpdate"}
