react事件、生命周期
2020-05-12 本文已影响0人
海豚先生的博客
事件
react中、原生事件绑定丢失this,绑定this写法
- jsx中onClosed={ this.handleClose.bind(this, id) }
接收时第二个参数是event对象 - jsx中onClick={(e) => {this.handleClick(id,e) }
- handleClick使用箭头函数
事件的错误不能用错误边界组件捕获,可以用try...catch捕获
生命周期
mount 创建阶段
- constructor
- getDerivedStateFromProps;检查更新
- render
只有state、props改变才会触发重新渲染(render),this.a属性变化则不会,除非使用this.forceUpdate()进行强制渲染。 - componentDidMount;
update 更新阶段
- getDerivedStateFromProps 会在调用 render 方法之前调用,并且在初始挂载及后续更新时都会被调用
// 循环渲染时使用下面的方法
// state和props任何一个改变才渲染 - shouldComponentUpdate(nextProps,nextState);return true才会渲染更新
- render
- gerSnapshotBeforeUpdate;更新前保存dom状态;
- componentDidUpdate;不要在此钩子中操作state,会触发state与update之间无限循环,除非使用2,state/props无改变不更新(return false)
当组件从 DOM 中移除时会调用如下方法:
componentWillUnmount()
当渲染过程,生命周期,或子组件的构造函数中抛出错误时,会调用如下方法:
static getDerivedStateFromError()
componentDidCatch()
shouldComponentUpdate和React.PureComponent
如果组件只有当 props.xxx或者 state.xxx 的值改变才需要更新时,你可以使用 shouldComponentUpdate 来进行检查:
shouldComponentUpdate(nextProps, nextState) {
if (this.props.color !== nextProps.color) {
return true;
}
if (this.state.count !== nextState.count) {
return true;
}
return false;
}
简写形式为省略shouldComponentUpdate中的代码,改变继承就行了
class MyApp extends React.PureComponent {xxx}