时间戳

首页 > 解决方案 > 在文本字段元素上使用 onChange 事件和 useState 的最有效方法是什么

reactjs - 在文本字段元素上使用 onChange 事件和 useState 的最有效方法是什么

问题描述

代码示例；

<TextField id="name" onChange={(e: any) => setName(e.target.value)} value={name}> </TextField>

在这种情况下; 当我按下任何字符时，TextField 是否会重新呈现？还是只是价值在改变？

如果元素本身将被重新渲染，这是最好的方法吗？

注意：我将 name 设置为 value，因为我有一个表单，如果我回到屏幕，我想将 state value 设置为 TextField 值。

标签： reactjsuse-state

解决方案

如果该组件的 props 没有更改，您可能需要将有状态的组件分成更小的组件以避免重新渲染。

如果所有单个<TextField>元素都在一个大的父组件中，React 每次都需要比较整个表单的请求 UI 结构。

此外，使用React DevTools -> Profiler查看哪些部分运行缓慢。

而且，React DevTools -> Components -> Settings -> Highlight updates when components render。

推荐阅读