每次更新 React 中的輸入或文本區域時，onChange 事件處理程序是否會重新呈現組件？

Question

我正在開發一個 React 應用程序，我想使用事件處理程序 onChange 存儲文本區域的內容。 但是，據我所知，每次更新組件 state 時，都會重新渲染組件。

這是否意味着組件將使用我添加到 textarea 內容的每個新字符重新呈現？ 如果是這樣，從性能的角度來看，這將是極其低效的。 最有效的方法是什么？

Answer 1

是的，每次道具或 state 更改時都會重新渲染組件。 這就是 React 的工作方式。 從性能的角度來看效率低下？ 從https://reactjs.org/docs/rendering-elements.html ：

與瀏覽器 DOM 元素不同，React 元素是普通對象，而且創建起來很便宜。 React DOM 負責更新 DOM 以匹配 React 元素。

創建或更新 DOM 元素成本更高，但重新渲染組件或更改組件的 state 或 props 並不意味着更改 DOM 元素：

React 只更新必要的東西

React DOM 將元素及其子元素與前一個元素進行比較，並且僅應用必要的 DOM 更新以將 DOM 帶到所需的 state。

所以，不要擔心更新 state 或道具的成本，大多數情況下都是矯枉過正，以避免 state 更新。