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