每次在 React 中更新输入或文本区域时,onChange 事件处理程序是否会重新渲染组件?
Does onChange event handler rerender the component every time you update an input or textarea in React?
我正在开发一个 React 应用程序,我想使用事件处理程序 onChange 来存储文本区域的内容。然而,据我所知,每次状态更新时,React 都会重新渲染一个组件。
这是否意味着组件将随着我添加到文本区域内容中的每个新字符而重新呈现?如果是这样,从性能的角度来看,这将是极其低效的。最有效的方法是什么?
是的,每次 props 或 state 改变时组件都会被重新渲染。这就是 React 的工作方式。从性能角度来看效率低下?来自 https://reactjs.org/docs/rendering-elements.html :
Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements.
创建或更新 DOM 元素更昂贵,但重新渲染组件或更改组件的状态或道具并不意味着更改 DOM 元素:
React Only Updates What’s Necessary
React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.
所以,不用担心更新 state 或 props 的成本,大多数情况下都是为了避免 state 更新而矫枉过正。
我正在开发一个 React 应用程序,我想使用事件处理程序 onChange 来存储文本区域的内容。然而,据我所知,每次状态更新时,React 都会重新渲染一个组件。
这是否意味着组件将随着我添加到文本区域内容中的每个新字符而重新呈现?如果是这样,从性能的角度来看,这将是极其低效的。最有效的方法是什么?
是的,每次 props 或 state 改变时组件都会被重新渲染。这就是 React 的工作方式。从性能角度来看效率低下?来自 https://reactjs.org/docs/rendering-elements.html :
Unlike browser DOM elements, React elements are plain objects, and are cheap to create. React DOM takes care of updating the DOM to match the React elements.
创建或更新 DOM 元素更昂贵,但重新渲染组件或更改组件的状态或道具并不意味着更改 DOM 元素:
React Only Updates What’s Necessary
React DOM compares the element and its children to the previous one, and only applies the DOM updates necessary to bring the DOM to the desired state.
所以,不用担心更新 state 或 props 的成本,大多数情况下都是为了避免 state 更新而矫枉过正。