大家好，我是耳东。深刻面试系列是我专门针对面试而写的一系列前端进阶文章，对标人群是一到五年须要进阶的前端，这是第 1 篇。

为什么要保持写这么个系列呢？因为咱们平时的业务开发工作中很难间接接触到一些原理性的常识，也没工夫做系统性的总结，这妨碍了咱们的技术成长，而这些货色是程序员进阶和面试胜利必然要把握的，所以深刻的去了解和总结一些常识是很有必要的，心愿能够始终坚持下去。

本文能够解决哪些面试问题：

1. React 有哪些能够复用组件逻辑的办法？
2. React 高阶组件和 Render Props 的区别是什么？

读者能够在读完本文之后试着答复一下这两个问题，说不定在下次面试就会被问到。

背景

纵观整个 React 开发，值得咱们关注以及设计的一大类问题即是组件如何封装和复用，咱们能够轻易的应用 React 组件来封装复用 UI，然而对于一些多个组件都会用到的逻辑，咱们如何做到优雅的复用呢？

比方思考这个一个场景，有两个组件，它们都须要一个统计组件被点击次数的逻辑，很显然这个逻辑是能够并且值得被复用的，那么咱们有哪些形式去复用呢？

有面向对象设计教训的程序员第一反馈必定是设计一个领有统计组件点击次数办法的父类，而后任意的组件类再去继承这个父类。

然而在 React 生态中，咱们举荐应用组合的形式来代替继承实现组件之间的逻辑复用。接下来，我将通过高阶组件（high order component）、render props、hooks 的形式来总结 React 如何复用组件逻辑。

hoc

首先咱们介绍高阶组件。
什么是高阶组件（high order component）呢？简略的说，它是一个办法，这个办法接管组件并且返回一个新组件，这样子岂但能够不必毁坏原有组件的逻辑，还能加强原有组件的性能，比方在 Redux 库中就会常常用到。
回忆一下咱们刚刚说的那个场景，如果咱们把次数状态、点击计算逻辑抽取到一个 clickCountHoc 组件中，那么所有须要此逻辑的组件都能够用高阶组件的形式与 clickCountHoc 组件做一个组合，那么就能够领有统计组件点击的能力。
以下是 demo 代码示例（源代码地址：react-component-combination）：

这样子当前不论是什么组件须要统计点击次数的逻辑，都能以高阶组件的形式来加强能力。
高阶组件在平时的业务开发中有很多用到的中央，比方对立打印日志、对立捕捉谬误上报、提取公共函数等等。

render props

接下来咱们介绍 renderProps。

render props 是一项通过 props 来告知组件须要渲染什么内容的技术，它的应用场景是什么呢？
很多时候咱们渲染一个组件，然而它的逻辑和数据却依赖于父组件，这种状况下咱们能够把那局部能够复用的逻辑抽取在父组件中，并且在父组件裸露一个参数来接管渲染子组件的办法，并且通过这个办法把子组件所依赖的数据传给它，这种形式就是 render props。

以下是 demo 代码示例（源代码地址：react-component-combination）：

这种形式，子组件齐全不必关怀父组件的逻辑，只有依照父组件传来的数据做渲染即可，所有高阶组件能够做到的事件，用 render props 都能够做到。

那么它跟高阶组件的区别是什么呢？render props 的应用思路是管制反转，子组件通过 render props 的形式定义好渲染本身的函数，父组件再把子组件须要的数据传给这个函数，子组件拿到数据后能够随便的渲染本身。

hooks

最初咱们介绍 hooks。

React hooks 是从 React 16.7.0-alpha 开始有的新个性，咱们通过它也能够来实现逻辑复用。
对于 hooks 的技术原理与设计我在接下来的深刻面试系列讲到，当初咱们只通过 hooks 来封装获取以后鼠标在屏幕坐标值的逻辑，以下是 demo 代码示例（源代码地址：react-component-combination）：

hooks 除过封装状态以外，还有有一些其余的 API 可供使用，咱们前面再讲。就目前这个 demo 看，hooks 的书写逻辑很清晰、复用不便，并且间接应用函数式组件，短小精悍，将会是将来通用的封装逻辑形式。

我是耳东，目前在某大厂做前端，我的公众号是「前端耳东」
公众号每周都会更新文章，次要包含：
1、前端技术分析，不论是新技术尝鲜、源码解析、连载教程，我都会波及到
2、程序员相干的职场教训，比方程序员如何降职、程序员跳槽应该留神什么等等
除此之外，还提供以下几项服务：
1、收费批改简历
2、收费技术咨询
3、收费技术布局
欢送关注「前端耳东」