React基础：受控与非受控组件

什么是受控？

依赖其它组件状态则受控

受控与非受控是一个无比简单的概念，只要组件依赖外部组件的状态，那么这个组件就是受控组件。

何以味呢？ 那么受控与非受控的概念并不是局限于表单组件了！没有错，受控与否不局限于表单组件，所有组件都可能发生。

受控组件不局限于表单

例子： 父向子传值，值为父组件的状态

父组件

import React, { useState } from 'react'
import Son from './son'
export default function Father() {
    const [name, setname] = useState("小猫")
    return (
        <div>
            <p>你好</p>
            <Son name={name}></Son>
        </div>
    )
}

子组件

import React from 'react'

export default function Son(props) {
  return (
    <div>{props.name}</div>
  )
}

结果

受控组件的作用

联动渲染

两个 input组件 的状态依赖于父组件内部同一个状态值 gender。当gender值改变时，会导致两个input也会更新状态。 由此实现二选一的表单，两个input组件就是受控组件

import React, { useState } from 'react'

export default function Control() {
    // input 内拥有onChange事件 传入一个函数
  const [gender, setGender] = useState("male"); // 共享状态

return (
  <div>
    {/* 两个单选框依赖同一个 state，实现“互斥选中”联动 */}
    <label>
      <input
        type="radio"
        name="gender"
        value="male"
        checked={gender === "male"} // 状态控制选中状态
        onChange={(e) => setGender(e.target.value)} // 变更同步状态
      />
      男
    </label>
    <label>
      <input
        type="radio"
        name="gender"
        value="female"
        checked={gender === "female"} // 依赖同一个 state
        onChange={(e) => setGender(e.target.value)}
      />
      女
    </label>
  </div>
);
}

什么是非受控

不依赖其它组件状态，自身状态自身管理

只要组件状态，不依赖其它组件的状态，则该组件不是受控组件。

结果就是，组件状态不会因为其它组件状态的改变而改变

非受控组件的作用

实现拥有特定功能的组件

实现拥有特定功能的组件,且该组件不需要与其它组件联动，自身是独立的。