反应状态 vs 变量 vs 函数调用

Question

这是我的项目：

import React, { useState } from 'react';

const Component = () => {
  const [number, setNumber] = useState(1);
  const by2 = !(number%2)
  const by3 = !(number%3)
  const by5 = !(number%5)
  const by7 = !(number%7)
  const by11 = !(number%11)

  return(
    <>
      {by2 && <div>Divisible by 2</div>}
      {by3 && <div>Divisible by 3</div>}
      {by5 && <div>Divisible by 5</div>}
      {by7 && <div>Divisible by 7</div>}
      {by11 && <div>Divisible by 11</div>}
      <button onClick={() => setNumber(prev => prev +1)}>click me</button>
    </>
  )
}
export default Component

我希望它这样做：给定初始状态

const [number, setNumber] = useState(1);

以及增加它的按钮

<button onClick={() => setNumber(prev => prev +1)}>click me</button>

其他 5 个组件只有在它们的条件为真时才会出现。

  const by2 = !(number%2)
  const by3 = !(number%3)
  const by5 = !(number%5)
  const by7 = !(number%7)
  const by11 = !(number%11)

问题是，这行得通！我在 by2、by3、by5 等中所做的逻辑就像我想要的那样工作。但同时我想：什么时候可以在组件内部使用变量或函数调用？过去我遇到过一些问题，其中变量没有像我希望的那样在重新渲染中更新它们的值。所以我觉得我应该使用状态，甚至是这样的函数调用：

  const by2 = () => !(number%2)
  const by3 = () => !(number%3)
  const by5 = () => !(number%5)
  const by7 = () => !(number%7)
  const by11 = () => !(number%11)

  {by2() && <div>Divisible by 2</div>}
  {by3() && <div>Divisible by 3</div>}
  {by5() && <div>Divisible by 5</div>}
  {by7() && <div>Divisible by 7</div>}
  {by11() && <div>Divisible by 11</div>}

所以我想知道的是，选择这 3 种方法有什么影响？在这种情况下我可以使用变量而不是状态，并且在这种情况下不带参数的函数调用与使用变量相同吗？

Answer 1

我肯定会说，在这种简单的情况下，使用变量或函数调用也是一样的。当调用setNumber 时，您正在重新渲染您的组件并且变量应该正确更新。

也许在你上一个项目中，你说变量没有更新，还有别的东西......

Answer 2

在这个简单的例子中，两种方法都是相似的。它们没有太大区别。

但是，如果您在状态更新时定义函数，则函数将被重新定义，这不是预期的。当您将函数用作子组件的道具时，您可能会遇到问题。因为这些函数将在每次渲染时重新定义，这可能会触发子元素的重新渲染，这在所有情况下都可能不希望出现。为了避免这种情况，我们使用useCallback、useMemo 和React.Memo 等。

由于您的所有变量都依赖于状态，因此每当状态更新时，变量也会随之更新。因此，对于您的需求，定义变量非常适合。

在什么情况下我可以使用变量而不是状态

• 当您不希望组件在更新值时重新呈现时，您只需将这些对象/值定义为变量。
• 当您希望在值更改/更新时重新渲染组件时，将所有这些对象/值定义为状态，如本例中的number。

希望这会有所帮助。