快捷導(dǎo)航

淺析React中的受控組件和非受控組件

更新時間：2021年05月18日 10:53:49 作者：非著名奶茶愛好者

具體來說這是一種react非受控組件，其狀態(tài)是在input的react內(nèi)部控制，不受調(diào)用者控制?？梢允褂檬芸亟M件來實現(xiàn)。下面就說說這個React中的受控組件與非受控組件的相關(guān)知識，感興趣的朋友一起看看吧

非受控組件

表單數(shù)據(jù)由DOM本身處理。即不受setState()的控制，與傳統(tǒng)的HTML表單輸入相似，input輸入值即顯示最新值（使用 ref從DOM獲取表單值）

1.非受控組件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--準(zhǔn)備好一個容器-->
<div id="test"></div>

<!--引入react核心庫-->
<script src="../js/react.development.js"></script>
<!--引入react-dom，用于支持react操作dom-->
<script src="../js/react-dom.development.js"></script>
<!--引入babel，用于將jsx轉(zhuǎn)為js-->
<script src="../js/babel.min.js"></script>
<!--引入prop-types,用于對組件標(biāo)簽屬性進(jìn)行限制-->
<script src="../js/prop-types.js"></script>

<script type="text/babel">
    class Login extends React.Component {
        myRef1 = React.createRef();
        myRef2 = React.createRef();
        handleSubmit = (event) => {
            event.preventDefault() // 阻止表單提交
            const username = this.myRef1.current
            const password = this.myRef2.current
            alert(`您輸入的用戶名是:${username.value},您輸入的密碼是：${password.value}`)
        }
        render() {
            return (
                <form onSubmit={this.handleSubmit}>
                    用戶名：<input ref={this.myRef1} type="text"/> &nbsp;
                    密碼：<input ref={this.myRef2} type="text"/> &nbsp;
                    <button>登錄</button>
                </form>
            )
        }
    }
    ReactDOM.render(<Login/>,document.getElementById('test'))
</script>
</body>
</html>

受控組件

在HTML中，標(biāo)簽<input>、<textarea>、<select>的值的改變通常是根據(jù)用戶輸入進(jìn)行更新。在React中，可變狀態(tài)通常保存在組件的狀態(tài)屬性中，并且只能使用 setState() 更新，而呈現(xiàn)表單的React組件也控制著在后續(xù)用戶輸入時該表單中發(fā)生的情況，以這種由React控制的輸入表單元素而改變其值的方式，稱為：“受控組件”。

2.受控組件（受到控制）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--準(zhǔn)備好一個容器-->
<div id="test"></div>

<!--引入react核心庫-->
<script src="../js/react.development.js"></script>
<!--引入react-dom，用于支持react操作dom-->
<script src="../js/react-dom.development.js"></script>
<!--引入babel，用于將jsx轉(zhuǎn)為js-->
<script src="../js/babel.min.js"></script>
<!--引入prop-types,用于對組件標(biāo)簽屬性進(jìn)行限制-->
<script src="../js/prop-types.js"></script>

<script type="text/babel">
    class Login extends React.Component {
        // 初始化狀態(tài)
        state = {
            username: '',
            password: ''
        }

        // 保存用戶名到狀態(tài)中
        saveUsername = (e) => {
            this.setState({username: e.target.value})
        }

        // 保存密碼到狀態(tài)中
        savePassword = (e) => {
            this.setState({password: e.target.value})
        }

        handleSubmit = (e) => {
            e.preventDefault() // 阻止表單提交
            const {username,password} = this.state
            alert(`您輸入的用戶名是:${username},您輸入的密碼是：${password}`)
        }
        render() {
            // onChange是一有變化就改變
            return (
                <form onSubmit={this.handleSubmit}>
                    用戶名：<input onChange={this.saveUsername} type="text"/> &nbsp;
                    密碼：<input onChange={this.savePassword} type="text"/> &nbsp;
                    <button>登錄</button>
                </form>
            )
        }
    }
    ReactDOM.render(<Login/>,document.getElementById('test'))
</script>
</body>
</html>

在這里插入圖片描述

注意

一般情況，受控組件用的多，因為在非受控組件中會多次使用ref，而官方文檔上有些“請勿過度使用ref”，使用次數(shù)多了會存在效率上的問題。

結(jié)論

受控和非受控元素都有其優(yōu)點，根據(jù)具體情況選擇。如果表單在UI反饋方面非常簡單，則對ref進(jìn)行控制是完全正確的，即使用非受控組件。

特征	非受控制	受控
一次性檢索（例如表單提交）	yes	yes
及時驗證	no	yes
有條件的禁用提交按鈕	no	yes
執(zhí)行輸入格式	no	yes
一個數(shù)據(jù)的幾個輸入	no	yes
動態(tài)輸入	no	yes