当多个组件内有相同的代码段或者是相似功能时，考虑进一步的封装。我了解到的逻辑复用的方式有三种：
- HOC 2.render props 3. hooks。其中HOC和render props是类组件中使用的方式，Hooks是函数组件中使用的方式。
高阶组件 HOC 自身不是 React API 的一部分，它是一种基于React的组合特性而形成的设计模式。具体来说：高阶组件是一个函数，它的实参是待包装的组件，返回值是一个全新的类组件：它会在内部创建一个新的有具体业务逻辑的类组件，这个组件的render中，可以使用传入的组件并将自己的业务逻辑通过props注入。
render props是指一种在多个React组件之间使用一个值为函数的prop共享代码的简单技术，更具体的说：定义一个的类组件，向他传入自定义属性，属性值是一个用来提供UI的函数，在组件的render函数中，调用并自己的state给UI函数来渲染页面结构。
HOC和render props在实现多个逻辑复用时，都不可避免会形成嵌套结构，不利于拓展和维护。
在函数组件中，使用自定义hooks可以比较完美的解决上面的问题。
