时间戳

首页 > 解决方案 > 反应状态 vs 变量 vs 函数调用

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

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

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 种方法有什么影响？在这种情况下，我可以使用变量而不是状态，在这种情况下，没有参数的函数调用与使用变量相同吗？

标签： reactjsdomuse-statereact-functional-componentrerender

解决方案

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

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

推荐阅读