React 函数式组件与类组件的区别，你还在模糊表述么？

阳树阳树
2,901 阅读3分钟

本文正在参加「金石计划」

最近面试嘛，然后被面试官问到了这个问题： “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。

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

avatar
文章
阅读
粉丝