为什么在React中没有副作用

问题描述 投票:3回答:3

我正在学习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; ...

reactjs
3个回答
1
投票

两种情况下都可以。不需要将第一种情况包装在useEffect中的原因是因为它已经在事件处理程序中,并且每次更改仅被调用一次。同样,在第二种情况下使用useEffect的原因是,React可以确保仅调用一次效果。


0
投票

使用useEffect的好处是您可以在不需要时进行清理。


0
投票

作为程序员,当您不负责同步状态时,它更容易管理状态。一旦错过同步状态的任何部分,整个状态就会损坏。 useEffect提供有关在任何特定部分发生更改时代码应如何表现的功能。似乎更具反应性。

© www.soinside.com 2019 - 2024. All rights reserved.