React学习笔记18-非受控组件

合集 - React学习记录(23)

1.React学习笔记01-React的基本认识2023-10-162.React学习笔记02-创建React项目2023-10-163.React学习笔记03-编写第一个react应用程序2023-10-164.React学习笔记04-JSX语法2023-10-175.React学习笔记05-类组件2023-10-196.React学习笔记06-函数式组件2023-10-197.React学习笔记07-组件嵌套2023-10-198.React学习笔记08- 组件的样式2023-10-199.React学习笔记09- 事件处理2023-10-2010.React学习笔记10- Ref的应用2023-10-2011.React学习笔记11-状态(state)2023-10-2012.React学习笔记12-循环渲染2023-10-2013.React学习笔记13-小案例toList(状态,状态维护,条件渲染渲染)2023-10-2114.React学习笔记14-dangerousSetinnerHtml指令2023-10-2115.React学习笔记15-setState同步异步问题2023-10-3116.React学习笔记16-属性props2023-11-0317.React学习笔记17-属性VS状态2023-11-03

18.React学习笔记18-非受控组件2023-11-04

19.React学习笔记19-受控组件2023-11-0420.React学习笔记20-父子通信(子传父)2023-11-0821.React学习笔记21-非父子通信(状态提升)2023-11-0822.React学习笔记22-订阅发布模式2023-11-0823.React学习笔记23-非父子通信(订阅发布模式)2023-11-08

收起

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>

即非受控组件在组件复杂度较高时，不利于状态的维护和代码的维护