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>}

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

Answer 1

我肯定会说，在这种简单的情况下，使用变量或函数调用也是如此。调用setNumber时，您正在重新呈现组件，并且变量应正确更新。

也许在您上一个项目中，您说变量没有更新，还有其他事情……

Answer 2

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

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

由于所有变量均取决于状态，因此只要状态得到更新，变量也将得到更新。因此，根据您的要求定义变量非常适合。

在这种情况下，我可以使用变量代替状态

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

希望这会有所帮助。

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

2 个答案: