javascript - React 中的变更检测

Question

我想在某些数据发生变化时执行副作用，例如

const useSearchResults = () => {
  const location = useLocation();
  const [data, setData] = useState();
  useEffect(() => {
    Api.search(location.query.q).then(data => setData(data));
  }, [location.query.q]);

  // Compute some derived data from `data`.
  const searchResults =
    data &&
    data.map(item => ({
      id: item.id,
      name: `${item.firstName} ${item.lastName}`
    }));

  return searchResults;
};

const Component = () => {
  const searchResults = useSearchResults();
  useEffect(() => {
    alert('Search results have changed'); // Side-effect
  }, [searchResults]);
  return <pre>{JSON.stringify(searchResults)}</pre>;
};

如果某些事情导致 Component 重新渲染，即使 searchResults 没有改变，alert 也会触发，因为我们映射了useSearchResults 中的底层稳定数据在每次渲染时创建一个新实例。

我最初的方法是使用 useMemo:

  // Stabilise `searchResults`'s identity with useMemo.
  const searchResults = useMemo(
    () =>
      data &&
      data.map(item => ({
        id: item.id,
        name: `${item.firstName} ${item.lastName}`
      })),
    [data]
  );

但是useMemo has no semantic guarantee所以它(理论上)只对性能优化有好处。

React 是否为这个(常见的？)问题提供了直接的解决方案？

Answer 1

如果副作用不会重新运行非常重要，您可以将比较建立在深度相等性检查的基础上。我们希望看到搜索结果实际上是不同的结果，而不仅仅是具有相同结果的新数组。

usePrevious Hook 有多种实现可供您使用，但基本上它只是一个ref。将以前版本的搜索结果保存到 ref。当您的效果运行时，查看当前结果是否与之前的结果不同。如果是，请执行您的副作用并将之前的更新为当前的。

const Component = () => {
  const searchResults = useSearchResults();

  // create ref for previous
  const comparisonRef = useRef('');

  useEffect(() => {
    // stringify to compare
    if ( JSON.stringify(searchResults) !== JSON.stringify(comparisonRef.current) ) {
       // run side effect only if true
       alert('Search results have changed');
       // update the ref for the next check
       comparisonRef.current = searchResults;
    }
  }, [searchResults, comparisonRef]);

  return <pre>{JSON.stringify(searchResults)}</pre>;
};