React 组件 API

React 是一个用于构建用户界面的 JavaScript 库，其核心概念是组件化开发。组件是独立的、可复用的代码单元，代表了浏览器中的某个部分。React 组件 API 为 React 中组件的创建和使用提供了一系列接口。下面是几个重要的 React 组件 API：

React.Component

React.Component 是一个基类（也称为父类）, 它提供了许多方法和属性，是所有 React 组件的基础。组件可以扩展这个类并实现必需的方法以创建自己的组件。

render()

此方法必需。它返回一个描述组件渲染结果的 React 元素。

class MyComponent extends React.Component {
  render() {
    return <div>Hello, world!</div>;
  }
}

setState()

此方法更新组件的 state，并安排重新渲染。它接受一个对象或函数作为参数。如果传递的是函数，函数将接受前一个 state 作为第一个参数，此函数必须返回一个包含更新状态的对象。

this.setState({counter: this.state.counter + 1});

this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));

Props

组件的 props 是父组件传递到子组件的属性对象。它是只读的，因此组件无法更改它们。父组件负责定义这些 props 并将它们传递给子组件。

在子组件内部，可以通过 this.props 访问它们。

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

const element = <Greeting name="World" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

生命周期方法

在组件的生命周期中，React 可以调用不同的方法，具体取决于何时和如何更新组件。下面是一些重要的生命周期方法：

componentDidMount()

在组件挂载后被调用。可以使用这个方法设置计时器、启动网络请求等。

componentDidMount() {
  this.timerID = setInterval(
    () => this.tick(),
    1000
  );
}

componentDidUpdate(prevProps, prevState, snapshot)

在组件更新后被调用。可以在此方法中进行一些更新之后的操作。

componentDidUpdate(prevProps, prevState, snapshot) {
  if (prevProps.user !== this.props.user) {
    // do something
  }
}

componentWillUnmount()

当组件将要被卸载时被调用。可以使用此方法清除计时器、取消网络请求等。

componentWillUnmount() {
  clearInterval(this.timerID);
}

总结

React 组件 API 是构建 React 应用程序的核心。组件可以通过继承 React.Component 类来定义自己的 API。生命周期方法可以在应用程序的不同阶段执行操作，从而为开发人员提供更多的控制权。props 可以让父组件很容易地将数据传递到子组件。通过使用这些 API，开发人员可以创建高度可复用的组件并构建规模化的 React 应用程序。