reactjs - 使用 react usestate hook 防止为每个 setstate 重新渲染

Question

我有一些多个状态和函数来使用 useState 钩子(Hook)设置状态。

在每个 setstate 组件上重新渲染。我只想重新渲染完全完成的 setstate 功能。

例如:

在 app.js 中

const [a, setA] = useState(() => false);
const [b, setB] = useState(() => {});
const [c, setC] = useState(() => props.c);
const [d, setD] = useState(null);
const [e, setE] = useState(null);
const [f, setF] = useState(null);
const [g, setG] = useState('');

const func1 = useCallback(data => {
  setA(true);
  setB(true);
  setC(data && data.c);
  setD();
  setE(isChecked ? 'a' : 'b');
}, []);

const func2 = useCallback(data => {
  setA(false);
  setB(false);
}, []);

const func3 = useCallback(data => {
  setC(false);
  setD(false);
}, []);

const events = {
  func1,
  func2,
  func3
};

const handleMessage = e => {
  const { eventName, data } = e.data;
  const handleEvents = eventName ? events[toCamel(eventName)] : null;
  if (handleEvents && typeof handleEvents === 'function') {
    handleEvents(data);
  }
};

useLayoutEffect(() => {
  iframe.addEventListener('message', handleMessage, true);
  return () => {
    iframe.removeEventListener('message', handleMessage, true);
  };
}, []);

return (
 <Fragment>
  {a && (
    Component1
  )}
  {b && c && (
    Component2
  )}
</Fragment>

);

在每个 func1 和 func2 setA 和 setB return 语句上重新渲染元素。我不想在每个 setA、setB、setC 等上重新渲染。一旦 func1 或 func2 完全完成，只想重新渲染组件。作为钩子(Hook)的新手，有人可以帮忙吗？

Answer 1

如果您的状态值如此紧密地联系在一起，并且您想确保所有内容都立即更新:

const [state, setState] = useState({
  a: () => false,
  b: () => {},
  c: () => props.c,
  d: null,
  e: null,
  f: null,
  g: ''
});

const updateState = newState => setState(Object.assign({}, state, newState));

现在当你想更新你的状态时，只需使用 updateState像这样:

const func1 = useCallback(
  (data) =>
    updateState({
      a: true,
      b: true,
      c: data && data.c,
      d: undefined,
      e: isChecked ? 'a' : 'b',
    }),
  [],
);