returnCitySN在react使用怎么使用

第一个参数可以接受字符串(如“p”“div”等HTML的tag)或react使用Class,第二个参数为传递的参数第三个为子元素,可以为字符串和react使用Element

react使用Element的原型对象只有一个简单的方法用于判断是否是react使用Element对象,没有额外的方法

综上,我们可以看出react使用Element有4个属性:typeref,keyprops,并且轻量没有状态,是一个虚拟化的DOM元素

传入嘚spec参数必须包含render方法,用于渲染虚拟DOMrender返回react使用Element类型;另外还有一些getInitialState和生命周期方法,可以根据需要定义

}

发布了随之而来的是一个新功能叫,不过这个功能还是实验品,react使用团队说的很清楚这玩意的API将来绝对会变,所以大家玩玩就好不要在真实产品中应用,而且這个功能实际上都不在v16.1.0的react使用包中,而是一个独立的npm来发布目前版本是v0.3.0。

在我看来这个react使用 Call Return功能真是试验品中的试验品,你看它的非常地凑合,连API介绍都没有只给了,这个博文的作者Ryan Florence是react使用 Router的作者之一的确是核心圈里的人,在这功能正式发布之前就写了这配上视頻来介绍react使用 Call Return

不过,恕我直言Ryan Florence在这个视频里真的是非常啰嗦,说了半天没有讲到重点可以翻墙的同学可以去看看,反正我看完是没搞明白react使用 Call Return是个啥为什么要这功能。

直到今天看到v16.1.0正式发布,我安装了react使用-call-return这个npm亲手玩了一晚才总算搞明白是怎么回事。

其实react使鼡 Call Return其实解决的就是这样一个场景需求:父组件的渲染会触发子组件的渲染,但是有些信息是需要子组件传递给父组件的,怎么办

在现囿的Reac框架下,父组件和子组件接触的途径就是渲染比如这样。

但有时候Parent想要渲染好Child,需要一些只有Child才能决定的信息可是,不渲染Child又鈈可能知道这些信息

这就是一个鸡生蛋蛋生鸡的问题,困扰啊!

目前解决这个问题,方法有两种:

第一种两个渲染过程,让Child先画一佽通过回调函数把信息传出来,这样Parent获得了相关信息然后,再触发一次渲染周期重画,这次然传递给Child新的属性这种方法虽然土,泹是容易懂缺点就是两次渲染周期,可能带来一点闪烁

第二种,先通过this.props.children获得子组件读取子组件的信息,用react使用.cloneElement来克隆产生新的元素同时传递新的属性进去,最后Parent的render返回的是克隆产生的元素这个过程就有机会在中间做一些操作。这种方法只用一个生命周期但是Parent写嘚比较麻烦。

现在有了react使用 Call Return就是让这个问题的解法好看一些(可能并没有)。

这两个函数都带了unstable_前缀代表他们迟早要被废。

  1. 在Parent组件的render函数中返回对unstable_createCall的调用第一个参数是props.children,第三个参数是props这两个参数基本没什么什么可商量的,关键是第二个参数这是一个回调函数,用於接受Child响应Call返回的信息然后渲染真正的内容(不懂没关系,往下看);
  2. 对unstable_createCall的调用会通知子组件响应这个call,于是会走子组件的渲染过程所有子组件的render函数被调用;
  3. 当Parent所有的Child都走完渲染周期之后,因为Child返回的是一个对unstable_createReturn的调用而不是react使用元素所以实际上这时候什么都没有畫呢,但是unstable_createCall第二个回调函数参数会被调用这个回调函数返回的东西会被用来渲染Parent,所以画出子组件的责任也在这个回调函数身上。

这個过程看起来不大好懂还是画一个图来看。

上面图中的1、2、3顺序就是整个流程的执行顺序

如果你还想最终画出和子组件相关的东西,那么Child组件Return回来的东西里必须要包含一个函数(至少一个),这样才能给回调函数一个机会来画Child

这个Parent和Child的关系如下,Parent可以包含多个Child每個Child要向Parent汇报自己的内容多大,然后Parent统计所有Child的内容总内容多大最后要在Child中显示出各自占总数的比例,几分之几(x/y)这种形式

代码中的renderItem这個函数,就是那个最终真正渲染Child的函数

可见,react使用-call-return解决的问题就是需要Parent和Child多次(一般是两次)交互才能渲染出结果的场景。

不得不说这套API实在有点繁琐,过程比较复杂希望react使用将来能够进化出更加简洁的表现形式,不过不管将来形势如何,最终流程都是这样:

  1. Parent把控淛权交给Child收集信息,包括如何渲染Child的函数;
  2. Child把控制权交还个Parent让Parent综合信息,调用渲染函数来渲染自己的内容

写完这篇,感觉Ryan Florence在视频里沒有解释清楚也可以理解因为这概念和流程的确不好懂,不过希望大家看完这篇文章之后能理解react使用 Call和Return的意义。

}

我要回帖

更多关于 react使用 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信