React

组件

创建

Hook

Class

create-react-class

挂载  Mounting

更新  Updating

卸载  Unmounting

错误处理  ErrorHandling

属性

State

Props

Context

元素

Refs

Refs 转发

Portals

渲染

客户端渲染

服务端渲染

异常

类型检查

安全检查  (严格模式)

性能

Profiler

代码分割

其它

Suspense

Offscreen

工具

工具集

React.createClass()

createReactClass()

Fragments

使用 ES6 classes 方式定义 React 组件的基类

React.Component

与 React.Component 很相似。两者的区别在于 React.Component 并未实现 shouldComponentUpdate()，而 React.PureComponent 中以浅层对比 prop 和 state 的方式来实现了该函数。

React.PureComponent

如果你的组件在相同 props 的情况下渲染相同的结果，那么你可以通过将其包装在 React.memo 中调用，以此通过记忆组件渲染结果的方式来提高组件的性能表现。这意味着在这种情况下，React 将跳过渲染组件的操作并直接复用最近一次渲染的结果。

React.memo()

高阶组件。可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

Hook Component

把“创建”函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算。

useMemo() 

提供一个单独的 getInitialState 方法，让其返回初始 state。

getInitialState()

getDefaultProps()

在 React 组件挂载之前，会调用它的构造函数。

constructor()

为 Class 组件添加默认 props。这一般用于 props 未赋值，但又不能为 null 的情况。

static defaultProps

返回一个 state，以及更新 state 的函数。
在初始渲染期间，返回的状态 (state) 与传入的第一个参数 (initialState) 值相同。
setState 函数用于更新 state。它接收一个新的 state 值并将组件的一次重新渲染加入队列。

useState()

在挂载之前被调用。它在 render() 之前调用，因此在此方法中同步调用 setState() 不会触发额外渲染。通常，我们建议使用 constructor() 来初始化 state。

componentWillMount()

组件渲染函数，唯一的必须的定义的函数。

render()

在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据，此处是实例化请求的好地方。

这个方法是比较适合添加订阅的地方。如果添加了订阅，请不要忘记在 componentWillUnmount() 里取消订阅。

componentDidMount()

在挂载之前被调用。它在 render() 之前调用，因此在此方法中同步调用 setState() 不会触发额外渲染。通常，我们建议使用 constructor() 来初始化 state。
此方法是服务端渲染唯一会调用的生命周期函数。

UNSAFE_componentWillMount()

为组件添加默认 props。这一般用于 props 未赋值，但又不能为 null 的情况。

.defaultProps

该 Hook 接收一个包含命令式、且可能有副作用代码的函数。
默认情况下，effect 将在每轮渲染结束后执行，但你可以选择让它 在只有某些值改变的时候 才执行。

useEffect()

其函数签名与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect。可以使用它来读取 DOM 布局并同步触发重渲染。在浏览器执行绘制之前，useLayoutEffect 内部的更新计划将被同步刷新。

尽可能使用标准的 useEffect 以避免阻塞视觉更新。

useLayoutEffect()

在已挂载的组件接收新的 props 之前被调用。如果你需要更新状态以响应 prop 更改（例如，重置它），你可以比较 this.props 和 nextProps 并在此方法中使用 this.setState() 执行 state 转换。

componentWillReceiveProps()

根据 shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染。大部分情况下，你应该遵循默认行为。

当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。返回值默认为 true。首次渲染或使用 forceUpdate() 时不会调用该方法。

shouldComponentUpdate()

当组件收到新的 props 或 state 时，会在渲染之前调用。使用此作为在更新发生之前执行准备更新的机会。初始渲染不会调用此方法。

componentWillUpdate()

会在更新后会被立即调用。首次渲染不会执行此方法。
当组件更新后，可以在此处对 DOM 进行操作。如果你对更新前后的 props 进行了比较，也可以选择在此处进行网络请求。

componentDidUpdate()

UNSAFE_componentWillReceiveProps()

在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容。

static getDerivedStateFromProps()

根据 shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染。大部分情况下，你应该遵循默认行为。 当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。返回值默认为 true。首次渲染或使用 forceUpdate() 时不会调用该方法。

当组件收到新的 props 或 state 时，会在渲染之前调用。
使用此作为在更新发生之前执行准备更新的机会。初始渲染不会调用此方法。

UNSAFE_componentWillUpdate()

在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期方法的任何返回值将作为参数传递给 componentDidUpdate()。

getSnapshotBeforeUpdate()

在组件卸载及销毁之前直接调用。

componentWillUnmount()

在后代组件抛出错误后被调用。 它将抛出的错误作为参数，并返回一个值以更新 state。

static getDerivedStateFromError()

在后代组件抛出错误后被调用。 会在“提交”阶段被调用，因此允许执行副作用。 它应该用于记录错误之类的情况。

componentDidCatch()

 create-react-class

组件中的 state 包含了随时可能发生变化的数据。state 由用户自定义，它是一个普通 JavaScript 对象。

微课侠

JavaScript 框架及 API