react中的fragmentsHOC
fragment
对于fragment的最初接触是在做todoList这个功能的时候，在render()中你return的必须是一个整体，如果你使用<div>去包裹这个整个的组件，那么这个div就会显示在你的html结构上，但是它并没有起到什么实质性的作用，因此在这里如果使用fragment去代替div就能起到一个占位的功能，但是其不会出现在html的结构上。
在读了官方的文档后，发现它的功能不仅是这样，还有更加强大的存在，
1.其可以自动的去发生某种转化，可以通过下面的例子来体现
在上面的这个例子中，当你使用<React.Fragment>去代替<tr>那么上面的代码部分的作用就和下面部分中的代码就是等价的，在这里Fragment就起到了一个自动转化的过程。
2.加上key值后的应用
在这个例子中，我们通过数组中的map方法去增加一个表单，在这个时候我们必然会去添加一个key值，当我们使用了React.Fragment后，其作用和上面所说的例子一样，我们从中便有了一个带的过程，他照样能够打印一个表单出来，这说明加上key值后这种应用也是可取的。
hoc（higher-order Components）高级组件
其定义是一个函数接收一个组件，通过这个函数调用后会返回一个新的组件。
hoc使用的情况
相当于一个模板的组件，当你在传统模式的组件中，创建不同的组件，但是这些组件在实现的过程中虽然不同，但是实现的过程中显示的功能是一样的，如果重复去使用这样的方式，在一定程度上显然是不可取的，那么这个时候如果我们使用高级组件去写这样一个模板。但你需要去重复去使用时，就可以去使用这个模板。下面举个实际例子来说明这个说法
这是在某个应该程序中写的两个组件，在数据源的获取方式上是不同的，并且也呈现出不同的输出。但是他们的实现过程是差不多相同的。为了避免这种在一个大的程序中去重复写这种相同的组件模式，我们在这里就得使用hoc，因此你在下面的代码中看到这整个的实现过程。
在上面的这个例子中，我们写了一个高级的组件，就是上面程序代码所说的模板，在上面两个组建中，他们的完成过程大致上就像这上面的代码所示那样。紧接着，我们就去使用这个高级组件，实现上面两个组件。
在这段代码中，我们只是去调用了这个hoc，然后从代码量与性能上来说，都极大程度的提高了我们的运行速度与执行效率。
hoc的注意事项
1.当你去组合组件的时候，不要去更改掉原始的组件。
上面是官方文档提供的一个使用hoc错误的例子，其一是输入组件不能与增强组件分开重用。更重要的是，如果对EnhancedComponent应用另一个HOC，它也会改变。显然这样做是不符合hoc的概念。因此我们应该使用下面的这种方式去进行更改
2.过滤掉一些不必要的props，将某些状态值或者是实例方法放在hoc中。例如：官方文档中所提供的一个例子
3.最大化的可组合型，其具体的情况有好几种，第一是值接收一个参数，第二是接收两个参数，用于说明其配置的关系，第三种就是将组件之间给联系起来的办法。上面分别使用官方的的举例来进行说明
其中第三个是常用的一种模式，第三个高级组件的方式是用了redux中store中组件连接数据的方式。
4.包装时显示名称以便去调试，在之前的包装组件的过程中我们并没有去显示其名称，下面的这个例子就显示了名称。
5.不要在render方法中去使用hoc，React的差异算法(称为reconciliation)使用组件标识来决定是更新现有的子树，还是丢弃它并挂载一个新的子树。如果从render返回的组件与前一个render返回的组件相同(===)，则使用新的组件对子树进行区分，从而递归更新子树。如果它们不相等，则完全卸载前一个子树。这意味着你不能再渲染元素的方法中去使用hoc组件。
6.必须去复制静态的方法
有的时候我们在组件中使用了静态的方法，当去使用了hoc后，我们得到的是一个普通的组件，其内部的方法并不是静态的，这个时候就需要我们将hoc中的方法更改成一个静态的方法。以下面的例子为例：
但是这会产生一个问题，你需要知道那些方法是静态的这样才能保证你去更改，但是这样的过程是繁杂的，因此在这里有两个解决方案，第一个是可以使用悬挂-非反应-静态自动复制所有非反应静态方法，第二个是将这些静态的方法分离出来组成一个新的组件。
上面的代码部分就是分别对上面所说的两种情况进行代码实例的两个部分。
以上便是对于fragment与hoc的认识，对于fragment只需要记住其代替作用，可以做一个占位符也可以作为替换表单中的<td>标签，对于hoc只需要记住，他是一个纯函数接收到一个组件并且返回一个新的组件，其最典型的例子redux中的connect的使用。
