React 从零实现：组件渲染和 setState

2023-12-07 23:21:58

当然可以，以下是根据你的要求生成的博文：

在 React 中，组件大体分为两种：一种是一个纯函数，没有生命周期的。另一个通过继承自 React.Component 的类来实现。我们先来写一个 Component 类。

class Component {
  constructor(props) {
    this.props = props;
    this.state = {};
  }

  setState(newState) {
    this.state = { ...this.state, ...newState };
    this.render();
  }

  render() {
    // 组件渲染
  }
}

完成了一个 Component 类，同时该类的实例有一个 setState 函数，用来更新该组件。updateComponent 函数用以更新组件。

updateComponent 函数流程如下：

将更新后的 state 设置为组件的 state。
调用组件的 render 方法。
将组件的 render 结果渲染到 DOM 中。

通过 setState 来更新组件

现在我们来实现一个具体的组件，比如一个计数器组件。

class Counter extends Component {
  constructor(props) {
    super(props);

    this.state = {
      count: 0
    };
  }

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

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.incrementCount}>+</button>
      </div>
    );
  }
}

这个组件有一个 state，count，初始值为 0。incrementCount 方法用以增加 count 的值。render 方法会把 count 的值渲染到 DOM 中。

当我们点击按钮时，incrementCount 方法会被调用，从而更新 count 的值，进而触发组件的重新渲染。