React Strict Mode

什么是严格模式？

React 渲染的组件必须是纯函数组件，它只应该返回它们的 JSX ，不要在渲染之前更改已经存在的任何对象或变量，这就不是纯函数组件了！而严格模式就是为了检查这一点的。它在开发过程中调用每个组件的函数两次。通过调用组件函数两次，严格模式可以帮助我们找到违反规则的组件。

严格模式在生产环境中没有任何影响，在生产环境中不会触发两次。要使用严格模式，您可以将根组件包装到 <React.StrictMode> 中。一些框架默认执行此操作。

什么是纯函数？

纯函数它只关心自己的事情，它不会更改调用之前存在的任何对象或变量。

在下面这个例子中，给定相同的输入，函数将始终返回相同的输出。它就是一个纯函数。

function double(number) {
  return 2 * number;
}

以组件为例子

下面是一个不是纯函数组件的例子：

let guest = 0;
 
function Cup() {
  // Bad: changing a preexisting variable!
  guest = guest + 1;
  return <h2>Tea cup for guest #{guest}</h2>;
}
 
export default function TeaSet() {
  return (
    <>
      <Cup />
      <Cup />
      <Cup />
    </>
  );
}

可以修改成这样，将他变为纯函数组件：

function Cup({ guest }) {
  return <h2>Tea cup for guest #{guest}</h2>;
}
 
export default function TeaSet() {
  return (
    <>
      <Cup guest={1} />
      <Cup guest={2} />
      <Cup guest={3} />
    </>
  );
}

React Strict Mode

什么是严格模式？

什么是纯函数？

以组件为例子

相关资料