react动态创建100个组件

react动态创建100个组件步骤如下：

1、创建一个HelloComponent.js文件，写入组件。并在App.js中调用HelloComponent组件。

2、在HelloComponent.js文件中分别使用三种方式创建组件。

1. 父组件 ->前几层子组件： props 2. 父组件 ->非常深入的子组件(比如从最顶层到第5层以后): context 这种情况几乎很少见，除非写框架或者工具，最好是只用props，清晰明了 3. 子组件 ->父组件：callback

在首页 App.js 中，直接使用 import ... from ... 引入组件，并赋值为 <Route></Route> 标签的 component 属性。该引入方式下，无论用户访问的路径定位到哪个路由，都会在渲染之前加载所有的组件。假设用户只访问了 '/' 页面，并没有继续进入 '/cart' 页，那么原先加载的 Cart 组件就不需要被渲染，那么加载 Cart 组件所消耗的时间与带宽都是一种浪费。

为了实现组件的动态加载，可以使用 import() 的动态加载方法，在需要时再加载某一组件。但是， <Route>标签的 component 属性期待的是一个组件。因此，需要实现一个高阶组件，以动态加载函数为参数，并将加载得到的组件作为结果返回。

---