快捷導(dǎo)航

react類標(biāo)簽的生命周期詳解

更新時(shí)間：2024年11月08日 14:14:08 作者：大霧.

在React類組件中,生命周期方法是非常重要的概念,它們允許我們在組件的不同階段執(zhí)行代碼,這包括在組件掛載、更新以及卸載時(shí)執(zhí)行的生命周期方法,本文通過介紹React類組件中的生命周期方法,旨在幫助開發(fā)者深入理解組件的生命周期管理

子組件中的代碼

import React from "react";
class Son extends React.Component {
  // 構(gòu)造函數(shù)：初始化狀態(tài)
  constructor(props) {
    super(props);
    // 使用 props 初始化 state
    this.state = {
      count: props.initialCount || 0, // 從 props 傳入的初始計(jì)數(shù)
      name: props.name || "Son", // 從 props 傳入的初始名稱
      isshow: props.isshow || true, // 從 props 傳入的初始是否顯示
    };
  }
  componentDidMount() {
    console.log("son componentDidMount");
  }
  //  shouldComponentUpdate - 控制是否更新組件
  shouldComponentUpdate(nextProps, nextState) {
    console.log("son shouldComponentUpdate");
    return true; // 默認(rèn)返回 true，表示每次都更新
  }
  // componentDidUpdate - 更新后調(diào)用
  componentDidUpdate(prevProps, prevState) {
    console.log("son componentDidUpdate");
  }
  //  componentWillUnmount - 組件卸載前調(diào)用
  componentWillUnmount() {
    console.log("son componentWillUnmount");
  }
  // 增加計(jì)數(shù)的方法
  increment = () => {
    this.setState((prevState) => ({
      count: prevState.count + 1,
    }));
  };
  // 減少計(jì)數(shù)的方法
  decrement = () => {
    this.setState((prevState) => ({
      count: prevState.count - 1,
    }));
  };
  // 渲染方法：顯示組件內(nèi)容
  render() {
    return (
      <div>
        {this.state.isshow && (
          <div>
            <h2>計(jì)數(shù)器</h2>
            <p>當(dāng)前名字: {this.state.name}</p>
            <p>當(dāng)前計(jì)數(shù): {this.state.count}</p>
            <button onClick={this.increment}>增加</button>
            <button onClick={this.decrement}>減少</button>
          </div>
        )}
      </div>
    );
  }
}
export default Son;

父組件中代碼

import React from "react";
import Son from "./son";
class fa extends React.Component {
    constructor(props) {
        super(props);
        // 使用 props 初始化 state
        this.state = {
          isshow:true
        };
      }
  componentDidMount() {
    console.log("fa componentDidMount");
  }
  //  shouldComponentUpdate - 控制是否更新組件
  shouldComponentUpdate(nextProps, nextState) {
    console.log("fa shouldComponentUpdate");
    return true; // 默認(rèn)返回 true，表示每次都更新
  }
  //  componentDidUpdate - 更新后調(diào)用
  componentDidUpdate(prevProps, prevState) {
    console.log("fa componentDidUpdate");
  }
  //  componentWillUnmount - 組件卸載前調(diào)用
  componentWillUnmount() {
    console.log("fa componentWillUnmount");
  }
  render() {
    return (
      <div>
        <h1>父組件</h1>
        <button onClick={()=>{
            this.setState({
              isshow:!this.state.isshow
            })
        }}>顯示/隱藏</button>
        {/* 傳遞 initialCount 到子組件 Counter */}
        <Son initialCount={5} name={"liu"} isshow={this.state.isshow}/>
      </div>
    );
  }
}
export default fa;

掛載時(shí)候打印出來的是