React Class Component

本文发表于 528 天前，其中的信息可能已经事过境迁

文章摘要 FakeGPT

加载中...|

此内容根据文章生成，并经过人工审核，仅用于文章内容的解释与总结投诉

顾名思义，Class API 就是使用 ES6 支持的原生 Class API 来编写 React 组件

基础体验

通过一个简单的 Counter 自增组件看一下组件的基础编写结构

jsx

// class API
import { Component } from "react";

class Counter extends Component {
  // 状态变量
  state = {
    count: 0,
  };

  // 事件回调
  clickHandler = () => {
    // 修改状态变量 触发UI组件渲染
    this.setState({
      count: this.state.count + 1,
    });
  };

  // UI模版
  render() {
    return <button onClick={this.clickHandler}>+{this.state.count}</button>;
  }
}

function App() {
  return (
    <div>
      <Counter />
    </div>
  );
}

export default App;

组件生命周期

组件通信

父传子

jsx

// class API
import { Component } from "react";

class Son extends Component {
  render() {
    const { count } = this.props;
    return <div>this is Son, {count}</div>;
  }
}

class App extends Component {
  // 状态变量
  state = {
    count: 0,
  };

  setCount = () => {
    this.setState({
      count: this.state.count + 1,
    });
  };

  // UI模版
  render() {
    return (
      <>
        <Son count={this.state.count} />
        <button onClick={this.setCount}>+</button>
      </>
    );
  }
}

export default App;

子传父

jsx

// class API
import { Component } from "react";

class Son extends Component {
  render() {
    const { msg, onGetSonMsg } = this.props;
    return (
      <>
        <div>this is Son, {msg}</div>
        <button onClick={() => onGetSonMsg("this is son msg")}>changeMsg</button>
      </>
    );
  }
}

class App extends Component {
  // 状态变量
  state = {
    msg: "this is initail app msg",
  };

  onGetSonMsg = (msg) => {
    this.setState({ msg });
  };

  // UI模版
  render() {
    return (
      <>
        <Son msg={this.state.msg} onGetSonMsg={this.onGetSonMsg} />
      </>
    );
  }
}

export default App;