React学习笔记18-非受控组件
1.非受控组件的定义
非受控组件即状态不是完全由React的state来控制的组件
React要编写一个非受控组件,可以 使用 ref 来从 DOM 节点中获取表单数据,就是非受控组件。
import React, { Component } from 'react' export default class App extends Component { myusername = React.createRef() render() { return ( <div> <h1>登录页</h1> {/* 在 React 渲染生命周期时,表单元素上的 value 将会覆盖 DOM 节点中的值,在非受控组件中,你经 常希望 React 能赋予组件一个初始值,但是不去控制后续的更新。 在这种情况下, 你可以指定一个 defaultValue 属性,而不是 value 。 */} <input ref={this.myusername} type="text" defaultValue='请输入' /> <button onClick={ () => { console.log(this.myusername.current.value) } }>登录</button> <button onClick={ () => { this.myusername.current.value = '' } }>重置</button> </div> ) } }
2.非受控组件的优势
因为非受控组件将真实数据储存在 DOM 节点中,所以在使用非受控组件时,有时候反而更容易同时集
成 React 和非 React 代码。如果你不介意代码美观性,并且希望快速编写代码,使用非受控组件往往可
以减少你的代码量。否则,你应该使用受控组件。
3.非受控组件的劣势
非受控组件的弊端之一,无法直接将this.myusername.current.value传递给其他组件
因为通过下面这种写法,value改变时,render函数无法被调用,只有setState才会
重新调用render函数,很显然非受控组件的value修改不会调用render函数
<Child myvalue ={this.myusername.current.value}></Child>
即非受控组件在组件复杂度较高时,不利于状态的维护和代码的维护