React 严格模式是如何工作的？

Question

我发现严格模式调用某些方法两次（如构造函数、渲染、函数调用的主体），并且看到它们是幂等的，因此不会发生副作用。我很好奇它是如何检测意外副作用的。

在文档中，他们在谈论并发模式并解释'strict mode'。我得到了它的概念，将 'render' 阶段分成几个部分并且运行它不止一次（更准确地说，在渲染之前在幕后做一些工作）。

那么严格模式呢？当状态改变时，他们是否只是调用某些方法两次并创建两个虚拟 DOM 并进行比较？

Answer 1

除了您可以在文档或热门博客中找到的内容外，我猜问题是关于 “StictMode 是如何实现的”.

React 有一个符号来标记 StrictMode:

的用法

See Symbol.for on MDN

// The Symbol used to tag the ReactElement-like types
export let REACT_STRICT_MODE_TYPE = 0xeacc;
REACT_STRICT_MODE_TYPE = Symbol.for('react.strict_mode');

...
export const StrictMode = REACT_STRICT_MODE_TYPE;

然后当您对其调用 React.createElement 时，您为子树中的所有节点分配了“React Strict Mode”。

typeof React.StrictMode; // symbol
<React.StrictMode />

// Transpiled to
React.createElement(React.StrictMode, ...);

现在，当模式开启时，React Fiber 将为运行节点执行额外的逻辑：

if (hostFiber.mode & StrictMode) {
  // ... extra logic
}

React 严格模式是如何工作的？

How does React Strict Mode works?

reactjs

react-dom