小编点评

**如何编写难以维护的React代码？** **滥用useEffect钩子** * 滥用 `useEffect` 钩子，尤其是用于处理衍生状态。 * `useEffect` 函数的依赖列表过大，导致重复触发。 **示例：** ```javascript const ComponentA = ({ list }) => { const [filteredList, setFilteredList] = useState(list); const [filter, setFilter] = useState({}); useEffect(() => { setFilteredList(_.filter(list, filter)); }, [filter]); // ... }; ``` **改进方案：** * 使用 `useMemo` 来计算衍生状态。 * 使用 `useEffect` 的依赖列表，只在必要时触发。 **示例改进：** ```javascript const ComponentB = ({ list }) => { const [filter, setFilter] = useState({}); const filteredList = useMemo(() => _.filter(list, filter), [list, filter]); useEffect(() => { setFilter(...filteredList); }, [list, filter]); // ... }; ``` **其他技巧：** * 使用 `useMemo` 和 `useEffect` 的组合来优化性能。 * 使用 `context` 或 `props` 来共享状态。 * 使用 `shouldComponentUpdate` 方法进行组件渲染优化。

正文

如何编写难以维护的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.

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