初次加载时生命周期执行顺序
初次加载时生命周期执行顺序
更新时生命周期顺序
更新时生命周期顺序
render()
render() 方法是 class 组件中唯一必须实现的方法。
render的概念
constructor()
如果不初始化 state 或不进行方法绑定，则不需要为 React 组件实现构造函数
通常，在 React 中，构造函数仅用于以下两种情况：
1.通过给 this.state 赋值对象来初始化内部 state。
2.为事件处理函数绑定实例
使用的地方
只能在构造函数中直接为 this.state 赋值。如需在其他方法中赋值，你应使用 this.setState() 替代
componentDidMount()---常用的
通常会在组件挂载后（插入 DOM 树中）立即调用。依赖于 DOM 节点的初始化应该放在这里。如需通过网络请求获取数据，此处是实例化请求的好地方
这个方法是比较适合添加订阅的地方。如果添加了订阅，请不要忘记在 componentWillUnmount() 里取消订阅
componentDidUpdate(prevProps,prevState,snapshot)---常用的
通常会在更新后会被立即调用。首次渲染不会执行此方法
调用方法
注意事项
componentWillUnmount()---常用的
通常会在组件卸载及销毁之前直接调用。在此方法中执行必要的清理操作，例如，清除 timer，取消网络请求或清除在 componentDidMount() 中创建的订阅等。
componentWillUnmount() 中不应调用 setState()，因为该组件将永远不会重新渲染。组件实例卸载后，将永远不会再挂载它
shouldComponentUpdate(nextProps, nextState)---不常用的
根据 shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。默认行为是 state 每次发生变化组件都会重新渲染。大部分情况下，你应该遵循默认行为
当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。返回值默认为 true。首次渲染或使用 forceUpdate() 时不会调用该方法
staticgetDerivedStateFromProps(props,state)---常用的
通常会在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。它应返回一个对象来更新 state，如果返回 null 则不更新任何内容
getSnapshotBeforeUpdate(prevProps,prevState)---常用的
getSnapshotBeforeUpdate() 在最近一次渲染输出（提交到 DOM 节点）之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()
此用法并不常见，但它可能出现在 UI 处理中，如需要以特殊方式处理滚动位置的聊天线程等，应返回 snapshot 的值（或 null）
getSnapshotBeforeUpdate示例
Error boundaries
仅捕获组件树中以下组件中的错误。但它本身的错误无法捕获
componentDidCatch(error, info)
此生命周期在后代组件抛出错误后被调用。 它接收两个参数：
1.error —— 抛出的错误。
2.info —— 带有 componentStack key 的对象，其中包含有关组件引发错误的栈信息
其他 API
setState(updater[, callback])
setState() 将对组件 state 的更改排入队列，并通知 React 需要使用更新后的 state 重新渲染此组件及其子组件。这是用于更新用户界面以响应事件处理器和处理服务器数据的主要方式
将 setState() 视为请求而不是立即更新组件的命令。为了更好的感知性能，React 会延迟调用它，然后通过一次传递更新多个组件。React 并不会保证 state 的变更会立即生效
实例属性
props
this.props 包括被该组件调用者定义的 props。欲了解 props 的详细介绍，请参阅组件 & Props
需特别注意，this.props.children 是一个特殊的 prop，通常由 JSX 表达式中的子组件组成，而非组件本身定义
state
永远不要直接改变 this.state，因为后续调用的 setState() 可能会替换掉你的改变。请把 this.state 看作是不可变的
组件中的 state 包含了随时可能发生变化的数据。state 由用户自定义，它是一个普通 JavaScript 对象
网友评论