React组件的受控和非受控

1,393

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

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

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

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

完全非受控组件

clipboard.png

// 没有参数,传了也不用
// 内部自己进行操作,外部无法干涉
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

clipboard.png

// 子组件,完全受控
// 姓名他老子可以控制,想让叫什么就叫什么
// 年龄他老子控制不了,不能说让他几岁就几岁
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>
    )
}

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

薛定谔组件

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

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

clipboard.png

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依然是之前的值,然后组件就懵了,好吧我自己也有点懵了,如下图

clipboard.png

这种情况,两个选择: 1. 设置优先级,优先采用外部的值还是内部的值 2. 对比,内部外部哪个改变了用哪个,两个都改变,还是优先级... 数不尽的判断接踵而至

想着避免这种情况

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

1. 完全非受控

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

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

clipboard.png

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

2. 完全受控

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

重新规划一下数据流

  • 外部修改props.value => 内部input显示的value
  • 内部input修改 => 通知外部同步 => 外部修改props.value => 内部input显示的value
    这样的话input的值永远来自外部

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

clipboard.png

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

clipboard.png

个人倾向还是第二种

总结

我自己是这样认为的(看别的大神的文章):

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

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