如何使用 useState 挂钩更新状态而不重新渲染

Posted 2023-02-22

【中文标题】如何使用 useState 挂钩更新状态而不重新渲染

【英文标题】：How to update a state without re-rendering using useState hook

【发布时间】：2022-01-17 13:37:11

【问题描述】：

我有一个函数onCondChange，只要用户更改TextField 中的值，就会调用它。

const onCondChange = (conds) => 
    updateState(
      ...state,
      a:  ...state.a, conds ,
      b: ++state.b,
    )
  

在这里，我在 a 中添加 conds 对象，类似这样

"a": 
        "status": "ACTIVE",
        "conds": "\"rules... (something)...""
    

这里是 useState 钩子：-

const [state, updateState] = useState(
    temp: false,
    temp2: true,
    a: 
      status: test ? '' : ACTIVE
    ,
    b: 0,
  );

问题在于，每当我更改 TextField 中的值时，都会调用 onCondChange，它会创建另一个重复对象并通过在其中添加 conds 来更新 a。这使得重新渲染我想要停止的组件。我应该如何在不重新渲染的情况下添加 conds 对象？ 问题是 TextField 由于重新渲染而失去了焦点。当我评论 a: ...state.a, conds 行时，焦点并没有丢失，但是我无法在 a 中添加 conds 对象

【问题讨论】：

您为什么认为“这会导致重新渲染页面”？ - 如果虚拟 DOM 认为它没有被更改，它会重新渲染组件，不是页面。组件重新渲染不是问题，除非它与实际渲染需求相比发生了太多。

问题/疑问不清楚。您能否提供更具体的代码示例和示例状态？ (***.com/help/minimal-reproducible-example) 这主要是 React 的工作原理……更新状态，触发重新渲染。

"问题是 TextField 由于重新渲染而失去焦点。当我评论 a: ...state.a, conds 行时，焦点并没有丢失，但是我无法添加 conds 对象在 a" 内部 - 我想我们需要查看保持此状态的组件并呈现文本字段以提供更多帮助，以说明它可能失去焦点的原因。

【参考方案1】：

如果您的问题是失去文本字段的焦点而不是重新渲染。 然后你可以使用 useRef()钩子设置焦点。 点击这里https://reactjs.org/docs/hooks-reference.html#useref了解更多信息。

function TextField() 
  const inputRef = useRef(null);
  // you must give dependacy array to useEffect.
   useEffect(()=>
    inputRef.current.focus();
  )
 return (
    <>
      <input ref=inputRef type="text" />
    </>
  );