react中的 StrictMode 是什么?

IT技术 javascript reactjs react-native
2021-03-12 16:10:16

我听说严格模式通过抛出生命周期方法删除警告,有助于以最佳实践方式编写 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>
        );
  }
2个回答

React 的 StrictMode是一种辅助组件,可以帮助您编写更好的React组件,您可以使用<StrictMode />包装一组组件,它基本上会:

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

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

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

所以,是的,您正处于理解严格模式的正确道路上,坚持下去,我认为这是您在使用它们时会更好地理解的事情之一,所以继续享受一些乐趣。

是否应该将其添加到应用程序的根目录中?代替单个组件
2021-04-21 16:10:16
我们将所有应用程序包装在 中<StrictMode />以捕获所有问题。对于现在有一堆我们必须避免的已弃用的生命周期方法来说,这是非常实际的。但是请注意,<StrictMode />由于调用了两次副作用,因此会导致 Apollo 出现问题;它允许<StrictMode />捕获错误,但有时会导致一些奇怪的行为。如果您遇到无法解决的奇怪问题,请将其关闭。
2021-04-30 16:10:16
@AbhinavSingi 取决于您的用例,如果您不想覆盖某些组件(出于任何原因),您可以在多个位置添加严格模式并将这些组件保留在层次结构中,否则考虑在根级别添加以覆盖所有组件。
2021-05-02 16:10:16

警告: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 渲染组件两次,以检测代码中的任何问题并警告您。

你很棒<3 <3
2021-04-18 16:10:16