一、受控組件
表單元素依賴于狀態，表單元素需要默認值實時映射到狀態的時候，就是受控組件，這個和雙向綁定相似.
受控組件，表單元素的修改會實時映射到狀態值上，此時就可以對輸入的內容進行校驗.
受控組件只有繼承React.Component才會有狀態.
受控組件必須要在表單上使用onChange事件來綁定對應的事件.

import React, { Component } from 'react' export default class Shoukong extends Component {// 這樣的寫法也是聲明在實例上的對象state = {username: "ff",// 給組件狀態設置默認值，在實時修改時進行校驗}// e為原生的事件綁定對象handleChange = (e) => {// 獲取原生對象上的屬性let name = e.target.name;this.setState({username: e.target.value})}render() {return (<div><p>{this.state.username}</p>用戶名：<inputtype="text"value={this.state.username}onChange={this.handleChange} /></div>)} }

受控組件更新state的流程
1、 可以通過初始state中設置表單的默認值
2、每當表單的值發生變化時，調用onChange事件處理器
3、事件處理器通過事件對象event拿到改變后的狀態，并更新組件的state
4、通過setState方法更新state，就會觸發視圖的重新渲染，完成表單組件的更新

二、非受控組件
在虛擬DOM節點上聲明一個ref屬性，并且將創建好的引用賦值給這個ref屬性

react會自動將輸入框中輸入的值放在實例的ref屬性上

import React, { Component } from 'react' export default class Feishou extends Component{ constructor(){super();// 在構造函數中創建一個引用this.myref=React.createRef(); } handleSubmit = (e) => {// 阻止原生默認事件的觸發(刷新)e.preventDefault();console.log(this.myref.current.value); } render() {return (<form onSubmit={this.handleSubmit}>{/* 自動將輸入框中輸入的值放在實例的myref屬性上 */}<inputtype="text"ref={this.myref}/><button>提交</button> {/* 手動提交 */}</form>) } }

非受控組件在底層實現時是在其內部維護了自己的狀態state，這樣表現出用戶輸入任何值都能反應到元素上。

三、對比受控組件和非受控組件的輸入流程：

• 非受控組件： 用戶輸入A => input 中顯示A
• 受控組件： 用戶輸入A => 觸發onChange事件 => handleChange 中設置 state.name = “A” => 渲染input使他的value變成A

正式因為這樣，使得 React 的 state 成為唯一數據源。對于受控組件來說，輸入的值始終由 React 的 state 驅動。

所以官方強烈推薦使用受控組件，因為它能更好的控制組件的生命流程。

注意：
受控組件的兩個要點：
組件的value屬性與React中的狀態綁定
組件內聲明了onChange事件處理value的變化
非受控組件更像是傳統的HTML表單元素，數據存儲在DOM中，而不是組件內部，獲取數據的方式是通過ref引用
?盡可能使用受控組件
受控組件是將狀態交由React處理，可以是任何元素，不局限于表單元素
對于有大量表單元素的頁面，使用受控組件會使程序變得繁瑣難控，此時使用非受控組件更為明智
在受控組件中，數據流是單向的(state是變化來源)，因此在改變state時都應該使用setState，而不要強制賦值
Refs不能用于函數式組件，因為函數式組件沒有實例
在函數式組件內部，是可以使用Refs的?

總結

以上是生活随笔為你收集整理的React的受控组件和非受控组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。