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

【问题标题】：React Function component setting state variable V/s using local variableReact Function 组件使用局部变量设置状态变量 V/s
【发布时间】：2021-09-16 07:25:53
【问题描述】：

我有一个功能组件，并希望更新该组件中的某些状态（基于某些上下文 API 对象值，即我通过 useContext 获得）

现在，我看到了 2 个选项；

使用局部变量
使用 setState

我只是想了解这两种方式之间的区别。另外要补充的是，在使用 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;

【问题讨论】：

用户是否更改了标题，或者您只是在组件渲染上评估一次？你在传递任何道具吗？
是的，所以标题可以根据其他组件中的某些链接点击来更新....我正在使用上下文 api 对象从其他组件中检索信息
您能否修改问题中的代码以最准确地反映标题的更新方式？
您似乎想根据传递给组件的某些 prop 或上下文值来计算 myTitle 值。在本地状态中存储传递的 props/context 值通常被认为是 React 中的反模式。计算myTitle 值并将其传递给子组件。

标签： reactjs react-hooks

【解决方案1】：

由于您的 if 子句，您的代码会陷入无限循环。如果您设置了标题并且条件没有改变，它将在每次重新渲染时设置，从而导致新的渲染 - 无限的重新渲染链。

使用状态使您能够有条件地更改值，而使用不与状态耦合的局部变量使变量保持不变。

【讨论】：

谢谢...在这种情况下使用局部变量可以吗（并在 JSX 中获取更新的 myTitle）...。另外，如果我想使用 setState，您的意思是，我需要删除 if 条件并找出直接 setState 的方法吗？

【解决方案2】：

您应该使用 Hook useEffect。

const MyComponent = () => {
    const [myTitle, setMyTitle] = useState('ABC'); //Option 2 to use 'myTitle'

    useEffect(()=> {
        if (someContextApiObj.value === "XYZ") {
            setMyTitle("XYZ")
        }
    }, []);
    

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

        </>
    );
};

export default MyComponent;

【讨论】：

谢谢...我认为这个解决方案看起来不错...让 useEffect 依赖于上下文 obj 是否可以...即 useEffect(()=> { }, [someContextApiObj] );

【解决方案3】：

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

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

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

如果myTitle 值是一个昂贵的计算，或者您只想为孩子提供一个稳定的引用，请使用useMemo 挂钩来提供这个。

useMemo

import { useMemo } from 'react';

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

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

【讨论】：