浅谈 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 => 子组件处理展示