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

这是我的项目：

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

和增加它的按钮

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

问题是，这是有效的！我在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>}

constby2=（）=>！（数字%2）
常量by3=（）=>！（数字%3）
常量by5=（）=>！（数字%5）
constby7=（）=>！（数字%7）
constby11=（）=>！（数字%11）
{by2（）&&可被2整除}
{by3（）&&可被3整除}
{by5（）&&可被5整除}
{by7（）&&可被7整除}
{by11（）&&可被11整除}

---

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

我肯定地说，在这个简单的情况下，如果使用变量或函数调用也是一样的。调用

setNumber

时，您正在重新呈现组件，变量应正确更新

---

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

我肯定会说，在这个简单的例子中，如果你使用变量或函数调用，情况也是一样的。调用

setNumber

时，您正在重新呈现组件，变量应正确更新

---

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

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

但是，如果在状态更新时定义函数，则函数将被重新定义，这是不需要的。当您将函数用作prop-to-child组件时，可能会遇到问题。由于这些函数将在每次渲染时重新定义，因此也可能会触发子级的重新渲染，这在所有情况下可能都不需要。为了避免这种情况，我们使用

useCallback

、

usemo

和

React.Memo

等

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

在哪种情况下，我可以使用变量而不是状态

• 如果不希望组件在更新值时重新渲染，则仅将这些对象/值定义为变量
• 当您希望在值更改/更新（如本例中的

  number

  ）上重新渲染组件时，将所有这些对象/值定义为状态

---

希望这能有所帮助。

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

但是，如果在状态更新时定义函数，则函数将被重新定义，这是不需要的。当您将函数用作prop-to-child组件时，可能会遇到问题。由于这些函数将在每次渲染时重新定义，因此也可能会触发子级的重新渲染，这在所有情况下可能都不需要。为了避免这种情况，我们使用

useCallback

、

usemo

和

React.Memo

等

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

在哪种情况下，我可以使用变量而不是状态

• 如果不希望组件在更新值时重新渲染，则仅将这些对象/值定义为变量
• 当您希望在值更改/更新（如本例中的

  number

  ）上重新渲染组件时，将所有这些对象/值定义为状态

---

希望这能有所帮助。

如果您想了解更多有关范围的信息，我建议您。。。官方文档中的内容对于确定您是否需要state以及它应该位于何处非常有帮助。如果您想了解更多关于scope的信息，我建议。。。从官方文件中得到的信息对于确定你是否需要这个州以及它应该住在哪里非常有帮助。我不明白你说的第一件事。如果我的函数定义改变了，为什么我会面临问题？这似乎正是我想要的，因为在以后的重新渲染中，我在执行by2（）时需要另一个值，那么问题是什么？在子元素上重新渲染的原因是状态，不是吗？为什么函数或变量是问题？考虑一下，如果你把这些函数中的一个传递给一个孩子，一个相同的支撑被用在孩子的< <代码>使用效果> /代码>中。然后，当此父组件由于状态更改而重新呈现时，函数将被重新定义，函数引用将被更改，这将触发子组件

useffect

，这可能是不期望的。这是我们使用

useCallback

或

useMemo

或

React.Memo

的地方，具体取决于用例。有关更多信息，请参考我正在谈论的问题以及修复方法。我不明白你说的第一件事。如果我的函数定义改变了，为什么我会面临问题？这似乎正是我想要的，因为在以后的重新渲染中，我在执行by2（）时需要另一个值，那么问题是什么？在子元素上重新渲染的原因是状态，不是吗？为什么函数或变量是问题？考虑一下，如果你把这些函数中的一个传递给一个孩子，一个相同的支撑被用在孩子的< <代码>使用效果> /代码>中。然后，当此父组件由于状态更改而重新呈现时，函数将被重新定义，函数引用将被更改

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

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