react16.5.2 component api笔记

react16.5.2 component api笔记

此处只记录一些要点和一些与之前api不同的变更。
若需了解全部api可完整阅读 react component api

  • render 唯一的必须实现的函数
    • 必须是纯函数。可简单理解为此处只能进行只读操作,不可做出任何写操作或调用会引起写操作的函数。
    • 如果shouldComponentUpdate返回false,则不会被调用。
  • constructor(props)
    • 不能在这里setState。
    • 只有这里可以直接给this.state赋值。
    • 不能在这里调用有side-effects作用的函数,如果有需要,在componentDidMount里调用。
    • 不要在这里用props的值生成state内容。
  • componentDidMount
    • 此时组件已经载入,发起request请求,进行setState操作。
    • 可以在此进行一些事件订阅。
  • componentDidUpdate(prevProps, prevState, snapshot)
    • 在每次更新state或props之后调用,在第一次render时调用。
    • 此处禁用setState(文档上说尽量避免,但我认为应该禁用,如果有逻辑必须在此处调用setState,那么有必要重新梳理逻辑,一定是哪里想错了)。
    • 如果shouldComponentUpdate返回false,则不会被调用。
    • 如果有getSnapshotBeforeUpdate,则getSnapshotBeforeUpdate的返回值会作为第三个参数传入。
  • componentWillUnmount
    • 在此进行一些取消订阅或其他的清扫操作。
    • 此处禁用setState。
  • shouldComponentUpdate(nextProps, nextState)
    • return false则不会重新渲染,可在此处改善渲染性能避免重复渲染。
    • return false会阻止UNSAFE_componentWillUpdate(), render(), and componentDidUpdate() 这三个生命周期函数的运行。
    • 在绝大多数情况下,不应手动实现该函数,应依赖react本身的默认更新行为。

以下是一些不常用的生命周期函数
  • static getDerivedStateFromProps(props, state)
    • 在render之前运行,包括第一次之后的渲染。
    • 是静态函数,有static关键字,里面没有实例this。
    • 在渲染之前,该返回值会替代当前实例的state,是在渲染之前最后一次修改state的机会。
  • getSnapshotBeforeUpdate
    • 在每次组件重渲染前调用,可获取当前dom内容。
    • 应有返回值。
  • componentDidCatch(error, info)
    • 捕获前端组件错误,通常只在最外层组件实现一次即可。
    • 以下错误不在该函数捕获范围内:
    • dom事件错误。
    • 异步错误。
    • 服务端渲染。
    • 该函数本身又抛出的错误。
  • 即将废弃
    • UNSAFE_componentWillMount
    • UNSAFE_componentWillReceiveProps
    • UNSAFE_componentWillUpdate
    • 都是去掉UNSAFE的同名函数的别名,即将废弃,无论是有没有UNSAFE前缀,别用就对了。
  • 非生命周期的实例方法
    • setState(updater[, callback])
    • setState可能同步或异步执行,因此不保证调用后的state为最新状态。
    • updater除了对象,还可以是函数,例如:

      this.setState((prevState, props) => {
      return {counter: prevState.counter + props.step};
      });
    • 如果要获取更新后的state,在callback中获取。
    • component.forceUpdate(callback)
    • 当组件由于非state或props的其他因素需要更新时才需要调用。一般来说需要手动调用这个是数据结构设计失败导致。
类静态属性
  • defaultProps
  • displayName
实例属性
  • state
  • props

关于 admin

所有重要的进步,都来源于失败和挫折的经历
此条目发表在 ecmascript, react 分类目录。将固定链接加入收藏夹。