Reactv16.8.6生命周期函数
组件生命周期函数
React 主动调用的方法,也可重写这些方法
当组件实例被创建并插入 DOM
中时,其生命周期调用顺序如下:
constructor(props)
如果不需要初始化 state 或 不进行方法绑定,则不需要使用该方法
在组件挂载之前会先调用该方法,在实现构造函数时必须先调用super(props)
方法,否则会出现BUG 通常,构造函数仅用于两种情况:1. 初始化 state
2. 为事件处理函数绑定实例 在该方法中不要使用 setState()
方法,在其他方法中使用setState()
改变 state 为什么 props 复制给 state 会产生 bug
constructor(props) { super(props); // 不要在这里调用 this.setState() this.state = { counter: 0, name:props.name // 严禁这样赋值,props.name值更新时 state.name并不会更新 }; this.handleClick = this.handleClick.bind(this); }
static getDerivedStateFromProps() (此方法不常用)
此方法会在
render
方法之前调用,并且初始化和数据更新时都会调用,它返回一个对象更新 state,如果返回null 则不更新任何内容。
此方法适用于 state 值在任何时候都取决于props 的情况。
render()
render 是 class 组件必须实现的方法
当该方法被调用时,它会监测 props 和 state 的变化,并且返回以下类型之一:
React 元素
:通过JSX创建,渲染成对应的DOM节点或自定义组件- 数组或fragments: 使render方法可以返回多个元素 frgments
Portals
:可以渲染子节点到不同的DOM子树汇中portals- 字符串或数值类型: 在DOM中会被渲染为文本节点、
Boolean 或 null
:什么都不渲染
render方法最好为纯函数,即在不修改组件 state
情况下,每次调用时都返回相同的结果,并且不会直接与浏览器交互
如果要和浏览器交互,可以在其他生命周期函数中执行,注意:
shoouldComponentUpdate
方法中返回false,将不会调用render方法
class Example extemds React.Component{ shouldComponentUpdate(nextProps, nextState){ return false } render(){ // 不会执行 <div>owen</div> } }
componentDIdMount()
此方法会在组件挂载后(插入DOM树中)调用,初始化的数据的好地方
组件的 props
或 state
发生变化会触发更新。组件更新的生命周期调用顺序如下:
static getDerivedStateFromProps() (此方法不常用)(已解释)
shouldComponentUpdate(nextProps, nextState) (此方法不常用)
当state 或 props 变化时该方法会在渲染执行前调用默认返回值为true,首次加载不会被调用
根据该方法的返回值判断组件输出是否受当前 state 或 props 更改的影响。默认为 state 每次更新重新渲染
此方法进仅做为性能优化的方式存在,不要企图依靠此方法来“阻止”渲染,因为这可能会产生 bug。你应该考虑使用内置的 PureComponent 组件,而不是手动编写 shouldComponentUpdate()。PureComponent 会对 props 和 state 进行浅层比较,并减少了跳过必要更新的可能性。
render()(已解释)
getSnapshotBeforeUpdate() (此方法不常用)
此方法在最近一次渲染输出(提交到DOM节点)之前调用。使组件能在发送更改前从DOM中捕获一些信息(如 位置)。此生命周期的返回值将作为参数传递给
componentDidUpdate()
class ScrollingList extends React.Component { constructor(props) { super(props); this.listRef = React.createRef(); } getSnapshotBeforeUpdate(prevProps, prevState) { // 我们是否在 list 中添加新的 items ? // 捕获滚动位置以便我们稍后调整滚动位置。 if (prevProps.list.length < this.props.list.length) { const list = this.listRef.current; return list.scrollHeight - list.scrollTop; } return null; } componentDidUpdate(prevProps, prevState, snapshot) { // 如果我们 snapshot 有值,说明我们刚刚添加了新的 items, // 调整滚动位置使得这些新 items 不会将旧的 items 推出视图。 //(这里的 snapshot 是 getSnapshotBeforeUpdate 的返回值) if (snapshot !== null) { const list = this.listRef.current; list.scrollTop = list.scrollHeight - snapshot; } } render() { return ( <div ref={this.listRef}>{/* ...contents... */}</div> ); } }
上述示例中,重点是从 getSnapshotBeforeUpdate 读取 scrollHeight 属性,因为 “render” 阶段生命周期(如 render)和 “commit” 阶段生命周期(如 getSnapshotBeforeUpdate 和 componentDidUpdate)之间可能存在延迟。
componentDidUpdate(prevProps, prevState, snapshot)
此方法会在数据更新后立即调用,首次加载不会被调用,在此方法中使用
setState
必须将它放到条件语句中,否则会导致死循环。还会导致额外的重新渲染,影响性能
componentDidUpdate(prevProps) { // 典型用法(不要忘记比较 props): if (this.props.userID !== prevProps.userID) { this.fetchData(this.props.userID); } }
注意:如果 shouldComponentUpdate() 返回值为 false,则不会调用 componentDidUpdate()。
当组件从 DOM
中移除时会调用如下方法:
componentWillUnmount()
此方法会在组件卸载销毁前调用,可以执行必要的清理操作,如 定时器,取消网络请求,或清除componentDidMount() 中创建的订阅等。
当渲染过程,生命周期,或子组件的构造函数中抛出错误时,会调用如下方法:
Error boundaries:捕获渲染期间及整个树的函数发送的错误,渲染降级 UI,但自身的错误无法捕获 React 16中的错误处理
static getDerivedStateFromError(error) (此方法不常用)
次生命周期会在后代组件抛出错误后调用,将错误作为参数,返回一个值更新state,在渲染期间不允许出现副作用,建议使用 componentDidCatch()
componentDidCatch(error, info) (此方法不常用)
此方法在后代组件抛出错误后被调用
如果发生错误,可以通过调用 setState
使用 componentDidCatch()
渲染降级 UI,但在未来的版本中将不推荐这样做。 可以使用静态 getDerivedStateFromError()
来处理降级渲染。
class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false }; } static getDerivedStateFromError(error) { // 更新 state 使下一次渲染可以显降级 UI return { hasError: true }; } componentDidCatch(error, info) { // "组件堆栈" 例子: // in ComponentThatThrows (created by App) // in ErrorBoundary (created by App) // in div (created by App) // in App logComponentStackToMyService(info.componentStack); } render() { if (this.state.hasError) { // 你可以渲染任何自定义的降级 UI return <h1>Something went wrong.</h1>; } return this.props.children; } }
Example
class Square extends React.Component { constructor(props) { super(props); this.state = { value:null }; } static getDerivedStateFromProps(props, state) { // 实例化组件之后以及在重新呈现组件之前调用新的静态生命周期。它可以返回要更新的对象state,或null指示新对象props不需要任何state更新。 } componentDidMount() { // 组件被渲染到 DOM 中后运行 console.log('DidMount: 1') } shouldComponentUpdate(){ // 更新前 } getSnapshotBeforeUpdate(){ // } componentDidUpdate() { // 更新后 } static getDerivedStateFromError() { // 出错时 } componentDidCatch(){ // capture error } compoentwillUnmount(){ // 组件被删除的时候 console.log('UnMount: end') } render() { return ( <button className="square" onClick = {()=>{this.setState({value:'X'})} }> {this.state.value} </button> ); } }
参考资料:React官网
原文出处:https://www.cnblogs.com/gaoguowen/p/11279629.html
- Reactv16.8.6生命周期函数
- vue、react生命周期函数
- 【Vue】零基础学习Vue: 第21课 Vue父子组件生命周期函数的执行顺序:
- android手机屏幕横竖屏切换禁止调用生命周期函数方法
- fragment的生命周期函数介绍
- 【React自制全家桶】五、React组件的生命周期函数详解
- vue生命周期中,钩子函数执行顺序
- UIApplication生命周期以及如何简单测试每个函数何时被调用?
- C++ 静态变量及函数的生命周期
- Android中切换屏幕方向时Activity生命周期函数执行情况分析
- Unity脚本生命周期, Unity脚本函数执行流程与顺序
- 使用NSStringFromSelector(_cmd), self) 函数 来跟踪对象的生命周期
- vue实例--创建函数--生命周期函数详解
- JNI 对象在函数调用中的生命周期
- Vue实例的生命周期钩子函数
- 微信小程序 生命周期函数详解
- vue的生命周期函数
- 控制器View的生命周期及相关函数是什么?你在开发中是如何用的?
- 控制器View的生命周期及相关函数使用
- vue知识点(一)—— 生命周期和钩子函数