react事件、生命周期

2020-05-12  本文已影响0人  海豚先生的博客

事件

react中、原生事件绑定丢失this,绑定this写法

事件的错误不能用错误边界组件捕获,可以用try...catch捕获

生命周期

mount 创建阶段

  1. constructor
  2. getDerivedStateFromProps;检查更新
  3. render
    只有state、props改变才会触发重新渲染(render),this.a属性变化则不会,除非使用this.forceUpdate()进行强制渲染。
  4. componentDidMount;

update 更新阶段

  1. getDerivedStateFromProps 会在调用 render 方法之前调用,并且在初始挂载及后续更新时都会被调用
    // 循环渲染时使用下面的方法
    // state和props任何一个改变才渲染
  2. shouldComponentUpdate(nextProps,nextState);return true才会渲染更新
  3. render
  4. gerSnapshotBeforeUpdate;更新前保存dom状态;
  5. 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}

上一篇下一篇

猜你喜欢

热点阅读