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

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

验证内部组件是否遵循建议的做法 some 并警告您是否在控制台中。
验证未使用的方法是否未被使用，如果使用了严格模式，则会在控制台中警告您。
通过识别潜在风险来帮助您预防某些副作用。

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

当我在开发新的代码库时，我想实现 strict模式特别有用，我想看看我要面对的是哪种代码/组件。另外，如果您处于错误寻找模式，有时最好用<StrictMode />包装您认为可能是问题根源的组件/代码块。

是的，您正处于正确的道路上，了解严格的模式，请继续努力，我认为这是与您一起玩耍时您会更好地理解的那些事情之一，因此，继续玩乐吧。

反应中的StrictMode是什么？

2 个答案: