如何编写难以维护的React代码？——滥用useEffect

如何编写难以维护的React代码？——滥用useEffect

在许多项目中，我们经常会遇到一些难以维护的React代码。其中一种常见的情况是滥用useEffect钩子，特别是在处理衍生状态时。让我们来看一个例子：

const ComponentA = ({ list }) => {
  const [filteredList, setFilteredList] = useState(list);
  const [filter, setFilter] = useState({});
 
  useEffect(() => {
    setFilteredList(_.filter(list, filter));
  }, [filter]);
 
  /*...*/
 
  return (
    <>
      {/*...*/}
      <Filter filter={filter} onChange={setFilter} />
      <List data={filteredList} />
      {/*...*/}
    </>
  );
};

事实上，filteredList 是一个衍生状态，可以通过计算 list 和 filter 得出：list + filter => filteredList。所以可以优化成这样：

const ComponentB = ({ list }) => {
  const [filter, setFilter] = useState({});
  const filteredList = useMemo(() => _.filter(list, filter), [list, filter]);
 
  /*...*/
 
  return (
    <>
      {/*...*/}
      <Filter filter={filter} onChange={setFilter} />
      <List data={filteredList} />
      {/*...*/}
    </>
  );
};

在改进后的代码中，我们使用了 useMemo 来计算 filteredList，这样可以避免滥用 useState 和 useEffect。通过传入依赖数组 [list, filter]，只有在 list 或 filter 发生变化时，才会重新计算 filteredList，从而优化性能。

减少状态的使用可以有助于降低代码的复杂性，减少潜在的错误。使用 useMemo 可以将计算逻辑从渲染过程中抽离出来，使代码更易于维护和理解。Less States, Less Bugs.

总结：简洁且高效的代码是开发者的追求目标，它不仅有助于减少错误，而且在项目的长期维护中也更容易被团队成员理解与修改。