受控组件%26非受控组件

1. HTML的 input，textarea， select 这类表单元素会维持自身状态，并根据用户输入进行更新
2. React中，可变的状态通常保存在组件的状态属性中，并且只能用 setState() 方法进行更新

组件的 state
组件的 props
属性校验和默认属性
组件样式
组件的定义

受控组件

1. 受控组件：组件的状态受React控制；每当表单的状态发生变化,都会被写入组件的state中
   1. 通过初始 state中设置表单的默认值
   2. 每当表单的值发生变化时,调用 onChange事件处理器；受控组件需要为每一个组件绑定一个 onChange事件
   3. 事件处理器通过合成事件对象e拿到改变后的状态,并更新应用的state
   4. setState触发视图的重新渲染,完成表单组件值得更新
2. 通过设置input的 value属性, 无法改变输入框值；把 value和 state结合在一起，绑定onChange事件,实时更新value值就行
3. 受控组件采取的理念类似于redux的单项数据流理念
4. 
   

受控组件，不允许往里面传东西

class App extends React.PureComponent {
  constructor(props) {
    super(props)
    this.state = {
      value: props.value
    }
  }
  onChange(e) {
    const value = e?.target.value || ''
    this.setState({ value })
  }
  render() {
    const { state, onChange } = this
    return (
      <input value={ state.value } onChange={ e => onChange(e) }/>
    )
  }
}

受控组件的缺点

1. 每次表单的值发生变化，都会调用一次onChange事件，带来性能上的的损耗
2. 非受控组件不会出现这些问题，但仍然不提倡使用非受控组件

非受控组件

1. ref
2. defaultValue
3. defaultChecked
4. 手动操作 DOM
5. 非受控组件：组件的状态不受React控制的组件
6. 使用 defaultValue和 defaultChecked来表示组件的默认值，只会被渲染一次,在后续的渲染时不会更新改变

https://zh-hans.reactjs.org/docs/uncontrolled-components.html#gatsby-focus-wrapper
https://goshacmd.com/controlled-vs-uncontrolled-inputs-react/

state

1. 例如：input的 value值的变化和 state没有关系，state只是赋值个默认的初始值
2. input变化不会同步到 state里面
3. file & 富文本编辑器无法使用 state受控组件
4. 优先使用受控组件，符合 React设计原则
5. 必须操作 DOM时，再使用非受控组件

class Parent extends React.Component {
  constructor (props) {
    super(props)
    this.state = { value: 100 }
    this.inputRef = React.createRef() // 创建 ref
    // vue里面 ref=“string” react里面必须返回一个对象
  }
  render () {
    return (
      // this.inputRef.current 获取 ref
      <input defaultValue={this.state.value} ref={this.inputRef} />
      <input 
        type="checkbox" 
        defaultChecked={this.state.value} 
        ref={this.inputRef} 
        />
    )
  }
}