reactjs - react 中的简单 let 或 const 变量

Question

我是 React 的新手，我想知道在 React 功能组件中使用简单的 let 或 const 变量是否是好的做法。

我知道有 useState、useRef 和 useMemo/useCallback 这样的钩子(Hook)。我的问题是您是否应该始终使用它们？

在功能性 React 组件中定义一个没有钩子(Hook)的 const 是好习惯吗:

const test = "test";

在 React 功能组件主体中使用组件函数内部的变量来编写 JSX 返回语句之外的逻辑是否被认为是一种好的做法？

像这样:

export default function MyComponent(props) {

  const otherCondition = props.content.length > 20;

  let myVariable = 0;

  if (props.isDisabled && otherCondition) {
    // ...more complex checks...
    myVariable = 1;
  } else {
    myVariable = 2;  
  }

  return (
    <>
     {/* some JSX */}
    </>
  );

}

上面在react组件中写let或者const变量的例子是好习惯吗？或者你应该避免在没有任何类型的钩子(Hook)(useState/useRef 等)的情况下使用 let 或 const 吗？如果我理解正确，所有这些 const/let 变量将在每次渲染时重新分配。如何在保持相同行为的同时防止这种重新分配的性能成本？

除了在每次渲染时重新分配之外，在没有任何钩子(Hook)的情况下使用 const/let 是否还有其他缺点？

使用像 useState 或 useRef 这样的钩子(Hook)会比简单的 let 或 const 消耗更多的性能吗多变的？如果是这样，你应该什么时候使用钩子(Hook)？

Answer 1

使用 let 或 const 完全没问题。有时您需要声明从 props 或状态派生的变量，以使代码具有声明性和可读性。

关于您的性能疑问，您始终可以使用 useMemo Hook 来内存派生值并避免在每次渲染时计算它。但只要您的代码在计算上不昂贵，就应该避免这种情况。

export default function MyComponent(props) {

  const otherCondition = props.content.length > 20;

  const myVariable = useMemo(() => {
    let myVariable = 0;
    if (props.isDisabled && otherCondition) {
      // ...more complex checks...
      myVariable = 1;
    } else {
      myVariable = 2;  
    }
    return myVariable
  }, 
  [props.isDisabled, otherCondition])

  return (
    <>
     {/* some JSX */}
    </>
  );

}