React组件的受控和非受控

对于组件的props和state的不同运用方式，造成了react组件不同的使用方式

日常用到的react组件，可以分为如下三种

1. 完全非受控组件：没有props，无法从外部控制组件，修改组件的状态
2. 完全受控组件：props和state完全分开，或者干脆没有state
3. 薛定谔组件：部分state会被外部传入的props所控制，但这些state在组件内部也会被控制到，所以处在受控和非受控的中间态

以下是自己的一些理解，并且为了方便，例子都是hooks组件，请见谅

完全非受控组件

// 没有参数，传了也不用
// 内部自己进行操作，外部无法干涉
function Inc() {
    const [number, setNumber] = useState(0)
    
    const handleInc = () => {
        setNumber(number + 1)
    }
    
    return [
        (<p>{ number }</p>),
        (<button onClick={handleInc}>加一</button>)
    ]
}

这种组件一般会用在写页面组件，不需要进行参数的配置，所有操作都在内部

完全受控组件

这类组件会把开放出来的状态完全交给外部控制，但不代表没有自己内部的状态（我理解一个组件的状态是指的属于它当前的props和state的集合），所以，组件完全受控，就是state和props完全分开，或者干脆没有state

// 子组件，完全受控
// 姓名他老子可以控制，想让叫什么就叫什么
// 年龄他老子控制不了，不能说让他几岁就几岁
function Son({name}) {
    const [age, setAge] = useState(0)
    
    // @warn 如果对useEffect不太理解，这块可以直接理解为age一年加一
    useEffect(() => {
        setInterval(() => {
            setAge(prevAge => prevAge + 1)
        }, 31536000000)
    }, [])
    
    return [
        (<p>儿子姓名: {name}</p>),
        (<p>儿子年龄: {age}</p>),
    ]
}

function Dad(){
    return (
        <div>
            <Son name="6墙冬">
        </div>
    )
}

这种才是平常写组件应该追求的方式，尽量让组件完全受控，不会出现如下恐怖的情况

薛定谔组件

这种组件是受控还是非受控的，难说，但是这种组件很常见

希望您看到这还没有烦，下边的内容才是重点

1. 儿子示例

我要改一下上边的Son组件，模拟以下他爸爸是浏览器之神，让儿子几岁就几岁

// 子组件，完全受控
// 姓名他老子可以控制，想让叫什么就叫什么
// 年龄他老子也控制，说让他几岁就几岁，但是儿子还是有自己的成长
function Son({ageFromDad, name}) {
    const [age, setAge] = useState(ageFromDad)
    
    // @warn 如果对useEffect不太理解，这块可以直接理解为age一年加一
    useEffect(() => {
        setInterval(() => {
            setAge(prevAge => prevAge + 1)
        }, 31536000000)
    }, [])
    
    // @warn 如果对useEffect不太理解
    // 这块可以直接理解为如果传入的ageFromDad改变，则设置age为ageFromDad
    useEffect(() => {
        setAge(ageFromDad)
    }, [ageFromDad])
    
    return [
        (<p>儿子姓名: {name}</p>),
        (<p>儿子年龄: {age}</p>),
    ]
}

// 爸爸让儿子一年长两岁
function Dad(){
    const [ageFromDad, setAgeFromDad] = useState(0)
    
    // @warn 如果对useEffect不太理解，这块可以直接理解为age一年加 二！！！
    useEffect(() => {
        setInterval(() => {
            setState(prevAge => prevAge + 2)
        }, 31536000000)
    }, [])
    
    return (
        <div>
            <Son name="6墙冬" age={ageFromDad}>
        </div>
    )
}

接下来，儿子的年龄就会出现波动，在下一年到来之前，他永远不能确定自己多大了

这个Son组件state中的age字段，出现了无法预测的问题，就是由于外部和内部都可以控制其修改

2. 表单示例

这种组件用起来很难受，但是又很多很多组件都是这样设计的

例如表单组件中Input组件，都会有一个props叫做value的属性，这个属性反应了当前输入框的内容，但是操作输入框的话也会引起value的变化，但是外部传入的value依然是之前的值，然后组件就懵了，好吧我自己也有点懵了，如下图

这种情况，两个选择：

1. 设置优先级，优先采用外部的值还是内部的值
2. 对比，内部外部哪个改变了用哪个，两个都改变，还是优先级...

数不尽的判断接踵而至

想着避免这种情况

就如音乐中的和弦外音，放在和弦中感觉格格不入，当弹奏的时候总是希望他向稳定的和弦中音去靠拢
物理上，希望这种中间状态倒向一个稳定状态

1. 完全非受控

嗯，这是不可能的
但是可以做成假的完全非受控——第一次受控，以后就完全非受控了

就是设计一个props叫做defaultValue，只在组件第一次的时候（~(羞脸)~!），可以把外部的值传到组件内

但是这种组件，只让控制一次，让使用者没有了控制欲

2. 完全受控

还是那个表单组件，控制一下，所有的修改都来自于外部就可以了，内部的修改不进行value的同步

重新规划一下数据流

• 外部修改props.value => 内部input显示的value
• 内部input修改 => 通知外部同步 => 外部修改props.value => 内部input显示的value

这样的话input的值永远来自外部

实现上边黑字的部分，就要搬出大名鼎鼎的onChange了

但是外部忘了做onChange的同步操作，那就会出现

个人倾向还是第二种

总结

我自己是这样认为的（看别的大神的文章）：

让子组件变得弹性，不要阻塞数据流
也就是说，不要把props固定到组件内部，props和state完全分离
也就是说，让父级组件的数据无障碍的流入子组件
也就是说，让子组件变得完全受控

• 外部props => 子组件处理展示
• 子组件出发修改 => 通知外部同步 => 外部修改props => 子组件处理展示