代码之家  ›  专栏  ›  技术社区  ›  Hemadri Dasari

react中的StrictMode是什么?

  •  2
  • Hemadri Dasari  · 技术社区  · 7 年前

    我听说strict模式有助于以最佳实践的方式编写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 回复  |  直到 7 年前
        1
  •  81
  •   Enmanuel Duran    7 年前

    React's StrictMode 有点像 辅助组件 <StrictMode /> 基本上会:

    • 并在控制台中发出警告。
    • 验证不推荐使用的方法是否未被使用,如果使用了,严格模式将在控制台中向您发出警告。
    • 通过识别潜在风险,帮助您预防一些副作用。

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

    严格模式 <严格模式/> 您认为可能是问题根源的组件/代码块。

    所以,是的,你在正确的道路上理解严格模式,保持它,我认为这是其中一件事,你更了解当你玩他们,所以继续,并有一些乐趣。

        2
  •  21
  •   johnnzy Shrroy    6 年前

    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 文件。

    渲染组件两次,以便检测代码中的任何问题并向您发出警告。