React 学习笔记

React 学习笔记

React 是一个用于构建用户界面的 JAVASCRIPT 库，主要用于构建UI，拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

挂载

当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：

constructor()

在 React 组件挂载之前，会调用它的构造函数。如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数。在为 React.Component 子类实现构造函数时，应在其他语句之前前调用 super(props)。否则，this.props 在构造函数中可能会出现未定义的 bug。

通常，在 React 中，构造函数仅用于以下两种情况：

通过给 this.state 赋值对象来初始化内部 state。
为事件处理函数绑定实例

static getDerivedStateFromProps()

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

render()

render() 方法是 class 组件中唯一必须实现的方法，应该为纯函数。每次调用时都返回相同的结果，并且它不会直接与浏览器交互。如果 shouldComponentUpdate() 返回 false，则不会调用 render()。
当 render 被调用时，它会检查 this.props 和 this.state 的变化并返回以下类型之一：

React 元素。
数组或 fragments。
Portals。
字符串或数值类型。
布尔类型或 null。

componentDidMount()

在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。如通过网络请求获取数据、添加订阅等。

更新

当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：

static getDerivedStateFromProps()

同上

shouldComponentUpdate()

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

render()

同上

getSnapshotBeforeUpdate()

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

componentDidUpdate()

首次渲染不会执行此方法，会在更新后会被立即调用。若shouldComponentUpdate() 返回值为 false，则不会调用 componentDidUpdate()。
当组件更新后，可以在此处对 DOM 进行操作。
如对更新前后的 props 进行了比较，进行网络请求。

卸载

当组件从 DOM 中移除时会调用如下方法：

componentWillUnmount()

在组件卸载及销毁之前直接调用，该组件将永远不会重新渲染。组件实例卸载后，将永远不会再挂载它。
在此方法中执行必要的清理操作，如清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等。

错误处理

当渲染过程，生命周期，或子组件的构造函数中抛出错误时，会调用如下方法：

static getDerivedStateFromError()

此生命周期会在后代组件抛出错误后被调用。 它将抛出的错误作为参数，并返回一个值以更新 state，会在渲染阶段调用，因此不允许出现副作用。

componentDidCatch()

此生命周期在后代组件抛出错误后被调用，会在“提交”阶段被调用，因此允许执行副作用。

接收两个参数：

error ：抛出的错误。
info ：带有 componentStack key 的对象，其中包含有关组件引发错误的栈信息。

其他 APIs

组件还提供了一些额外的 API：

setState()
forceUpdate()

class 属性

defaultProps
displayName

实例属性

props
state

生命周期图谱：