如何访问非状态变量的更新值，在功能组件.?

Question

我需要一个反应变量，我们叫它temp，它不是一个状态变量，而是一个普通的let变量

问题是我无法在渲染中获得更新的值。我知道它不是一个状态变量，所以当变量更新时，它不会渲染UI。

但是，我不访问变量，直到变量设置。

例:→

const MyComponent = (props) => {
let temp;
const [loading, setLoading] = useState(true);
init = () => {
setLoading(true);
temp = "updated value";
setLoading(false);
}
useEffect(() => {
init();
}, [])
return (
{laoding ? <div>loading</div> : <div> {temp}</div>}
)
}

在上面的代码中，如果加载为false并且设置了temp变量，那么UI应该反映更新后的值。但是，它不是

它在类组件中工作得很好。

我在这里错过了什么吗?

Answer 1

您可以在功能组件中使用该效果。useEffect在每次它的依赖改变时被触发，这将为你触发渲染。

然而，我看不出init变量的真正用途。假设您想在组件安装期间设置值。我想它会像下面这样。

const MyComponent = (props) => {
let temp;
const [loading, setLoading] = useState(true);
useEffect(() => {
// Empty array means that this will be executed when component mounts
init()
}, [])
useEffect(() => {
// Rerender will be triggered whenever temp gets changed
}, [temp])
const init = () => {
setLoading(true);
temp = "updated value";
setLoading(false);
}
return (
<>
{
loading ? <span>loading...</span> : <span>{temp}</span>
}
</>
)
}

注意:我仍然和临时存储作为一个国家在这种情况下,因为它是反应系统的一部分,它应该如何使用。

Answer 2

这里的执行是:component render =>坐骑=比;使用效果运行=比;状态改变=>rerender =比;Temp是新创建的未定义let。在temp中使用useRef，在init中分配temp.current = ...。它保证在渲染过程中持续存在。

const MyComponent = (props) => {
const temp = useRef();
const [loading, setLoading] = useState(true);
const init = () => {
setLoading(true);
temp.current = "updated value";
setLoading(false);
};
useEffect(() => {
init();
}, []);
return <>{loading ? <div>loading</div> : <div>{temp.current}</div>}</>;
};