[进阶指南] 严格模式（ Day29 ）

1. 我们可以在开发环境中使用 <React.StrictMode>进入严格模式
2. 严格模式帮我们检查不再使用的 life cycle、API 等
3. 严格模式也帮我们检查一些副作用

以下详列：

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

严格模式使用测试

• 测试 ReactDOM.findDOMNode ，未提出警告
• 测试 componentWillReceiveProps 有 warning
• 测试 legacy string ref API，有红色的 warning

//测试程序码
class Greeting extends React.Component {
  
  componentWillReceiveProps() {
    console.log("Will Mount")
  }
  action() {
    console.log(ReactDOM.findDOMNode(this.refs.input).value);
  }
  render() {
    return (<div>
        <h1>Hello, {this.props.name}</h1>
        <input onClick={() => this.action()} ref='input' />
        </div>
     )
  }
}

class App extends React.Component{ 
    render(){
        return(
          <React.StrictMode>
            <Greeting name="Jim"/>
          </React.StrictMode>
        );
    }
}

ReactDOM.render(
  <App/>,
  document.getElementById('root')
);

所以严格模式是什麽？

严格模式是一个用来突显应用程序里潜在问题的工具。如同 Fragment 一样，严格模式不会 render 任何可见的 UI。它为了底下的所有的依赖们启动了额外的检查和警告。

以上今天。

参考资料：
https://zh-hant.reactjs.org/docs/strict-mode.html#warning-about-legacy-string-ref-api-usage
https://zh-hant.reactjs.org/docs/react-dom.html#finddomnode
https://zh-hant.reactjs.org/docs/legacy-context.html