202-React.Component组件、生命周期

一、概述

　　React可以将组件定义为类或函数。定义为类的组件当前提供了更多的功能。要定义React组件类，您需要扩展React.Component：

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

　　必须在React.Component子类中定义的唯一方法称为render（）。描述的所有其他方法都是可选的。

　　强烈建议不要创建您自己的基础组件类。在React组件中，代码重用主要是通过组合而不是继承来实现的。

二、组件的生命周期

　　每个组件都有几个“生命周期方法”，您可以重写以在该进程中的特定时间运行代码。您可以使用此生命周期图作为备忘单。在下面的列表中，常用的生命周期方法标记为粗体。其余的存在于相对罕见的用例中。

2.1、创建【Mount】

2.2、更新

2.3、卸载【Unmounting】

componentWillUnmount()

三、其他API

Each component also provides some other APIs:

Class Properties

Instance Properties

props
state

四、详细介绍

4.1、render【渲染】

　　render（）方法是类组件中唯一需要的方法。调用时，它应该检查this.props和this.state并返回以下类型之一：React elements.Arrays and fragments. Portals. String and numbers. Booleans or null.

注意：如果shouldComponentUpdate（）返回false，则不会调用render（）。

4.2、constructor【构造方法】

　　如果您没有初始化状态并且没有绑定方法，则不需要为您的React组件实现构造函数。

　　通常，React构造函数只用于两个目的：通过将对象分配给this.state来初始化本地状态。将事件处理程序方法绑定到实例。

constructor(props) {
  super(props);
  // Don't call this.setState() here!
  this.state = { counter: 0 };
  this.handleClick = this.handleClick.bind(this);
}

构造函数是你应该直接分配this.state的唯一地方。在所有其他方法中，您需要使用this.setState（）。

　　避免在构造函数中引入任何副作用或订阅。对于这些用例，请改用componentDidMount（）

以下是错误的

constructor(props) {
 super(props);
 // Don't do this!
 this.state = { color: props.color };
}

4.3、componentDidMount

　　 componentDidMount（）在装载组件（插入树中）后立即调用。需要DOM节点的初始化应该放在这里。如果您需要从远程端点加载数据，则这是一个实例化网络请求的好地方。

　　此方法是设置任何订阅的好地方。如果你这样做，不要忘记在componentWillUnmount（）中取消订阅。

　　您可以立即在componentDidMount（）中调用setState（）。它会触发一个额外的渲染，但它会在浏览器更新屏幕之前发生。这保证即使render（）在这种情况下被调用两次，用户也不会看到中间状态。请谨慎使用此模式，因为它经常会导致性能问题。在大多数情况下，您应该能够在构造函数（）中分配初始状态。然而，当你需要在渲染依赖于它的大小或位置的东西之前测量DOM节点时，它可能需要类似于模态和工具提示的情况。

4.4、componentDidUpdate(prevProps, prevState, snapshot)

　　在更新发生后立即调用componentDidUpdate（）。此方法不用于初始渲染。

　　在更新组件时，将此用作在DOM上操作的机会。只要您将当前的道具与以前的道具进行比较（例如，如果道具没有改变，则可能不需要网络请求），这也是做网络请求的好地方。

componentDidUpdate(prevProps) {
  // Typical usage (don't forget to compare props):
  if (this.props.userID !== prevProps.userID) {
    this.fetchData(this.props.userID);
  }
}

　　您可以在componentDidUpdate（）中立即调用setState（），但请注意它必须像上例那样包装，否则会导致无限循环。它也会导致额外的重新渲染，虽然用户不可见，但会影响组件的性能。

　　如果您的组件实现getSnapshotBeforeUpdate（）生命周期（很少见），则它返回的值将作为第三个“快照”参数传递给componentDidUpdate（）。否则这个参数将是未定义的。

　　注意：如果shouldComponentUpdate（）返回false，则不会调用componentDidUpdate（）。

4.5、componentWillUnmount

　　componentWillUnmount（）在组件被卸载并销毁之前立即被调用。在此方法中执行任何必要的清理，例如使定时器无效，取消网络请求或清理在componentDidMount（）中创建的任何预订。

　　您不应该在componentWillUnmount（）中调用setState（），因为组件不会被重新渲染。一旦组件实例被卸载，它将永远不会再被挂载。

4.6、很少使用的生命周期方法

　　https://reactjs.org/docs/react-component.html#rarely-used-lifecycle-methods

五、其他API

　　与上面的生命周期方法（React为您调用）不同，下面的方法是您可以从组件调用的方法。

　　其中只有两个：setState（）和forceUpdate（）。

5.1、setState(updater[, callback])

　　setState（）将对组件状态的更改排队，并告诉React该组件及其子组需要使用更新的状态重新呈现。这是您用来更新用户界面以响应事件处理程序和服务器响应的主要方法。

　　setState（）并不总是立即更新组件。它可能会批处理或推迟更新，直到稍后。

　　第一个参数是带签名的更新函数：

(prevState, props) => stateChange

　　prevState是对之前状态的引用。它不应该直接变异。相反，应该通过建立一个基于prevState和道具输入的新对象来表示更改。例如，假设我们想通过props.step来增加状态值：

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

　　setState（）的第二个参数是一个可选的回调函数，一旦setState完成并且组件被重新渲染，该函数将被执行。通常我们建议使用componentDidUpdate（）代替这种逻辑。

5.2、component.forceUpdate(callback)

　　默认情况下，当你的组件的状态或道具改变时，你的组件将重新渲染。如果你的render（）方法依赖于其他的数据，你可以通过调用forceUpdate（）来告诉React组件需要重新渲染。

　　调用forceUpdate（）将导致在组件上调用render（），跳过shouldComponentUpdate（）。这将触发子组件的正常生命周期方法，包括每个子组件的shouldComponentUpdate（）方法。如果标记更改，React仍然只会更新DOM。

　　通常你应该尽量避免使用forceUpdate（），只能从render.props和this.state中读取render（）。

六、类属性

6.1、默认属性

class CustomButton extends React.Component {
  // ...
}

CustomButton.defaultProps = {
  color: 'blue'
};

6.2、displayName

　　字符串用于调试消息。通常，您不需要明确设置它，因为它是根据定义组件的函数或类的名称推断出来的。如果要为调试目的显示不同的名称或创建高阶组件时，可能需要显式设置它，

七、实例属性

7.1、`props`

不能被修改

7.2、state

　　状态包含特定于此组件的数据，这些数据可能随时间而改变。状态是用户定义的，它应该是一个普通的JavaScript对象。

尽快