React高阶组件、Render props、hooks有什么区别

React高阶组件、Render props、hooks有什么区别：

目的：这三种都是为了解决组件复用的问题

---

React高阶组件：

        React高阶组件：又被称之为 HOC,可以理解就是一个函数, 但是函数中的参数是一个组件,函数中的逻辑操作后返回一个新的组件, HOC是用于解决复用组件逻辑的一种技巧。

优点: 逻辑进行复用,不会影响到组件内部的逻辑;

缺点:HOC传递给被包裹的组件时Props很容易覆盖

---

Render props:

        父组件与子组件之间的一种通信方式,render props用于告知父组件向子组件传递的内容,从而显示子组件渲染;也是解决了数据共享代码复用的问题,缺点就是在return之外无法访问数据。

优点:从数据父级传递到子级从而数据得到共享,子组件处理渲染问题即可

缺点:无法在return之外访问到数据

---

Hooks:

        是react16.8以后，react新增的钩子,目的是增加代码的可复用性，逻辑性弥补了函数组件没有状态以及生命周期的问题,由于是函数组件,不需要实例化,性能上得到了大大的提升,hooks的设计初衷就是将组件单元化、独立化,形成自己的独立渲染环境;

 优点: 使用的时候更加直观,逻辑代码编写起来更加容易,因为不需要实例化,性能也得到了提升