（广义范围的说法）：React组件的数据渲染是否被调用者传递的props完全控制，控制则为受控组件，否则为非受控组件

表单中的受控与非受控组件：

React要编写一个非受控组件，可以使用ref来从从节点中获取表单数据，就是非受控组件

非受控组件：

import React, { Component } from 'react'
export default class App extends Component {
    myusername = React.createRef()
    render() {
        return (
            <div>
                <h1>登录页</h1>
                <input type="text" ref={this.myusername} defaultValue="kerwin"/>
                <button onClick={()=>{
                    console.log(this.myusername.current.value)
                }}>登录</button>
                <button onClick={()=>{
                    this.myusername.current.value = ""
                }}>重置</button>
                {/* <Child myvalue={this.myusername.current.value}/> */}
            </div>
        )
    }
}

受控组件：

import React, { Component } from 'react'
export default class App extends Component {
    // myusername = React.createRef()
    state = {
        username:"kerwin"
    }
    render() {
        return (
            <div>
                <h1>登录页</h1>
                <input type="text" value={this.state.username} onChange={(evt)=>{
                    console.log("onChange",evt.target.value)
                    this.setState({
                        username:evt.target.value
                    })
                }}/>
                <button onClick={()=>{
                    console.log(this.state.username)
                }}>登录</button>
                <button onClick={()=>{
                    this.setState({
                        username:""
                    })
                }}>重置</button>
                {/* <Child myvalue={this.state.username}/> */}
            </div>
        )
    }
}