javascript 如何调用useState react钩子的多个setter函数而不重新渲染?

xytpbqjk  于 2022-10-30  发布在  Java
关注(0)|答案(2)|浏览(117)

我想在某个事件被触发时同时调用多个setter函数。
例如:

const [running, setRunning] = useState(false);
const [jumping, setJumping] = useState(true);

那么,如果我们想将setRunningsetJumping合并在一起,我们应该怎么做?(避免重新呈现组件)

fnx2tebb

fnx2tebb1#

您可以按顺序调用它们,如下所示(demo):

const Comp = ({ flag }) => {
  const [running, setRunning] = useState(false);
  const [jumping, setJumping] = useState(false);

  const setBoth = () => {
    setRunning(true);
    setJumping(true);
  };

  return (
    <>
      {"running: " + running}
      {"jumping: " + jumping}
      <button onClick={() => setBoth()}>setboth</button>
    </>
  );
};

或者,您也可以同时设定这两个参数,如下所示:

const Comp = ({ flag }) => {
  const [RJ, setRJ] = useState([false, false]);

  const setBoth = () => {
    setRJ([true, true]);
  };

  return (
    <>
      {"running: " + RJ[0]}
      {"jumping: " + RJ[1]}
      <button onClick={() => setBoth()}>setboth</button>
    </>
  );
};

https://codesandbox.io/s/0pwnm2z94w

6tdlim6h

6tdlim6h2#

这是一个很好的问题,因为它挑战了为每个状态片设置一个setState的最佳实践。
最好的方法是创建一个有两个关键字的POJO(显式),一个用于跑,一个用于跳。这样,setter将有3个排列。

  • 设定只是跳跃
  • 设置仅运行
  • 同时设定
const [actions, setActions] = useState({running: false, jumping: false});
const { jumping, running } = actions;

我不认为这是一个最好的做法,你应该尽可能地把它们分开,以避免这种模式。然而,这是一个值得合并它们以保存渲染的例子(这可能是可取的)。

相关问题