React 创建元素的几种方式

Question

React 创建元素的几种方式

Answer 1

<!-- Wrapper.Component.html --> <div> hello <ng-content></ng-content> </div>假设我们有一个上述的组件，然后向下面这样调用：<wrapper> <span> World </span> </wrapper>那么最终的渲染结果将会是这样的：<div> hello <span> World </span> </div>看起来就是发生了很简单的替换，但是如果在 Wrapper 中出现了多个 <ng-content> 会出现多个 <span> World </span> 吗？答案是不会的。<ng-content> 的本质只是移动元素，并不会去自动的创建传入的模板，所以就算用 ngFor 套住 <ng-content> 也不会出现很多个 <span> World </span>。如果传入的是自定义的组件，这些组件也只会被实例化一次。

Answer 2

1. 父组件 -> 前几层子组件： props2. 父组件 -> 非常深入的子组件(比如从最顶层到第5层以后): context这种情况几乎很少见，除非写框架或者工具，最好是只用props，清晰明了3. 子组件 -> 父组件：callback4. 子组件时间： 严格意义上不存在这种情况，如果出现这样的需求，说明你的写法是错误的，数据的流向始终都应该是从顶至下。例如root -> (A,B,C) 所以A组件改变，需要让B改变时，A调用root以props传来的callback从而导致root的state发生变化，这样B就能得到更新5.当APP复杂的可能特殊情况：在使用pureRenderMixin来提升渲染速度的时候，非常里层的子组件需要一些参数来计算显示的值，但是你又不需要当这个值改变的时候重新渲染这个组件而且也不想用context的时候, 在Root中定义this.getAllState= () =>this.state， 然后将这个getAllState作为props传递给子组件； 这种情况很少出现，慎用6.使用某种Flux，让局部组件链接一个自己的store，同时接受来自父组件的各种callback props， 通过这些callback实现 小组件的store改变时，通知父组件在一个实际的APP中的实际情况是如何设计store和props的呢？其实重点，我认为是store和store之间是如何交流数据的。这里我斗胆地拿我在家写的一个编辑器来做一些分析：编辑器端Flommox, 播放器向redux迁移中整个编辑器网站分成了不同的页面，每个页面(例如/course:id, /editor/:id, /quizs)对应一个Action分组+一个Store， 有的复杂页面可能需要很多歌store整个编辑器网站分成了不同的页面，每个页面(例如/course:id, /editor/:id, /quizs)对应一个Action分组+一个Store， 有的复杂页面可能需要很多歌store