react-受控组件和非受控组件

针对的主要是表单

在 HTML 中，表单元素（如< input >、 < extarea > 和 < select >）通常自己维护 state，并根据用户输入进行更新。而在 React 中，可变状态（mutable state）通常保存在组件的 state 属性中，并且只能通过使用 setState()来更新。

非受控组件

• 表单自己管理自己的状态，这就叫做非受控组件
  即input自己的value值由自己管理
  我们叫这个input为非受控组件，value为非受控组件的状态

案例：
App.js

import React from 'react'

export default function App() {
  return (
    <div>
      {/* 非受控组件 */}
      <input type='text' defaultValue='你好' onChange={e=>{console.log(e.target.value)}}/>
    </div>
  )
}

受控组件

• 官方解释：
  –渲染表单的 React 组件还控制着用户输入过程中表单发生的操作。被 React 以这种方式控制取值的表单输入元素就叫做“受控组件”。
• 白话：
  –组件的状态去管理表单元素的value属性，那么这时候表单元素就是受控组件
  –相当于vue里的双向数据绑定

案例：
App.js

import React,{useState} from 'react'

export default function App() {
  const [val,setVal]=useState('你好')
  return (
    <div>
      {/* 受控组件 */}
      <input type='text' value={val} onInput={e=>setVal(e.target.value)}/>
    </div>
  )
}

半受控组件

• 一个表单组中，一部分表单元素的取值交给了组件的state管理，一部分自己管理

案例：
App.js

import React,{useState} from 'react'
import Hello from './components/Hello'
export default function App() {
  const [data,setData]=useState('')
  return (
    <div>
      {/* 受控组件 */}
      <input type='text' value={data} onInput={e=>setData(e.target.value)}/>
      <Hello data={data}/>
    </div>
  )
}

src/components/Hello.js

import React from 'react'

export default function Hello(props) {
    const {data}=props
    return (
        <div>
            {/* 半受控组件 */}
            <input value={data}/>
        </div>
    )
}

只能上控制下，不能下控制上
应用场景：长 x 宽 = 总量 ； 长变，宽变，总量不能变，受长和宽的控制