reactjs - React Function组件使用局部变量设置状态变量V/s

Question

我有一个功能组件，想更新该组件中的某些状态(基于某些上下文 API 对象值，即我通过 useContext 获取)

现在，我看到 2 个选项；

1. 使用局部变量
2. 使用设置状态

我只是想了解这两种方式之间的区别。另外要补充的是，在使用 setState 时，我遇到了以下问题错误:重新渲染太多。 React 限制渲染次数以防止无限循环。

补充一下，此功能组件是 App 组件的直接子组件，上下文对象在另一个组件中更新，该组件也是 App 组件的直接子组件。

const MyComponent = () => {
    let myTitle = "ABC"; //Option 1 to use 'myTitle'
    //const [myTitle, setMyTitle] = useState('ABC'); //Option 2 to use 'myTitle'
    if (someContextApiObj.value === "XYZ") {
        myTitle = "XYZ";
        //setMyTitle("XYZ")
    }

    return (
        <>
            <ChildComponent
                myTitle={myTitle}
            />

        </>
    );
};

export default MyComponent;

Answer 1

您似乎想要根据传递给组件的某些 prop 或上下文值来计算 myTitle 值。在本地状态中存储传递的 props/context 值通常被认为是 React 中的反模式。计算 myTitle 值并将其传递给子组件。

const MyComponent = () => {
  const myTitle = someContextApiObj.value === "XYZ" ? "XYZ" : "ABC";

  return <ChildComponent myTitle={myTitle} />;
};

如果 myTitle 值是一项昂贵的计算，或者您只想为 child 提供稳定的引用，请使用 useMemo Hook 来提供它。

useMemo

import { useMemo } from 'react';

const MyComponent = () => {
  const myTitle = useMemo(() => {
    return someContextApiObj.value === "XYZ" ? "XYZ" : "ABC";
  }, [someContextApiObj]);

  return <ChildComponent myTitle={myTitle} />;
};