React函数组件使用局部变量设置状态变量V/s

Question

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

现在，我看到两个选项;

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

我只是想了解这两种方式的区别。还要补充的是，当使用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

似乎您要根据传递给组件的一些道具或上下文值计算myTitle值。在React中，将传入的props/context值存储在本地状态通常被认为是反模式的。计算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} />;
};

Answer 2

由于if-子句，您的代码运行到一个无限循环。如果你设置了标题，而条件没有改变，它将在每个渲染上被设置，导致一个新的渲染-无限渲染链。

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

Answer 3

你应该使用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;