react类标签的生命周期详解

import React from "react";
class Son extends React.Component {
  // 构造函数：初始化状态
  constructor(props) {
    super(props);
    // 使用 props 初始化 state
    this.state = {
      count: props.initialCount || 0, // 从 props 传入的初始计数
      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; // 默认返回 true，表示每次都更新
  }
  // componentDidUpdate - 更新后调用
  componentDidUpdate(prevProps, prevState) {
    console.log("son componentDidUpdate");
  }
  //  componentWillUnmount - 组件卸载前调用
  componentWillUnmount() {
    console.log("son componentWillUnmount");
  }
  // 增加计数的方法
  increment = () => {
    this.setState((prevState) => ({
      count: prevState.count + 1,
    }));
  };
  // 减少计数的方法
  decrement = () => {
    this.setState((prevState) => ({
      count: prevState.count - 1,
    }));
  };
  // 渲染方法：显示组件内容
  render() {
    return (
      <div>
        {this.state.isshow && (
          <div>
            <h2>计数器</h2>
            <p>当前名字: {this.state.name}</p>
            <p>当前计数: {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; // 默认返回 true，表示每次都更新
  }
  //  componentDidUpdate - 更新后调用
  componentDidUpdate(prevProps, prevState) {
    console.log("fa componentDidUpdate");
  }
  //  componentWillUnmount - 组件卸载前调用
  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;