初始化
constructor
static getDerivedStateFromProps()
componentWillMount() / UNSAFE_componentWillMount()
render()
componentDidMount()
更新props
或state
的改变可能会引起组件的更新,组件重新渲染的过程中会调用以下方法:
componentWillReceiveProps() / UNSAFE_componentWillReceiveProps()
static getDerivedStateFromProps()
shouldComponentUpdate()
componentWillUpdate() / UNSAFE_componentWillUpdate()
render()
getSnapshotBeforeUpdate()
componentDidUpdate()
销毁
componentWillUnmount()
错误处理
componentDidCatch()
(1)constructor
React组件的构造函数在挂在之前被调用。
调用super(props)
,用来将父组件传来的props
绑定到这个类中,使用this.props
将会得到。
constructor
中应当做些初始化的动作,如:初始化state
,将事件处理函数绑定到类实例上,但也不要使用setState()
。
使用场景:
初始化state数据
定义函数修改this指向
constructor(props) {
super(props);
this.state = {
isLiked: props.isLiked
};
this.handleFun=this.handleFun.bind(this)
}
(2)static getDerivedStateFromProps(nextProps, prevState)
React 16.3 的版本中 getDerivedStateFromProps 的触发范围是和 16.4^ 是不同的,主要区别是在 setState
和 forceUpdate
时会不会触发,具体可以看这个生命全周期图 。
使用场景:
Class ColorPicker extends React.Component {
state = {
color: '#000000'
}
static getDerivedStateFromProps (props, state) {
if (props.color !== state.color) {
return {
color: props.color
}
}
return null
}
... // 选择颜色方法
render () {
.... // 显示颜色和选择颜色操作
}
}
纯在问题:
现在我们可以这个颜色选择器来选择颜色,同时我们能传入一个颜色值并显示。如果我们传入一个颜色值后,再使用组件内部的选择颜色方法,我们会发现颜色不会变化,一直是传入的颜色值。
这是使用这个生命周期的一个常见 bug。为什么会发生这个 bug 呢?在开头有说到,在 React 16.4^ 的版本中 setState
和 forceUpdate
也会触发这个生命周期,所以内部 state 变化后,又会走 getDerivedStateFromProps 方法,并把 state 值更新为传入的 prop。
Class ColorPicker extends React.Component {
state = {
color: '#000000',
prevPropColor: ''
}
static getDerivedStateFromProps (props, state) {
if (props.color !== state.prevPropColor) {
return {
color: props.color
prevPropColor: props.color
}
}
return null
}
... // 选择颜色方法
render () {
.... // 显示颜色和选择颜色操作
}
}
注意点:
(3) componentWillMount() / UNSAFE_componentWillMount()
componentWillMount()
将在React未来版本(官方说法 17.0)中被弃用。UNSAFE_componentWillMount()
在组件挂载前被调用,在这个方法中调用setState()
不会起作用,是由于他在render()
前被调用。(4)render()
当他被调用时,他将计算this.props
和this.state
,并返回以下一种类型:
注意:返回null,false,ReactDOM.findDOMNode(this)将会返回null,什么都不会渲染render()
方法必须是一个纯函数,他不应该改变state
,也不能直接和浏览器进行交互,应该将事件放在其他生命周期函数中。
如果shouldComponentUpdate()
返回false
,render()
不会被调用。
(5)componentDidMount
组件被装配后立即调用。
应用场景:
(6)componentWillReceiveProps()/UNSAFE_componentWillReceiveProps(nextProps)
建议使用getDerivedStateFromProps
函数代替
props
后会被调用state
来响应props
的更改,则可以进行this.props
和nextProps
的比较,并在此方法中使用this.setState()
。props
没有改变,也会调用这个方法。this.setState
也不会触发。(7) shouldComponentUpdate(nextProps, nextState)
props
或state
前,shouldComponentUpdate
会被调用默认为true
。forceUpdate()
时被调用。返回false
不会阻止子组件在state
更改时重新渲染。shouldComponentUpdate()
返回false
,componentWillUpdate
,render
和componentDidUpdate
不会被调用。shouldComponentUpdate()
中进行深度查询或使用JSON.stringify()
,他效率非常低,并且损伤性能//下次的props和state数据
shouldComponentUpdate(nextProps,nextState){
if(nextProps.data==this.props.data){
return false
}
return true
}
(8) UNSAFE_componentWillUpdate(nextProps, nextState)
渲染新的state
或props
时,UNSAFE_componentWillUpdate
会被调用.
将此作为在更新发生之前进行准备的机会。这个方法不会在初始化时被调用
不能在这里使用this.setState(),也不能做会触发视图更新的操作。如果需要更新state
或props
,调用getDerivedStateFromProps
(9) getSnapshotBeforeUpdate()render()
后的输出被渲染到DOM之前被调用。
(10) componentDidUpdate(prevProps, prevState, snapshot)
在更新发生后立即调用componentDidUpdate()
。
此方法不用于初始渲染。当组件更新时,将此作为一个机会来操作DOM。只要您将当前的props与以前的props进行比较(例如,如果props没有改变,则可能不需要网络请求),这也是做网络请求的好地方。
如果组件实现getSnapshotBeforeUpdate()
生命周期,则它返回的值将作为第三个“快照”参数传递给componentDidUpdate()
。否则,这个参数是undefined
。
(11) componentWillUnmount()
在组件被卸载并销毁之前立即被调用。
在此方法中执行任何必要的清理,例如使定时器无效,取消网络请求或清理在componentDidMount
中创建的任何监听。
(12) componentDidCatch(error, info)
错误边界是React组件,可以在其子组件树中的任何位置捕获JavaScript错误,记录这些错误并显示回退UI,而不是崩溃的组件树。错误边界在渲染期间,生命周期方法以及整个树下的构造函数中捕获错误。
如果类组件定义了此生命周期方法,则它将成错误边界。在它中调用setState()
可以让你在下面的树中捕获未处理的JavaScript错误,并显示一个后备UI。只能使用错误边界从意外异常中恢复; 不要试图将它们用于控制流程。
错误边界只会捕获树中下面组件中的错误。错误边界本身不能捕获错误
PureComponent
里如果接收到的新属性或者是更改后的状态和原属性、原状态相同的话,就不会去重新render了
在里面也可以使用shouldComponentUpdate
,,而且。
是否重新渲染以shouldComponentUpdate
的返回值为最终的决定因素。
import React, { PureComponent } from 'react'
class YourComponent extends PureComponent {
……
}
对组件真正实例的引用,其实就是ReactDOM.render()
返回的组件实例,ref
可以挂载到组件上也可以是dom元素上。
class
声明的组件)上的ref表示对组件实例的引用。不能在函数式组件上使用 ref 属性,因为它们没有实例:import React, { Component, createRef } from 'react'
import ReactDOM from 'react-dom'
class App extends Component {
constructor() {
super()
// 创建inputRef
this.inputRef = createRef()
}
componentDidMount () {
console.log(this.inputRef.current) // <input type="text">
}
render () {
return (
<div>
{/* 关联ref和dom */}
<input type="text" ref={this.inputRef} />
</div>
)
}
}
ReactDOM.render(
<App/>,
document.getElementById('root')
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://www.cnblogs.com/ypSharing/p/15400990.html
内容来源于网络,如有侵权,请联系作者删除!