我正在学习React和localStorage。然后,我碰到一篇文章,说有副作用,最好通过useEffect()使用localStorage。所以,这段代码是不好的:
import React from 'react';
const App = () => {
const [value, setValue] = React.useState('');
const onChange = event => {
localStorage.setItem('myValueInLocalStorage', event.target.value);
setValue(event.target.value);
};
return (
<div>
<h1>Hello React with Local Storage!</h1>
<input value={value} type="text" onChange={onChange} />
<p>{value}</p>
</div>
);
};
export default App;
但是此代码正确:
import React from 'react';
const App = () => {
const [value, setValue] = React.useState('');
React.useEffect(() => {
localStorage.setItem('myValueInLocalStorage', value);
}, [value]);
const onChange = event => setValue(event.target.value);
return (
<div>
<h1>Hello React with Local Storage!</h1>
<input value={value} type="text" onChange={onChange} />
<p>{value}</p>
</div>
);
};
export default App;
一个问题,为什么?为什么第一个代码有问题,第二个代码的useEffect()有什么好处?
我正在学习React和localStorage。然后,我碰到一篇文章,说有副作用,最好通过useEffect()使用localStorage。因此,这段代码很糟糕:从'react';中导入React; ...
两种情况下都可以。不需要将第一种情况包装在useEffect
中的原因是因为它已经在事件处理程序中,并且每次更改仅被调用一次。同样,在第二种情况下使用useEffect
的原因是,React可以确保仅调用一次效果。
使用useEffect的好处是您可以在不需要时进行清理。
作为程序员,当您不负责同步状态时,它更容易管理状态。一旦错过同步状态的任何部分,整个状态就会损坏。 useEffect提供有关在任何特定部分发生更改时代码应如何表现的功能。似乎更具反应性。