本文正在参加「金石方案」

最近面试嘛，然后被面试官问到了这个问题： “React 函数式组件和类组件的区别是啥子捏。”

我本来准备拿最近实习期间遇到的一个很蠢的问题来阐明的，成果越说越不清楚。

不敢贴公司的代码（doge），我写个简略版别

背景介绍：
大致的场景是有两个 input 输入框，还有一个数组 Arr

我需求让第一个输入框的值赋值为 Arr[0]， 第二个输入框的值赋值为 Arr[1]，可是现在的情况是：我在第一个框里边填为 true，Arr = [true] ，可是当我在第二个框里边再填入 false 的时候，Arr = [false]。

为什么被覆盖掉了呢？

后来想了一会，用 useRef 包裹之后，就得到了我想要的成果，Arr = [false]

你看写出来都这么杂乱，我其时面试的时候说的更是一团乱麻，

先来说说这个情况

  1. 为什么加了 useRef 就可以？useRef 是什么玩意？

useRef 回来一个可变的 ref 目标，其 .current 属性被初始化为传入的参数（initialValue）。回来的 ref 目标在组件的整个生命周期内坚持不变。

看到了么！！！ ref 目标在组件的整个生命周期内坚持不变！！！

而 函数式 组件并不像 class 组件一样维护自己的状况，仅仅只是一个 render 函数，这也就意味着他改写一次里边的数据就没了，概念类似于一帧一帧，所以需求 useRef 把它抽离的整个生命周期里边。

再来聊聊咱们该怎么答

首先是不能用这种含糊的比如来答，最好是用有总结性的句子来答。

咱们一点一点地说：

  1. 语法上：“函数组件是一个纯函数，它接收一个 props 目标回来一个 react 元素； 类组件需求去承继 React.Component 而且创立 render 函数回来 react 元素，尽管实现的效果相同，但需求更多的代码。”

类是组合寄生承继的语法糖，假如咱们需求转译成 ES5 之前的代码，咱们需求更多的预置代码，从而导致体积更大。

  1. 功能上：“之前，在运用场景上，假如存在需求运用生命周期的组件，那么主推类组件；规划形式上，假如需求承继，也是类组件。但现在因为 React hooks 的推出，生命周期概念的淡出，函数组件完全可以取代类组件。其次承继也不是组件最佳的规划形式，官方更推重“组合优先于承继”的规划概念，所以类组件在这方面的优势也在淡出。”

  2. 类组件在未来事件切片与并发形式中，因为生命周期带来的杂乱度，并不易于优化。而函数组件本身轻量简略，且在 Hooks 的基础上提供了比原先更细粒度的逻辑组织与复用，更能运用 React 的未来发展。

  3. 调用方法

// 假如是函数组件的话
const component = render()
// 假如是类组件的话
const instance = new SayHi(props)
const result = instance.render()
  1. 还有一点就比较杂乱了：“React类组件因为存在 this，所以会导致，有时候调用时运用 this 导致值并非咱们想要的，而函数组件并无 this，保留的是其时那一个切片的状况，所以没有问题。”
  • 一句话归纳：函数式组件捕获了烘托时所运用的值，这是两类组件最大的不同。

这儿假如想要具体的看比如可以看这个 获取烘托上的值

  1. 在代码复用层面，hooks 替代了 HOC 和 render props。

那么这就是我想说的全部内容啦，看完了点个赞再走吧～