React组件的受控和非受控

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