生命周期
react的生命周期分为四个阶段:初始化阶段,更新阶段,销毁阶段,错误处理阶段(错误处理是16.3新出的) UNSFE为过时的版本
初始化阶段
- constructor
- static getDerivedStateFromProps//新版本才有的
- componentWillMount( ) / UNSAFE_componentWillMount()//未来淘汰版本
- render ()
- componentDidmount ()
更新阶段
- componentWillReceiveProps / UNSAFE_componentWillReceiveProps ()
- static getDerivedStateFromprops ()
- shouldComponentUpdate ()
- componentWillUpdeta () / UNSAFE_componentWillUpdate ()
- render()
- getSnapshotBeforeUpdate ()
- componentDidUpdate ()
销毁阶段
- componentWillUnmount ()
错误处理
+componentDidCatch ()
初始阶段详细
constructor//自动执行,一开始就会执行
React组件的构造函数在挂载之前被调用。在实现React.Component
构造函数时,需要先在添加其他内容前,调用super(props)
,用来将父组件传来的props
绑定到这个类中,使用this.props
将会得到。
官方建议不要在constructor
引入任何具有副作用和订阅功能的代码,这些应当使用componentDidMount()
。也就是不要在这里声明或者执行事件
constructor
中应当做些初始化的动作,如:初始化state
,将事件处理函数绑定到类实例上,但也不要使用setState()
。如果没有必要初始化state或绑定方法,则不需要构造constructor
,或者把这个组件换成纯函数写法。
当然也可以利用props
初始化state
,在之后修改state
不会对props
造成任何修改,但仍然建议大家提升状态到父组件中,或使用redux
统一进行状态管理。
constructor(props) {
super(props);//不需要可以不写
this.state = {
isLiked: props.isLiked
};
}
static getDerivedStateFromProps( nextprops )//自动执行,必须有返回值,输出参数为新值
getDerivedStateFromProps
是react16.3之后新增,在组件实例化后,和接受新的props
后被调用。他必须返回一个对象来更新状态,或者返回null表示新的props不需要任何state的更新。使用了这个钩子就不能使用 getDerivedStateFromProps ()
如果是由于父组件的props
更改,所带来的重新渲染,也会触发此方法。
调用steState()
不会触发getDerivedStateFromProps()
。
之前这里都是使用constructor
+componentWillRecieveProps
完成相同的功能的
componentWillMount()//render()前调用,可以直接同步修改state,自动执行,即将挂载组件
componentWillMount()
将在React未来版本(官方说法 17.0)中被弃用。UNSAFE_componentWillMount()
在组件挂载前被调用,在这个方法中调用setState()
不会起作用,是由于他在render()
前被调用。
为了避免副作用和其他的订阅,官方都建议使用componentDidMount()
代替。这个方法是用于在服务器渲染上的唯一方法。这个方法因为是在渲染之前被调用,也是惟一一个可以直接同步修改state的地方。
render()//直接执行,必须要有的,一般返回html代码
render()方法是必需的。当他被调用时,他将计算this.props
和this.state
,并返回以下一种类型:
- React元素。通过jsx创建,既可以是dom元素,也可以是用户自定义的组件。
- 字符串或数字。他们将会以文本节点形式渲染到dom中。
- Portals。react 16版本中提出的新的解决方案,可以使组件脱离父组件层级直接挂载在DOM树的任何位置。
4. null,什么也不渲染 - 布尔值。也是什么都不渲染。
当返回null
,false
,ReactDOM.findDOMNode(this)
将会返回null,什么都不会渲染。
render()
方法必须是一个纯函数,他不应该改变state
,也不能直接和浏览器进行交互,应该将事件放在其他生命周期函数中。
如果shouldComponentUpdate()
返回false
,render()
不会被调用。
componentDidMount()//直接执行,可以在这里进行ajax’请求,第三方实例化,拿到真实dom,写死的数据可以直接写在这里,如果是获取到的会变的数据,则需要使用定时器,不要的话函数一直在触发,会导致更新不了视图,需要在dom元素更新完之后执行
componentDidMount
在组件被装配后立即调用。初始化使得DOM节点应该进行到这里。
通常在这里进行ajax请求
如果要初始化第三方的dom库,也在这里进行初始化。只有到这里才能获取到真实的dom.
更新阶段
componentWillReceiveProps () / UNSAFE_componentWillReceiveProps(nextProps)//改变state或者props时触发
官方建议使用getDerivedStateFromProps
函数代替componentWillReceiveProps
。当组件挂载后,接收到新的props
后会被调用。如果需要更新state
来响应props
的更改,则可以进行this.props
和nextProps
的比较,并在此方法中使用this.setState()
。
如果父组件会让这个组件重新渲染,即使props
没有改变,也会调用这个方法。
React不会在组件初始化props时调用这个方法。调用this.setState
也不会触发。
shuouldComponentUpdate ( nextprops,nextstate )//参数为新的状态和属性,如果返回值为false,状态改变,视图不更新,数据改变时触发,性能优化的方法之一
调用shouldComponentUpdate
使React知道,组件的输出是否受state
和props
的影响。默认每个状态的更改都会重新渲染,大多数情况下应该保持这个默认行为。
在渲染新的props
或state
前,shouldComponentUpdate
会被调用。默认为true
。这个方法不会在初始化时被调用,也不会在forceUpdate()
时被调用。返回false
不会阻止子组件在state
更改时重新渲染。
如果shouldComponentUpdate()
返回false
,componentWillUpdate
,render
和componentDidUpdate
不会被调用。
官方并不建议在
shouldComponentUpdate()
中进行深度查询或使用JSON.stringify()
,他效率非常低,并且损伤性能。
UNSAFE_componentWillUpdate( nextprops,nextstate )//渲染新的数据时调用
在渲染新的state
或props
时,UNSAFE_componentWillUpdate
会被调用,将此作为在更新发生之前进行准备的机会。这个方法不会在初始化时被调用。
在这里改变数据会导致死循环,这个函数没有太大的实际作用
不能在这里使用this.setState(),也不能做会触发视图更新的操作。如果需要更新state
或props
,调用getDerivedStateFromProps
。
getsnapshotBeforeUpdate()//新的数据渲染前调用,可以记录scroll滚动条
在react render()
后的输出被渲染到DOM之前被调用。它使您的组件能够在它们被潜在更改之前捕获当前值(如滚动位置)。这个生命周期返回的任何值都将作为参数传递给componentDidUpdate()。
componentDidUpdate( prevprops,prevstate,snapshot )//第三个参数来自getSnapshopBeforeUpdate()函数的返回值
在更新发生后立即调用componentDidUpdate()
。此方法不用于初始渲染。当组件更新时,将此作为一个机会来操作DOM。只要您将当前的props与以前的props进行比较(例如,如果props没有改变,则可能不需要网络请求),这也是做网络请求的好地方。
如果组件实现getSnapshotBeforeUpdate()
生命周期,则它返回的值将作为第三个“快照”参数传递给componentDidUpdate()
。否则,这个参数是undefined
。
销毁阶段
componentWillUnmount ()//连dom结构都会清除掉
在组件被卸载并销毁之前立即被调用。在此方法中执行任何必要的清理,例如使定时器无效,取消网络请求或清理在componentDidMount
中创建的任何监听。
componentDidCatch(err,info)
出错时页面不会崩溃,但是会在控制台输出错误
错误边界是React组件,可以在其子组件树中的任何位置捕获JavaScript错误,记录这些错误并显示回退UI,而不是崩溃的组件树。错误边界在渲染期间,生命周期方法以及整个树下的构造函数中捕获错误。
如果类组件定义了此生命周期方法,则它将成错误边界。在它中调用setState()
可以让你在下面的树中捕获未处理的JavaScript错误,并显示一个后备UI。只能使用错误边界从意外异常中恢复; 不要试图将它们用于控制流程。
错误边界只会捕获树中下面组件中的错误。错误边界本身不能捕获错误。
import React from 'react'
class Error extends React.Component {
constructor(props) {
super(props);
this.state = { error: false };//定义一个错误值
}
componentDidCatch(error, info) {//错误处理函数,当错误值发生改变是触发
console.log('错误处理-componentDidCatch')
this.setState({ error, info });
}
errorHandle = () => {//改变错误值
this.setState({
error: true
})
}
render() {
if (this.state.error) {
return (
<div>
<p> 报错了 </p>
{
console.log(new Error("YOLO"))
}
</div>
)
}
return (
<div>
<button onClick = { this.errorHandle }>//改变错误值
抛出错误
</button>
</div>
);
}
}
export default Error