react的受控于非受控组件

本文深入探讨了React中的受控与非受控组件概念,详细解释了两者的区别及应用场景。受控组件通过state管理表单数据,确保数据一致性;而非受控组件则利用DOM节点维护数据,简化了数据处理流程。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.js"></script>
</head>
<body>
    
    <div id="box"></div>
    <script type="text/babel">
        //受控与非受控组件
        //表单元素他的值来自于state,那么这个组件就是受控组件,否则就是非受控组件。
        //受控组件
        /*
            在大多数情况下,我们推荐使用 受控组件 来处理表单数据。
            在一个受控组件中,表单数据是由 React 组件来管理的。
            另一种替代方案是使用非受控组件,这时表单数据将交由 DOM 节点来处理。

            
            由于在表单元素上设置了 value 属性,因此显示的值将始终为 this.state.value,
            这使得 React 的 state 成为唯一数据源。由于 handlechange 在每次按键时都会执行并更新 React 的 state,
            因此显示的值将随着用户输入而更新。
        */
        /* class App extends React.Component{
            constructor(){
                super()
                this.state = {
                    value:"111"
                }
            }
            handleChange = (e)=>{
               this.setState({
                   value:e.target.value
               }) 
            }
            render(){
                return (
                    <div>
                        <input type="text" value={this.state.value} onChange={this.handleChange}/>   
                        <p>{this.state.value}</p>
                    </div>
                )
            }
        }
        ReactDOM.render(<App/>,document.getElementById("box")) */



        //非受控组件  这时候数据由DOM自身进行维护
        //要编写一个非受控组件,而不是为每个状态更新编写对应的数据处理函数,
        //可以使用ref来从DOM节点中获取表单数据。

        class App extends React.Component{
            handleSubmit = (e)=>{
                console.log(this.input.value)
                e.preventDefault()
            }
            render(){
                return (
                    <form onSubmit={this.handleSubmit}>
                        <input type="text" ref={el=>this.input=el}/>    
                        <input type="submit"/>
                    </form>
                )
            }
        }
        ReactDOM.render(<App/>,document.getElementById("box")) 
    </script>
</body>
</html>
### 受控组件介绍 受控组件是 React 中处理表单元素的一种方式,通过组件状态来管理表单元素的值和行为,使 React 能够完全掌控表单。在受控组件中,表单元素的值由 React 组件的状态控制,并且每次表单元素的值发生变化时,都会触发一个事件处理函数来更新组件的状态。以下是一个受控组件的示例代码: ```jsx import { useState } from 'react'; const App = () => { const [val, setVal] = useState('前端西瓜哥'); const submit = () => { const username = val; // 处理提交逻辑 }; return ( <div> 用户名: <input value={val} onInput={(e) => { setVal(e.target.value); }} /> <button onClick={submit}>提交</button> </div> ); }; ``` 在这个例子中,`input` 元素的值由 `val` 状态控制,当输入框的值发生变化时,`onInput` 事件处理函数会更新 `val` 状态[^1][^3]。 ### 非受控组件介绍 非受控组件则直接使用 DOM 来管理表单元素的值,适用于简单的表单场景。非受控组件将真实数据存在 DOM 节点中,在使用非受控组件时,有时候更容易同时集成 React 和非 React 代码。如果不介意代码美观性,并且希望快速编写代码,使用非受控组件往往可以减少代码量[^1][^2]。 ### 两者区别 - **数据存储位置**:受控组件的数据存储在 React 组件的状态中,而非受控组件的数据存储在 DOM 节点中[^1][^2]。 - **数据控制方式**:受控组件通过状态管理表单元素的值,每次值变化都要通过事件处理函数更新状态;非受控组件直接从 DOM 获取值,不依赖 React 状态管理[^1][^3]。 - **使用场景**:受控组件适用于需要对表单元素进行复杂控制和验证的场景;非受控组件适用于简单的表单场景,如只需要在表单提交时获取值的情况[^1][^2]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值