反应状态 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 等

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

In which case can I use variables instead of states

当您不希望组件在更新值时重新呈现时，您只需将那些 objects/values 定义为变量。
将所有这些 objects/values 定义为当您希望在值 change/update 上重新呈现组件时的状态，例如本例中的 number。

希望这对您有所帮助。

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

React state vs variable vs function call

reactjs

dom

use-state

react-functional-component

rerender