React中StrictMode严格模式

当我们使用 npx create-react-app my-app 创建一个项目的时候。项目中有一段如下所示的代码:

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

React.StrictMode 组件是什么?

StrictMode 是一个用来检查项目中潜在问题的工具。与 Fragment 一样,StrictMode 不会渲染任何可见的 UI。它为其后代元素触发额外的检查和警告。

注意:严格模式检查仅在开发模式下运行;它们不会影响生产构建。

StrictMode 目前有助于:

1、识别不安全的生命周期
2、关于使用过时字符串 ref API 的警告
3、关于使用废弃的 findDOMNode 方法的警告
4、检测意外的副作用
5、检测过时的 context API

生命周期警告

过时的组件生命周期往往会带来不安全的编码实践,具体函数如下:

1、componentWillMount
2、componentWillReceiveProps
3、componentWillUpdate

16.3:为不安全的生命周期引入别名

1、UNSAFE_componentWillMount
2、UNSAFE_componentWillReceiveProps
3、UNSAFE_componentWillUpdate

1、componentWillMount (旧的名称正常使用)
2、componentWillReceiveProps(旧的名称正常使用)
3、componentWillUpdate(旧的名称正常使用)

16.3<16.x<17.0

1、UNSAFE_componentWillMount
2、UNSAFE_componentWillReceiveProps
3、UNSAFE_componentWillUpdate

1、componentWillMount (旧的名称在开发模式下会产生一个警告)
2、componentWillReceiveProps(旧的名称在开发模式下会产生一个警告)
3、componentWillUpdate(旧的名称在开发模式下会产生一个警告)

17.0 只有新的 “UNSAFE_” 生命周期名称可以使用

1、UNSAFE_componentWillMount
2、UNSAFE_componentWillReceiveProps
3、UNSAFE_componentWillUpdate

1、componentWillMount (已经删除不能使用)
2、componentWillReceiveProps (已经删除不能使用)
3、componentWillUpdate (已经删除不能使用)

当启用严格模式时,React 会列出使用了不安全生命周期方法的所有 class 组件,并打印一条包含这些组件信息的警告消息,如下所示:

在这里插入图片描述

ref API 的警告

React 提供了两种方法管理 refs 的方式:已过时的字符串 ref API 的形式及回调函数 API 的形式。尽管字符串 ref API 在两者中使用更方便,但是它有一些缺点,因此官方推荐采用回调的方式。

你可能了解过之前的 API 中的 string 类型的 ref 属性,例如 “textInput”。你可以通过 this.refs.textInput 来访问 DOM 节点。

class MyComponent extends React.Component {
  render() {
    return <input type="text" ref="textInput" />;
  }

  componentDidMount() {
    this.refs.textInput.focus();
  }
}

React 16.3 新增了第三种选择,它提供了使用字符串 ref 的便利性,并且不存在任何缺点,参考链接: 地址。

检测副作用

渲染阶段的生命周期包括以下 class 组件方法:

1、constructor
2、componentWillMount (or UNSAFE_componentWillMount)
3、componentWillReceiveProps (or UNSAFE_componentWillReceiveProps)
4、componentWillUpdate (or UNSAFE_componentWillUpdate)
5、getDerivedStateFromProps
6、shouldComponentUpdate
7、render
8、setState 更新函数(第一个参数)

因为上述方法可能会被多次调用,所以不要在它们内部编写副作用相关的代码,这点非常重要。忽略此规则可能会导致各种问题的产生,包括内存泄漏和或出现无效的应用程序状态。不幸的是,这些问题很难被发现,因为它们通常具有非确定性。

严格模式不能自动检测到你的副作用,但它可以帮助你发现它们,使它们更具确定性。通过故意重复调用以下函数来实现的该操作:

1、class 组件的 constructor,render 以及 shouldComponentUpdate 方法
2、class 组件的生命周期方法 getDerivedStateFromProps
3、函数组件体
4、状态更新函数 (即 setState 的第一个参数)
5、函数组件通过使用 useState,useMemo 或者 useReducer

context API 警告

过时的 context API 容易出错,将在未来的主要版本中删除。在所有 16.x 版本中它仍然有效,但在严格模式下,将显示以下警告:

React中StrictMode严格模式_第1张图片

旧版本的使用

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class App extends Component {
  static childContextTypes = {
    theme: PropTypes.string
  }
  getChildContext () {
    return {
      theme: 'dark'
    }
  }
  render() {
    return (
      <Toolbar />
    );
  }
}

function Toolbar (props) {
  return (
    <div>
      <ThemedButton />
    </div>
  )
}

class ThemedButton extends Component {
  static contextTypes = {
    theme: PropTypes.string
  }
  render() {
    return (
      <button>{this.context.theme}</button>
    );
  }
}

export default App;

新版本的使用

import React, { Component } from 'react';
const ThemeContext = React.createContext('light');

class App extends Component {
  render() {
    return (
      <ThemeContext.Provider value="dark">
        <Toolbar />
      </ThemeContext.Provider>
    );
  }
}

function Toolbar (props) {
  return (
    <div>
      <ThemedButton />
    </div>
  )
}

class ThemedButton extends Component {
  static contextType = ThemeContext
  render() {
    return (
      <button>{this.context}</button>
    );
  }
}

export default App;

你可能感兴趣的:(React中StrictMode严格模式)