React 中的 StrictMode 是啥？

Posted 2023-02-22

【中文标题】React 中的 StrictMode 是啥？

【英文标题】：What is StrictMode in react?React 中的 StrictMode 是什么？

【发布时间】：2019-04-10 12:32:34

【问题描述】：

我听说严格模式有助于以最佳实践方式编写 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>
        );
  

【参考方案1】：

React's StrictMode 是一种 helper 组件，它可以帮助您编写更好的 react 组件，您可以使用 <StrictMode /> 包装一组组件，它基本上会：

验证里面的组件是否遵循一些推荐的做法，如果不在控制台中，则会发出警告。 验证不推荐使用的方法没有被使用，如果它们被使用，严格模式会在控制台中警告您。 通过识别潜在风险帮助您预防一些副作用。

正如文档所述，严格模式是面向开发的，因此您无需担心它会影响您的生产构建。

我发现当我在处理新的代码库并且我想看看我面临什么样的代码/组件时，实现 严格模式 特别有用。此外，如果您处于错误搜寻模式，有时最好用<StrictMode /> 包装您认为可能是问题根源的代码组件/块。

所以，是的，你在理解严格模式的正确道路上，坚持下去，我认为这是你与他们一起玩时更了解的事情之一，所以继续玩吧。

【讨论】：

是否最好将其添加到应用程序的根目录中？而不是单个组件

@AbhinavSingi 取决于您的用例，如果您不想覆盖某些组件（出于任何原因），您可以在多个位置添加严格模式并将这些组件保留在层次结构中，否则考虑添加在根级别覆盖所有组件。

我们将所有应用程序包装在<StrictMode /> 中以捕获所有问题。当有一堆我们必须避免的不推荐使用的生命周期方法时，这是非常现实的。但是请注意，<StrictMode /> 会导致 Apollo 出现问题，因为它调用了两次副作用；它允许<StrictMode /> 捕获错误，但有时会导致一些奇怪的行为。如果遇到无法解决的奇怪问题，请关闭它。

【参考方案2】：

警告：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 方法将调用两次。

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

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

【讨论】：

你很棒

【参考方案3】：

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