标签: react-strictmode

第一次发帖提问:)

我有一个React应用程序：

// index.js

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById('root'),
);

我有 24 个jest测试套件，到目前为止，基本上是这样的：

act(() => {
  render(
    <Router>
      <SomeComponentIWantToTest />
    </Router>
  );
});

我想到将测试包装在 中更合适StrictMode，以更接近应用程序的实际渲染方式：

act(() => {
  render(
    <React.StrictMode>
      <Router>
        <SomeComponentIWantToTest />
      </Router>
    </React.StrictMode>
  );
});

尝试之后，我注意到以下几点：

1. 一件好事是，它在我没有将一些测试代码包装在act. 我能够修复这些地方。欢呼！
2. 我的测试速度显着减慢。我猜这是因为我的 React 组件由于 Strict Mode 而渲染了两次。

另外，快速浏览一下文档，这似乎StrictMode只是开发的事情。那么，将测试（理论上与生产中将发生的情况有关）包装起来有意义吗React.StrictMode？

我的应用程序处于严格模式下，这使得使用 useEffect() 运行变得困难。它基本上在控制台中记录了我所有的值两次，这不是我想要实现的结果。

 useEffect(() => {
console.log('logs some data')
}, []);

有没有办法让 useEffect 只显示一次数据并将 StrictMode 保留在我的应用程序组件中？

root.render(
<React.StrictMode>
 <App />
</React.StrictMode>
);

我确实尝试使用 useRef 方法，但我的工作人员建议我不要使用此特定方法并尝试其他可能的outwork。

解决方案：如果您需要在组件中保留严格模式，但需要使 useEffect 不渲染两次，您可以使用 useRef ：

例子：

 let shouldlog = useRef(true);

 useEffect(() => {
 if (shouldlog.current) {
  shouldlog.current = false;
  console.log("component mounted");
  }

return () => console.log("function cleaned up");
}, []);

我正在阅读文档并了解到 React仅StrictMode用于开发，它解释了为什么我们有双重调用。

这很好，但这是否意味着我必须StrictMode为我的生产禁用手动功能，或者反应build命令是否会自行执行此操作？

另一个 React 18 严格模式问题。我知道 React 将调用渲染和效果函数两次，以突出即将推出的功能中潜在的内存泄漏。我还不明白的是如何正确处理这个问题。我的问题是，我无法正确卸载第一个渲染结果，因为两个 useEffect 调用是使用第二个渲染的状态执行的。这是一个例子来展示我的意思。

  const ref = useRef(9);
  const id = useId();

  console.log('@@ initial id', id);
  console.log('@@ initial ref', ref.current);

  ref.current = Math.random();

  console.log('@@ random ref', ref.current);

  useEffect(() => {
    console.log('@@ effect id', id);
    console.log('@@ effect ref', ref.current);

    return () => {
      console.log('@@ unmount id', id);
      console.log('@@ unmount ref', ref.current);
    };
  });

这是日志输出

@@ initial id :r0:
@@ initial ref 9
@@ random ref 0.26890444169781214
@@ initial id :r1:
@@ initial ref 9
@@ random ref …

我正在处理我的项目，我注意到当打开严格模式时，它会将两个相同的元素推入我的数组中。当严格模式关闭时，它仅将一个元素推入数组。有什么解释为什么会发生这种情况吗？

import {getRandomNumber} from './utils';


export function registerTicket() {
    const newTicket = {
        number: getRandomNumber(),
        color: 'red',
    }
    this.setState((prevState) => {
        prevState.tickets.push(newTicket);
        return {
            remainingTickets: --prevState.remainingTickets,
            tickets: prevState.tickets,

        }
    })
}

这是我的状态。

    this.state = {
      winningNumber: getRandomNumber(),
      remainingTickets: 5,
      tickets: [],
      finished: false
    };