React组件的受控和非受控

2019-06-12 admin

对于组件的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 => 子组件处理展示

[转载]原文链接:https://segmentfault.com/a/1190000019460090

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-67143.html

文章标题:React组件的受控和非受控

相关文章
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
JavaScript实现PC手机端和嵌入式滑动拼图验证码三种效果
PC和手机端网站滑动拼图验证码效果源码,同时包涵了弹出式Demo,使用ajax形式提交二次验证码所需的验证结果值,嵌入式Demo,使用表单形式提交二次验证所需的验证结果值,移动端手动实现弹出式Demo三种效果 首先要确认前端使用页面,比如...
2017-03-17
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
Vue获取DOM元素样式和样式更改示例
在 vue 中用 document 获取 dom 节点进行节点样式更改的时候有可能会出现 ‘style’ is not definde的错误,这时候可以在 mounted 里用 $refs 来获取样式,并进行更改: &lt;template...
2017-03-13
React.js编程思想
JavaScript框架层出不穷,在很多程序员看来,React.js是创建大型、快速的Web应用的最好方式。这一款由Facebook出品的JS框架,无论是在Facebook还是在Instagram中,它的表现都非常出色。 使用React.j...
2015-11-12
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; ...
2017-03-13
从2014年的发展来展望JS的未来将会如何
&lt;font face=&quot;寰�杞�闆呴粦, Arial, sans-serif &quot;&gt;2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
12个你未必知道的CSS小知识
虽然CSS并不是一种很复杂的技术,但就算你是一个使用CSS多年的高手,仍然会有很多CSS用法/属性/属性值你从来没使用过,甚至从来没听说过。 1.CSS的color属性并非只能用于文本显示 对于CSS的color属性,相信所有Web开发人员...
2015-11-12
ajax为什么令人惊异?ajax的优缺点
使用Ajax的最大优点,就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作,并避免了在网络上发送那些没有改变的信息。 Ajax不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。就像DHT...
2015-11-12
回到顶部