React数据传递---context

state是在constructor当中定义,并且用来传值,props是在引用其它组件中定义,并且在其组件中调用,

context是在组件中定义一个函数,并且把它放在引用的组件中,供其后面的组件来调用它,当然那个时候就又变成props的概念了

state 、props 、context 都是React传值的数据的引用,并且都是单向的。




上下文的精髓是可以跨级传递数据,爷爷组件可以直接传递数据到孙子组件。

语法比较晦涩:

app/Yeye.js



app/Baba.js   里面虽然发生了事,但是被我注释了,因为要测试孙子有没有接受到爷爷传的值



app/Sunzi.js

React会将上下文当做构造函数的第二个参数传入:


结论:

(1)当祖先元素中更改了上下文的数据,此时所有的子孙元素中的数据都会更改,视图也会更新

(2)反之不成不立,可以认为上下文的数据字啊子孙元素中是只读的。此时又要需要使用奇淫技巧,就是在context中共享一个操作祖先元素的函数,子孙元素通过上下文获得这个函数,从而操作祖先元素的值.

也就是说,state是自制的不涉及传值的事儿:props是单向的,父亲----->儿子:context也是单向的,祖先---->后代,如果要反向,就要传入一个函数。


app/Yeye.js



app/Sunzi.js



context很少用,传值基本用props。除非特别深的跨级别传值,可以用context


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值