`useState`，仅在对象中的值更改时更新组件

Question

问题

useState 总是触发更新，即使数据的值没有改变。

这是该问题的工作演示：demo

背景

我正在使用useState 挂钩来更新一个对象，并且我试图让它仅在该对象中的值发生变化时才更新。因为 React 使用Object.is 比较算法来确定何时应该更新；具有等效值的对象仍然会导致组件重新渲染，因为它们是不同的对象。

例如。即使有效载荷的值保持为{ foo: 'bar' }，此组件也将始终重新渲染

const UseStateWithNewObject = () => {
  const [payload, setPayload] = useState({});
  useEffect(
    () => {
      setInterval(() => {
        setPayload({ foo: 'bar' });
      }, 500);
    },
    [setPayload]
  );

  renderCountNewObject += 1;
  return <h3>A new object, even with the same values, will always cause a render: {renderCountNewObject}</h3>;
};

问题

我是否可以用钩子实现类似shouldComponentUpdate 的东西来告诉react 只在数据更改时重新渲染我的组件？

Answer 1

我认为我们需要看到一个更好的现实生活示例来说明您要做什么，但从您分享的内容来看，我认为逻辑需要在状态设置之前向上游移动。

例如，您可以在更新状态之前手动比较 useEffect 中的传入值，因为这基本上是您询问 React 是否可以为您做的事情。

在这种情况下，有一个库 use-deep-compare-effect https://github.com/kentcdodds/use-deep-compare-effect 可能对您有用，它会处理大量涉及的手动工作，但即便如此，此解决方案仍假定开发人员将手动决定 (基于传入的道具等）是否应该更新状态。

例如：

const obj = {foo: 'bar'}
const [state, setState] = useState(obj)

useEffect(() => {
   // manually deep compare here before updating state
   if(obj.foo === state.foo) return
   setState(obj)
},[obj])

编辑：使用useRef 的示例，如果您不直接使用该值并且不需要组件基于它进行更新：

const obj = {foo: 'bar'}
const [state, setState] = useState(obj)

const { current: payload } = useRef(obj)

useEffect(() => {
    // always update the ref with the current value - won't affect renders
    payload = obj

    // Now manually deep compare here and only update the state if 
    //needed/you want a re render
    if(obj.foo === state.foo) return
    setState(obj)
},[obj])

Answer 2

我是否可以实现类似 shouldComponentUpdate 之类的带有钩子的东西，以告诉 react 仅在数据更改时重新渲染我的组件？

通常，对于状态更改，您在使用功能 useState 或使用 useRef 的引用之前与之前的值进行比较：

// functional useState
useEffect(() => {
  setInterval(() => {
    const curr = { foo: 'bar' };
    setPayload(prev => (isEqual(prev, curr) ? prev : curr));
  }, 500);
}, [setPayload]);

// with ref
const prev = useRef();
useEffect(() => {
  setInterval(() => {
    const curr = { foo: 'bar' };
    if (!isEqual(prev.current, curr)) {
      setPayload(curr);
    }
  }, 500);
}, [setPayload]);

useEffect(() => {
  prev.current = payload;
}, [payload]);

---

为了完整起见，“当数据更改时重新渲染我的组件？”也可能被称为道具，所以在这种情况下，你应该使用React.memo。

如果你的函数组件在给定相同的 props 的情况下呈现相同的结果，你可以将它包装在对 React.memo 的调用中，以便在某些情况下通过记忆结果来提高性能。这意味着 React 将跳过渲染组件，并重用上次渲染的结果。

Answer 3

如果我理解得很好，您会尝试仅在状态的新值发生更改时调用setState，从而防止在未更改时进行不必要的重新渲染。

如果是这种情况，您可以利用 useState 的回调形式

const [state, setState] = useState({});
setState(prevState => {
  // here check for equality and return prevState if the same
  return {...prevState, ...updatedValues};
});

这是一个自定义钩子（在 TypeScript 中），它会自动为您完成这项工作。它使用来自 lodash 的isEqual。但请随意用您认为合适的任何相等函数替换它。

import { isEqual } from 'lodash';
import { useState } from 'react';

const useMemoizedState = <T>(initialValue: T): [T, (val: T) => void] => {
  const [state, _setState] = useState<T>(initialValue);

  const setState = (newState: T) => {
    _setState((prev) => {
      if (!isEqual(newState, prev)) {
        return newState;
      } else {
        return prev;
      }
    });
  };

  return [state, setState];
};

export default useMemoizedState;

用法：

const [value, setValue] = useMemoizedState('some initial value');

Answer 4

不涉及向效果添加逻辑的通用解决方案是将组件拆分为：

• 不受控制的容器，其状态呈现...
• 已用React.memo 记忆的哑控无状态组件

你的哑组件可以是纯的（就像它实现了shouldComponentUpdate 一样，你的智能状态处理组件可以是“哑”的，不用担心将状态更新为相同的值。

例子：

之前

export default function Foo() {
  const [state, setState] = useState({ foo: "1" })
  const handler = useCallback(newValue => setState({ foo: newValue }))

  return (
    <div>
      <SomeWidget onEvent={handler} />
      Value: {{ state.foo }}
    </div>
  )

之后

const FooChild = React.memo(({foo, handler}) => {
  return (
    <div>
      <SomeWidget onEvent={handler} />
      Value: {{ state.foo }}
    </div>
  )
})

export default function Foo() {
  const [state, setState] = useState({ foo: "1" })
  const handler = useCallback(newValue => setState({ foo: newValue }))

  return <FooChild handler={handler} foo={state.foo} />
}

这为您提供了您正在寻找的逻辑的分离。

Answer 5

您可以使用记忆化组件，它们只会在道具更改时重新渲染。

const comparatorFunc = (prev, next) => {
  return prev.foo === next.foo
}

const MemoizedComponent = React.memo(({payload}) => {
    return (<div>{JSON.stringify(payload)}</div>)
}, comparatorFunc);