javascript - 为什么 React 中的副作用不好

Question

我正在学习 React 和 localStorage。然后，我看到一篇文章说 localStorage 最好通过 useEffect() 使用，因为有副作用。所以，这段代码很糟糕:

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() 有什么好处

Answer 1

您的代码的两种情况都很好。第一种情况不需要包装在 useEffect 中的原因是它已经在事件处理程序中，并且每次更改只会调用一次。同样，我们在第二种情况下使用 useEffect 的原因是 React 可以确保它只调用一次效果。

何苦呢？ React 可能会在需要时重试渲染您的组件，并且无论渲染多少次，它都期望相同的 JSX 具有相同的状态/属性 - 即，您的组件应该是“纯”。这可以实现许多性能增强，例如 Suspense，但只要您不直接在渲染函数中运行副作用，您就不需要担心这一点。