反应中的StrictMode是什么？

Question

我听说严格模式通过引发生命周期方法删除警告来帮助以最佳实践方式编写React代码。

我从https://medium.com/@baphemot/whats-new-in-react-16-3-d2c9b7b6193b阅读

我的理解正确吗？严格模式有效吗？它仅适用于不安全的生命周期方法吗？如果不能，我可以在功能组件中使用此功能吗？

  import { StrictMode} from “react”;
  class Test extends Component{
        render(
            <StrictMode>
                   //Some other child component which has all lifecycle methods implemented in it
            </StrictMode>
        );
  }

Answer 1

警告：StrictMode只会在开发模式而非生产模式下渲染组件两次。

例如，如果你使用这样的getDerivedStateFromProps方法

   static getDerivedStateFromProps(nextProps, prevState){// it will call twice
        if(prevState.name !== nextProps.name){
            console.log(`PrevState: ${prevState.name} + nextProps: ${nextProps.name}`) 
            return { name: nextProps.name }
        }
        return {}
    }

该getDerivedStateFromProps方法将调用两次。

只是为了让您知道这不是问题，这只是因为您将主要组件包装<StrictMode>在index.js文件中。

StrictMode 渲染组件两次以检测代码中的任何问题并警告您。

Answer 2

简而言之，StrictMode 有助于识别不安全、遗留或已弃用的 API/生命周期。它用于突出显示可能的问题。由于它是一个开发人员工具，因此它仅在开发模式下运行。它会将 Web 应用程序内的每个组件渲染两次，以便识别和检测应用程序中的任何问题并显示警告消息。

Answer 3

React的StrictMode是一种帮助程序组件，可以帮助您编写更好的react组件，您可以使用包装一些组件，<StrictMode />并且基本上可以：

• 验证内部组件是否遵循某些推荐做法，如果不在控制台中，则会发出警告。
• 验证不赞成使用的方法，如果使用了严格模式，则会在控制台中警告您。
• 通过识别潜在风险来帮助您预防某些副作用。

如文档所述，严格模式是面向开发的，因此您不必担心它会影响生产版本。

我发现在开发新代码库时实施严格模式特别有用，我想看看我要面对的代码/组件类型。另外，如果您处于错误搜寻模式，有时最好将<StrictMode />您认为可能是问题根源的组件/代码块包装在一起。

所以，是的，您正处于正确的道路上，了解严格的模式，请保持这种状态，我认为这是与您一起玩耍时可以更好地理解的事情之一，因此，继续玩乐吧。