Question

我有一些状态和功能，可以使用useState挂钩设置状态。

每个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返回语句重新呈现该元素。我不想在每个setA，setB，setC等上重新渲染。func1或func2完全完成后，只想重新渲染组件。作为钩子的新手，有人可以帮忙吗？

Answer 1

您可以将所有变量存储在一种状态下，如下所示：

const [state,setState] = useState({ a:false, b:{}, c:props.c,d:null})

const func1 = useCallback(data => {
setstate({a:true,b:true,c:data && data.c,d:null})
}, []);

Answer 2

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

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',
    }),
  [],
);

使用react usestate挂钩防止为每个setstate重新渲染

2 个答案: