如何将过滤颜色数组的useEffect重构为useMemo以减少重渲染？兼询useMemo是否支持useEffect的全生命周期方法

嘿，我来帮你梳理这两个问题～

一、把过滤逻辑从useEffect重构为useMemo的方法 #

你现在用useEffect监听输入变化，然后更新resultantColors状态变量，每次输入改变都会触发state更新，进而导致组件重渲染。其实这种「基于现有数据计算衍生值」的场景，刚好是useMemo的拿手好戏，咱们可以这么改：

1. 先删掉resultantColors这个状态变量——我们不需要把过滤结果存在state里，直接用useMemo缓存计算结果就行；
2. 把原来useEffect里的过滤逻辑移到useMemo的回调函数中，把search（输入值）和mockColors（原始颜色数组）设为依赖项，只有当这两个值变化时，才会重新计算过滤后的数组。

修改后的代码示例：

import { useState, useMemo } from 'react';

function App() {
  const mockColors = ['white', 'blue', 'yellow', 'red', 'green', 'black'];
  const [search, setSearch] = useState('');

  // 用useMemo缓存过滤结果，避免不必要的重复计算
  const resultantColors = useMemo(() => {
    return mockColors.filter(color => 
      color.toLowerCase().includes(search.toLowerCase())
    );
  }, [search, mockColors]);

  return (
    <div>
      <input 
        type="text"
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        placeholder="搜索颜色..."
      />
      <ul>
        {resultantColors.map((color, idx) => (
          <li key={idx}>{color}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

这样做的好处是：useMemo会把过滤后的数组缓存起来，组件重渲染时，如果search和mockColors都没变化，就直接用缓存的结果，不用重新执行过滤逻辑，也不会因为更新state导致额外的重渲染，完美达到减少重渲染的目的。

二、useMemo是否支持useEffect的全生命周期方法？ #

No

useMemo和useEffect的定位完全不同：useMemo是用来缓存纯计算结果的，它不处理副作用，也没有生命周期相关的能力。useEffect可以通过空依赖数组模拟componentDidMount，通过返回清理函数模拟componentWillUnmount，但useMemo做不到这些——它只会在依赖项变化时重新计算，既没有挂载时的专属执行逻辑，也没有清理机制。如果需要处理订阅、数据请求这类副作用，还是得老老实实用useEffect，useMemo只适合纯计算的场景哦。

备注：内容来源于stack exchange，提问作者Prakash Ravichandran