Reactjs 为什么副作用在反应中不好

我在学习React和localStorage。然后，我看到一篇文章说，由于副作用，本地存储最好通过useffect（）使用。所以，这段代码很糟糕：

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;

从“React”导入React；
常量应用=（）=>{
const[value，setValue]=React.useState（“”）；
const onChange=事件=>{
setItem（'myValueInLocalStorage'，event.target.value）；
设置值（event.target.value）；
};
返回(
你好，请与本地存储联系！
{value}

);
};
导出默认应用程序；

但这一准则是正确的：

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;

从“React”导入React；
常量应用=（）=>{
const[value，setValue]=React.useState（“”）；
React.useffect（（）=>{
setItem（'myValueInLocalStorage'，value）；
}，[价值]；
const onChange=event=>setValue（event.target.value）；
返回(
你好，请与本地存储联系！
{value}

);
};
导出默认应用程序；

---

一个问题是为什么？第一个代码为什么有错，第二个代码使用useffect（）有什么好处？

使用useffect的好处是，您可以在不必要时进行清理

React.useEffect(() => {
  localStorage.setItem('myValueInLocalStorage', value);

  return (() => { // clean up
   // remove when unnecessary
   if (true) { // your condition
     localStorage.removeItem('myValueInLocalStorage');
   // Or even set empty value
   }
  });
}, [value]);

---

代码的两种情况都很好。第一个案例不需要包装在

useffect

中的原因是它已经在事件处理程序中，并且每次更改只调用一次。同样，我们在第二种情况下使用

useffect

的原因是，React可以确保它只调用一次效果

---

为什么要麻烦？React可能会在它喜欢的时候重试呈现组件，并且无论呈现多少次，它都希望相同的状态/道具具有相同的JSX，即，您的组件应该是“纯的”。这可以实现许多性能增强，如悬念，但只要不直接在渲染功能中运行副作用，就不必担心这些问题。

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

const onChange=event=>{
setItem（'myValueInLocalStorage'，event.target.value）；
设置值（event.target.value）；
};

你能发布这篇文章吗？@azium，使用useEffect的主要好处是保持本地存储和组件状态同步。您可能希望以不同的方式更新组件状态（可能一个按钮会重置字段），在这种情况下，您可以复制localStorage逻辑。