内容简介:对于组件的props和state的不同运用方式,造成了react组件不同的使用方式日常用到的react组件,可以分为如下三种以下是自己的一些理解,并且为了方便,例子都是hooks组件,请见谅
对于组件的props和state的不同运用方式,造成了react组件不同的使用方式
日常用到的react组件,可以分为如下三种
- 完全非受控组件:没有props,无法从外部控制组件,修改组件的状态
- 完全受控组件:props和state完全分开,或者干脆没有state
- 薛定谔组件:部分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的同步操作,那就会出现
以上所述就是小编给大家介绍的《React组件的受控和非受控》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- React之受控组件与非受控组件
- 浅谈react受控组件与非受控组件(小结)
- Edge 浏览器曝高危漏洞,受控电脑可执行任意命令
- 使用DDL注入绕过Windows 10受控文件夹访问保护
- 谷安1904期PRINCE2(受控环境下的项目管理)认证培训圆满结束,北京深圳两地开班
- React 组件模式-有状态组件 x 无状态组件、容器组件 x 展示组件、高阶组件 x 渲染回调(函数作为子组件)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。