react16.5.2 component api笔记

<li>
  constructor(props) <ul>
    <li>
      不能在这里setState。
    </li>
    <li>
      只有这里可以直接给this.state赋值。
    </li>
    <li>
      不能在这里调用有side-effects作用的函数，如果有需要，在componentDidMount里调用。
    </li>
    <li>
      不要在这里用props的值生成state内容。
    </li>
  </ul>
</li>

<li>
  componentDidMount <ul>
    <li>
      此时组件已经载入，发起request请求，进行setState操作。
    </li>
    <li>
      可以在此进行一些事件订阅。
    </li>
  </ul>
</li>

<li>
  componentDidUpdate(prevProps, prevState, snapshot) <ul>
    <li>
      在每次更新state或props之后调用，在第一次render时<strong>不</strong>调用。
    </li>
    <li>
      此处禁用setState（文档上说尽量避免，但我认为应该禁用，如果有逻辑必须在此处调用setState，那么有必要重新梳理逻辑，一定是哪里想错了）。
    </li>
    <li>
      如果shouldComponentUpdate返回false，则不会被调用。
    </li>
    <li>
      如果有getSnapshotBeforeUpdate，则getSnapshotBeforeUpdate的返回值会作为第三个参数传入。
    </li>
  </ul>
</li>

<li>
  componentWillUnmount <ul>
    <li>
      在此进行一些取消订阅或其他的清扫操作。
    </li>
    <li>
      此处禁用setState。
    </li>
  </ul>
</li>

<li>
  shouldComponentUpdate(nextProps, nextState) <ul>
    <li>
      return false则不会重新渲染，可在此处改善渲染性能避免重复渲染。
    </li>
    <li>
      return false会阻止UNSAFE_componentWillUpdate(), render(), and componentDidUpdate() 这三个生命周期函数的运行。
    </li>
    <li>
      在绝大多数情况下，不应手动实现该函数，应依赖react本身的默认更新行为。
    </li>
  </ul>
</li>

<li>
  getSnapshotBeforeUpdate <ul>
    <li>
      在每次组件重渲染前调用，可获取当前dom内容。
    </li>
    <li>
      应有返回值。
    </li>
  </ul>
</li>

<li>
  componentDidCatch(error, info) <ul>
    <li>
      捕获前端组件错误，通常只在最外层组件实现一次即可。
    </li>
    <li>
      以下错误不在该函数捕获范围内：
    </li>
    <li>
      dom事件错误。
    </li>
    <li>
      异步错误。
    </li>
    <li>
      服务端渲染。
    </li>
    <li>
      该函数本身又抛出的错误。
    </li>
  </ul>
</li>

<li>
  即将废弃 <ul>
    <li>
      UNSAFE_componentWillMount
    </li>
    <li>
      UNSAFE_componentWillReceiveProps
    </li>
    <li>
      UNSAFE_componentWillUpdate
    </li>
    <li>
      都是去掉UNSAFE的同名函数的别名，即将废弃，无论是有没有UNSAFE前缀，别用就对了。
    </li>
  </ul>
</li>

<li>
  非生命周期的实例方法 <ul>
    <li>
      setState(updater[, callback])
    </li>
    <li>
      setState可能同步或异步执行，因此不保证调用后的state为最新状态。
    </li>
    <li>
      updater除了对象，还可以是函数，例如：<br /> <code>&lt;br />

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