React组件的受控和非受控

栏目: IOS · Android · 发布时间: 4年前

内容简介:对于组件的props和state的不同运用方式,造成了react组件不同的使用方式日常用到的react组件,可以分为如下三种以下是自己的一些理解,并且为了方便,例子都是hooks组件,请见谅

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

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

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

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

完全非受控组件

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

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

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

薛定谔组件

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

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

React组件的受控和非受控

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

React组件的受控和非受控

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

想着避免这种情况

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

1. 完全非受控

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

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

React组件的受控和非受控

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

2. 完全受控

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

重新规划一下数据流

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

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

React组件的受控和非受控

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

React组件的受控和非受控

以上所述就是小编给大家介绍的《React组件的受控和非受控》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Web界面设计

Web界面设计

Bill Scott、Theresa Neil / 李松峰 / 电子工业出版社 / 2009年7月 / 80.00元

当前的Web已经进入崭新的时代!本书涵盖了在基于独一无二的Web环境下、在创建丰富体验的过程中设计Web界面的最佳实践、模式和原理。UI专家Bill Scott和Theresa Neil在他们多年实践经验和不懈探索的基础上,总结提炼出了Web界面设计的六大原理——直截了当、简化交互、足不出户、提供邀请、使用变换和即时反应,并以这六大原理为依托,以当今Web上各类开风气之先的流行网站为示例,向读者展......一起来看看 《Web界面设计》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

SHA 加密
SHA 加密

SHA 加密工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具