Day20 React的严格模式

严格模式可以想成是React的debug工具，严格模式不会渲染出任何的UI元件，它会检查其包覆下所有的Component和底下的子元素是否有合乎规则。

import React from 'react';

function ExampleApplication() {
  return (
    <div>
      <Header />
      <React.StrictMode>
        <div>
          <ComponentOne />
          <ComponentTwo />
        </div>
      </React.StrictMode>
      <Footer />
    </div>
  );
}

上述范例中Header和Footer这两个Component都不会被检查到，唯有ComponentOne、ComponentTwo和底下的子元素会被检查到。

检查范围

严格模式将会检测以下几点:

• 发现拥有不安全生命周期的 component
• 警告使用了 legacy string ref API
• 警告使用到了被弃用的 findDOMNode
• 侦测意想不到的副作用
• 侦测 legacy context API

发现不安全的生命周期

某些遗留的生命周期在非同步的React里使用是不安全的，使用严格模式的话，在浏览器渲染react产生画面的时候，可以在console中找到警告提示文字。

警告使用了 legacy string ref API

由於legacy string ref API含有诸多缺点，故使用严格模式时会提出警告。官方建议使用callback form取代string ref。

警告使用到了被弃用的 findDOMNode

findDOMNode是一种搜寻Component里面DOM节点的方法，只能用在回传一个单一且永远不改变的 DOM 节点；但react後来有提供ref的方式，ref可以直接设在指定的DOM节点上，解决了findDOMNode的限制，故react较推荐使用ref。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.wrapper = React.createRef();
  }
  render() {
    return <div ref={this.wrapper}>{this.props.children}</div>;
  }
}

侦测意想不到的副作用

React会在下列两种情况运作:

• render时为做出某种变化到DOM上，React在render的时候会比较上次render的结果并更新。
• 每当有发生任何变化就会执行commit，以DOM节点举例的话，当React 插入、更新、或移除 DOM 节点时都会发生commit。
  Commit通常非常快，但render可能会很慢，因此非同步模式会把 render的工作切成小块，暂停和恢复这些工作藉以避免阻挡浏览器。 这表示 React 可能会在 commit 之前反覆运作多次 render情形下的生命周期，或是他会不管有没有 commit 就运作render，这就叫作副作用。