React中如何實現(xiàn)受控組件與非受控組件
啥是 React 里的受控組件和非受控組件
在 React 開發(fā)里，組件可分為受控組件和非受控組件，它們處理表單數(shù)據(jù)的方式各有不同。接下來咱就用通俗易懂的大白話詳細說說它們的實現(xiàn)原理、方法、區(qū)別、作用和應用場景。
受控組件
受控組件就像是一個被人緊緊牽著線的風箏，它的數(shù)據(jù)完全由 React 組件來控制。也就是說，表單元素的值是由 React 組件的狀態(tài)來決定的，表單元素的任何變化都會觸發(fā) React 組件的狀態(tài)更新。
以下是一個簡單的受控組件示例：
import React, { useState } from 'react';
// 定義一個名為 ControlledInput 的函數(shù)組件
function ControlledInput() {
// 使用 useState 鉤子創(chuàng)建一個名為 value 的狀態(tài)變量，初始值為空字符串
const [value, setValue] = useState('');
// 定義一個名為 handleChange 的函數(shù)，用于處理輸入框的值變化事件
const handleChange = (event) => {
// 通過 event.target.value 獲取輸入框的最新值，并使用 setValue 更新狀態(tài)
setValue(event.target.value);
};
// 渲染一個輸入框，將 value 狀態(tài)綁定到輸入框的 value 屬性上
// 當輸入框的值發(fā)生變化時，調用 handleChange 函數(shù)更新狀態(tài)
return (
<div>
<input
type="text"
value={value}
onChange={handleChange}
/>
<p>你輸入的內容是: {value}</p>
</div>
);
}
export default ControlledInput;
實現(xiàn)原理
受控組件的實現(xiàn)原理基于 React 的單向數(shù)據(jù)流。表單元素的值由 React 組件的狀態(tài)來控制，當表單元素的值發(fā)生變化時，會觸發(fā)一個事件處理函數(shù)，在這個函數(shù)里更新組件的狀態(tài)，從而更新表單元素的值。
方法
用 useState 鉤子或者類組件的 this.state 來創(chuàng)建一個狀態(tài)變量，用于存放表單元素的值。
把狀態(tài)變量綁定到表單元素的 value 屬性上。
給表單元素添加一個 onChange 事件處理函數(shù)，在函數(shù)里更新狀態(tài)變量。
作用和應用場景
受控組件適合需要實時驗證用戶輸入、根據(jù)用戶輸入動態(tài)更新 UI 或者與其他組件共享表單數(shù)據(jù)的場景。比如登錄表單、搜索框等。
非受控組件
非受控組件就像是一只自由飛翔的鳥，它的數(shù)據(jù)由 DOM 自己來管理。也就是說，表單元素的值是由 DOM 來維護的，React 組件只能在需要的時候從 DOM 里獲取表單元素的值。
下面是一個簡單的非受控組件示例：
import React, { useRef } from 'react';
// 定義一個名為 UncontrolledInput 的函數(shù)組件
function UncontrolledInput() {
// 使用 useRef 鉤子創(chuàng)建一個名為 inputRef 的引用對象
const inputRef = useRef(null);
// 定義一個名為 handleSubmit 的函數(shù)，用于處理表單提交事件
const handleSubmit = (event) => {
// 阻止表單的默認提交行為
event.preventDefault();
// 通過 inputRef.current.value 獲取輸入框的值
const value = inputRef.current.value;
// 打印輸入框的值
console.log('你輸入的內容是:', value);
};
// 渲染一個表單，包含一個輸入框和一個提交按鈕
// 將 inputRef 引用對象綁定到輸入框的 ref 屬性上
// 當表單提交時，調用 handleSubmit 函數(shù)
return (
<form onSubmit={handleSubmit}>
<input
type="text"
ref={inputRef}
/>
<button type="submit">提交</button>
</form>
);
}
export default UncontrolledInput;
實現(xiàn)原理
非受控組件的實現(xiàn)原理是借助 React 的 ref 來訪問 DOM 元素。通過 ref 可以直接獲取 DOM 元素的屬性和方法，從而在需要的時候獲取表單元素的值。
方法
用 useRef 鉤子或者類組件的 createRef 方法創(chuàng)建一個 ref 對象。
把 ref 對象綁定到表單元素的 ref 屬性上。
在需要的時候，通過 ref 對象的 current 屬性來訪問 DOM 元素，進而獲取表單元素的值。
作用和應用場景
非受控組件適合那些只需要在表單提交時獲取表單數(shù)據(jù)，或者與第三方庫集成的場景。比如文件上傳表單、簡單的表單提交等。
區(qū)別
- 數(shù)據(jù)控制：受控組件的數(shù)據(jù)由 React 組件的狀態(tài)控制，非受控組件的數(shù)據(jù)由 DOM 自己管理。
- 事件處理：受控組件需要為表單元素添加 onChange 事件處理函數(shù)來更新狀態(tài)，非受控組件不需要處理表單元素的值變化事件。
- 數(shù)據(jù)獲?。菏芸亟M件可以隨時獲取表單元素的值，非受控組件只能在需要的時候通過 ref 來獲取表單元素的值。
綜上所述，受控組件和非受控組件各有優(yōu)劣，你要根據(jù)具體的需求來選擇合適的組件類型。
受控組件和非受控組件適用場景
在React中，受控組件和非受控組件分別適用于哪些場景？
在 React 里，受控組件和非受控組件各有特點，適用于不同的應用場景，下面為你詳細介紹：
受控組件適用場景
1. 實時驗證用戶輸入
當你需要對用戶輸入的數(shù)據(jù)進行實時驗證時，受控組件是很好的選擇。因為受控組件可以在每次輸入變化時觸發(fā)狀態(tài)更新，從而能及時對輸入內容進行檢查。
比如，在一個注冊表單里，要求用戶輸入的密碼長度至少為 6 位，一旦用戶輸入的內容發(fā)生變化，就可以立即檢查密碼長度是否符合要求，并給出相應提示。
import React, { useState } from 'react';
function PasswordInput() {
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const handleChange = (e) => {
const newPassword = e.target.value;
setPassword(newPassword);
if (newPassword.length < 6) {
setError('密碼長度至少為 6 位');
} else {
setError('');
}
};
return (
<div>
<input
type="password"
value={password}
onChange={handleChange}
/>
{error && <p style={{ color: 'red' }}>{error}</p>}
</div>
);
}
export default PasswordInput;
2. 根據(jù)輸入動態(tài)更新 UI
如果需要根據(jù)用戶的輸入動態(tài)更新頁面的其他部分，受控組件可以方便地實現(xiàn)這一功能。因為組件狀態(tài)的變化可以直接反映到 UI 上。
例如，一個搜索框，用戶輸入關鍵詞后，頁面上會實時顯示與關鍵詞匹配的搜索結果。
import React, { useState } from 'react';
const data = ['apple', 'banana', 'cherry', 'date'];
function SearchInput() {
const [searchTerm, setSearchTerm] = useState('');
const handleChange = (e) => {
setSearchTerm(e.target.value);
};
const filteredData = data.filter(item =>
item.toLowerCase().includes(searchTerm.toLowerCase())
);
return (
<div>
<input
type="text"
value={searchTerm}
onChange={handleChange}
placeholder="搜索..."
/>
<ul>
{filteredData.map(item => (
<li key={item}>{item}</li>
))}
</ul>
</div>
);
}
export default SearchInput;
3. 多表單元素聯(lián)動
當多個表單元素之間存在聯(lián)動關系時，受控組件可以更好地管理它們之間的數(shù)據(jù)交互。通過更新狀態(tài)，可以同時更新多個表單元素的值。
例如，一個包含省份和城市選擇的表單，當用戶選擇不同的省份時，城市下拉列表會相應地更新。
import React, { useState } from 'react';
const provinceCityMap = {
'廣東': ['廣州', '深圳', '珠海'],
'江蘇': ['南京', '蘇州', '無錫']
};
function ProvinceCitySelector() {
const [province, setProvince] = useState('');
const [city, setCity] = useState('');
const handleProvinceChange = (e) => {
const newProvince = e.target.value;
setProvince(newProvince);
setCity('');
};
const handleCityChange = (e) => {
setCity(e.target.value);
};
return (
<div>
<select value={province} onChange={handleProvinceChange}>
<option value="">請選擇省份</option>
{Object.keys(provinceCityMap).map(p => (
<option key={p} value={p}>{p}</option>
))}
</select>
<select value={city} onChange={handleCityChange} disabled={!province}>
<option value="">請選擇城市</option>
{province && provinceCityMap[province].map(c => (
<option key={c} value={c}>{c}</option>
))}
</select>
</div>
);
}
export default ProvinceCitySelector;
非受控組件適用場景
1. 簡單表單提交
在一些簡單的表單場景中，只需要在表單提交時獲取表單數(shù)據(jù)，而不需要實時跟蹤輸入變化，非受控組件可以減少代碼復雜度。
例如，一個簡單的留言表單，用戶填寫完內容后點擊提交按鈕，將數(shù)據(jù)發(fā)送到服務器。
import React, { useRef } from 'react';
function MessageForm() {
const messageRef = useRef(null);
const handleSubmit = (e) => {
e.preventDefault();
const message = messageRef.current.value;
console.log('留言內容:', message);
};
return (
<form onSubmit={handleSubmit}>
<textarea ref={messageRef} />
<button type="submit">提交留言</button>
</form>
);
}
export default MessageForm;
2. 與第三方庫集成
當需要與一些第三方表單庫或插件集成時，非受控組件可以更方便地與這些庫進行交互。因為第三方庫通常是基于 DOM 操作的，使用 ref 可以直接訪問 DOM 元素。
例如，使用一個第三方的富文本編輯器，通過 ref 可以方便地獲取編輯器中的內容。
import React, { useRef, useEffect } from 'react';
// 假設這是一個第三方富文本編輯器庫
import RichTextEditor from 'some-rich-text-editor-library';
function RichTextInput() {
const editorRef = useRef(null);
useEffect(() => {
const editor = new RichTextEditor(editorRef.current);
// 可以在這里進行更多的編輯器初始化配置
}, []);
const handleSubmit = (e) => {
e.preventDefault();
const content = editorRef.current.getValue();
console.log('富文本內容:', content);
};
return (
<form onSubmit={handleSubmit}>
<div ref={editorRef} />
<button type="submit">提交內容</button>
</form>
);
}
export default RichTextInput;
3. 文件上傳
在文件上傳場景中，使用非受控組件可以更方便地獲取用戶選擇的文件。因為文件輸入框的值不能通過狀態(tài)來控制，使用 ref 可以直接訪問文件輸入框的 files 屬性。
import React, { useRef } from 'react';
function FileUpload() {
const fileInputRef = useRef(null);
const handleSubmit = (e) => {
e.preventDefault();
const file = fileInputRef.current.files[0];
if (file) {
console.log('選擇的文件:', file.name);
}
};
return (
<form onSubmit={handleSubmit}>
<input type="file" ref={fileInputRef} />
<button type="submit">上傳文件</button>
</form>
);
}
export default FileUpload;
React vue受控組件與非受控組件區(qū)別
那么，與vue受控組件和非受控組件的區(qū)別
整體概念差異不大，但實現(xiàn)方式有別
在 React 和 Vue 中，受控組件和非受控組件的核心概念類似，但在具體實現(xiàn)、語法和使用習慣上存在明顯差異。
受控組件
React 受控組件
在 React 里，受控組件的數(shù)據(jù)完全由 React 組件的狀態(tài)控制。表單元素的值取決于狀態(tài)，并且任何變化都會觸發(fā)狀態(tài)更新。
import React, { useState } from 'react';
function ReactControlledInput() {
// 創(chuàng)建一個狀態(tài)變量來存儲輸入框的值，初始為空
const [value, setValue] = useState('');
// 處理輸入框變化的函數(shù)
const handleChange = (e) => {
// 更新狀態(tài)變量
setValue(e.target.value);
};
return (
<div>
{/* 輸入框的值綁定到狀態(tài)變量，變化時觸發(fā) handleChange 函數(shù) */}
<input type="text" value={value} onChange={handleChange} />
<p>輸入內容: {value}</p>
</div>
);
}
export default ReactControlledInput;Vue 受控組件
在 Vue 中，受控組件通常使用 v-model 指令來實現(xiàn)雙向數(shù)據(jù)綁定。v-model 是一個語法糖，它結合了 :value 和 @input 事件。
<template>
<div>
<!-- 使用 v-model 實現(xiàn)雙向數(shù)據(jù)綁定 -->
<input v-model="value" />
<p>輸入內容: {{ value }}</p>
</div>
</template>
???????<script>
export default {
data() {
// 定義一個數(shù)據(jù)屬性來存儲輸入框的值，初始為空
return {
value: ''
};
}
};
</script>區(qū)別總結
- 語法方面：React 需手動綁定 value 屬性和 onChange 事件處理函數(shù)，而 Vue 用 v-model 指令就能實現(xiàn)雙向數(shù)據(jù)綁定，語法更簡潔。
- 數(shù)據(jù)流向：React 是單向數(shù)據(jù)流，通過事件處理函數(shù)更新狀態(tài)；Vue 的 v-model 是雙向數(shù)據(jù)綁定，修改表單元素的值會自動更新數(shù)據(jù)，反之亦然。
非受控組件
React 非受控組件
在 React 中，非受控組件通過 ref 來訪問 DOM 元素，從而獲取表單元素的值。
import React, { useRef } from 'react';
function ReactUncontrolledInput() {
// 創(chuàng)建一個 ref 對象
const inputRef = useRef(null);
// 處理表單提交的函數(shù)
const handleSubmit = (e) => {
e.preventDefault();
// 通過 ref 獲取輸入框的值
const value = inputRef.current.value;
console.log('輸入內容:', value);
};
return (
<form onSubmit={handleSubmit}>
{/* 將 ref 綁定到輸入框 */}
<input type="text" ref={inputRef} />
<button type="submit">提交</button>
</form>
);
}
export default ReactUncontrolledInput;Vue 非受控組件
在 Vue 里，非受控組件可通過 ref 來訪問 DOM 元素。不過，Vue 更強調數(shù)據(jù)驅動，使用非受控組件的場景相對較少。
<template>
<form @submit.prevent="handleSubmit">
<!-- 給輸入框添加 ref -->
<input type="text" ref="inputRef" />
<button type="submit">提交</button>
</form>
</template>
???????<script>
export default {
methods: {
handleSubmit() {
// 通過 $refs 獲取輸入框的值
const value = this.$refs.inputRef.value;
console.log('輸入內容:', value);
}
}
};
</script>區(qū)別總結
- 語法方面：React 使用 useRef 鉤子創(chuàng)建 ref 對象，而 Vue 直接在模板中使用 ref 屬性，在腳本里通過 this.$refs 來訪問。
- 使用頻率：React 里非受控組件的使用較為常見，而 Vue 更傾向于使用數(shù)據(jù)驅動的方式，非受控組件的使用場景相對較少。
綜上所述，React 和 Vue 在受控組件和非受控組件的實現(xiàn)上各有特點，你可以根據(jù)項目需求和個人習慣來選擇合適的方式。
到此這篇關于React中如何實現(xiàn)受控組件與非受控組件的文章就介紹到這了,更多相關React受控組件與非受控組件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了useReducer使用詳解及其應用場景,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
詳解react、redux、react-redux之間的關系
這篇文章主要介紹了詳解react、redux、react-redux之間的關系，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
react中value與defaultValue的區(qū)別及說明
這篇文章主要介紹了react中value與defaultValue的區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
React入門教程之Hello World以及環(huán)境搭建詳解
Facebook 為了開發(fā)一套更好更適合自己的JavaScript MVC 框架，所以產生了react。后來反響很好,所以于2013年5月開源。下面這篇文章主要給大家介紹了關于React入門教程之Hello World以及環(huán)境搭建的相關資料，需要的朋友可以參考借鑒。2017-07-07
這篇文章主要為大家詳細介紹了react實現(xiàn)全局組件確認彈窗，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
MobX 是一個簡潔的狀態(tài)管理庫,它通過透明的函數(shù)響應式編程（TFRP）使得狀態(tài)管理變得簡單和可擴展,下面就跟隨小編一起來了解一下如何在React函數(shù)式組件中使用MobX吧2024-01-01
這篇文章主要介紹了react-router-dom5如何升級到6問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
這篇文章主要介紹了詳解React服務端渲染從入門到精通，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-03-03
react拖拽react-beautiful-dnd一維數(shù)組二維數(shù)組拖拽功能
二維數(shù)組可以拖拽,但是不可以編輯+拖拽,如果想要實現(xiàn)編輯+拖拽,還是需要轉換成一維數(shù)組,本文給大家介紹react拖拽react-beautiful-dnd的相關知識,感興趣的朋友跟隨小編一起看看吧2024-03-03
這篇文章主要介紹了React倒計時功能實現(xiàn)——解耦通用,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-09