React.js 纯组件和非纯组件

Question

所以，我正在学习react.js，并正在查看文档，其中他们给出了不纯组件的代码

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 />
    </>
  );
}

这是上面代码的输出：

我不明白为什么这是输出。添加后查看日志输出，我看到

Cup

组件运行了两次。所以，我的问题是：

1. 为什么这个

   Cup

   组件运行两次？
2. 即使运行两次，为什么它不打印其他数字（1、3和5）？
3. 另外，当我在

   guest

   组件中打印

   TeaSet

   变量时，它说无论我在哪里打印，

   guest

   都是 0，这是为什么？

Answer 1

很高兴听到你正在学习 React。正如您的询问让我澄清了一些基本的基本问题，即

=> React 使用 2 个虚拟 Dom 运行，因此该函数将被调用两次。为此，您可以从 index.js 禁用“严格模式”。

但这不是更好的方法，所以你可以使用 UseEffect Hook 来代替。

function Cup() {
  let [guest, setGuest] = useState(0);

  useEffect(() => {
    setGuest(guest + 1);
  }, []);

  return <h2>Tea cup for guest #{guest}</h2>;
}

了解UseEffect Hook的详细信息点击这里

希望您的疑问能够通过此解决，祝一切顺利。

正如您期望在 TeaPost 组件中渲染一样，它不能通过提到的 snippeas 来渲染为不同的值，更改将全局应用。

Answer 2

1. 如果您使用

   <StrictMode/>

   组件来帮助您意外发现不纯的代码，React 将在严格模式下运行。

严格模式总是调用渲染函数两次

2. React 在“提交短语”中更新 DOM，而不是“渲染短语”

3. React 组件树中渲染短语的顺序是：parent => child。表示会先调用父组件

   TeaSet

   的渲染函数（此时

   guest

   变量的值为

   0

   ），然后调用子组件

   Cup

   。

参见https://stackoverflow.com/a/76218354/6463558和修复开发中双重渲染发现的错误

那个