第一个 React 项目做完了，谈谈自己对 hooks 的思考，2024年最新腾讯前端开发面试经验

2401_83621784

已于 2024-04-11 06:35:44 修改

阅读量668

点赞数 14

分类专栏： 2024年程序员学习文章标签： react.js 面试 javascript

于 2024-04-11 06:35:42 首次发布

本文链接：https://blog.csdn.net/2401_83621784/article/details/137621482

版权

2024年程序员学习专栏收录该内容

268 篇文章 0 订阅

订阅专栏

本文讨论了React中类组件与函数组件（特别是使用hooks）的优缺点，强调了函数组件的轻量性、灵活性以及hooks带来的闭包陷阱和性能优化挑战。作者还提到了hooks在设计理念上的优势，以及它对团队开发规范的影响。

摘要由CSDN通过智能技术生成

在React的类组件中，props虽然是不变的，但是this永远是可变。当有异步的事件触发，它获取到的props或者state永远都是最新的。当然我们也有办法去解决。

比如我们可以重新定义一个数据来保存`props

handleClick = () => {

const {user} = this.props;

setTimeout(() => this.showMessage(user), 3000);

};

复制代码

但这种方式太过繁琐，各种定义的数据非常不够优雅。

或者把事件都写到渲染函数render中

class ProfilePage extends React.Component {

render() {

const props = this.props;

const showMessage = () => {

alert('成功关注 ’ + props.user);

};

const handleClick = () => {

setTimeout(showMessage, 3000);

};

return 关注;

}

复制代码

这个方法其实函数组件的原理，props变化之后，组件虽然重新渲染了，但是老的props通过闭包保存了下来，然后被打印出来。

写了这么多，只是为了论证那句话，函数式组件捕获了渲染所用的值。

为什么我们要使用函数组件+hooks

这一点很多人可能觉得没必要，觉得官方出的东西，跟着用就好，写着也挺顺手的，还管啥为什么呢？

关于这一点，我觉得最重要的其实就是学习大佬们的思维，为什么要做出一个hooks来？肯定是为了解决一些原来的开发过程中的问题。React团队的设计层面的思路，能够在一定程度上代表当前业界在框架设计领域里最佳实践。

接下来我会列出几个我认为的类组件的几个痛点。（好和坏都是比较出来的，这些痛点只是相比于函数组件+hooks而言，技术在不断发展，技术的迭代都是正常的趋势）

1.函数组件的写法更轻量，更加灵活

在函数组件中，我们不需要去继承一个class对象，不需要记忆那些生命周期，不需要固定的把数据定义在state中。函数作为js中的一等公民，函数式编程方式可以让我们可以更加灵活的去组织代码。

2.类组件存在自身的缺陷

一个其实就是上面一节写到，如果我们需要一个只跟着视图走的数据，我们不能直接使用props或者state。

还有一个是最常见的，在React中，如果我们定义一个方法，我们必须使用bind或者箭头函数去约束这个方法的this的作用域。

这两个问题虽然我们都能解决，但是本质上，都是我们通过代码实践的方式去解决类组件自身的缺陷。

但是在函数组件中，我们不会有这种问题，通过闭包的方式，在一次渲染中，组件的props和state是保持不变的，而且传递的方法本身就是已经被约束作用域了。

3.逻辑是分散的，而且难以复用

这个痛点其实跟vue2是一模一样的，React的类组件和vue2的开发模式都是类似。

我拿一张尤大来谈论vue2和vue3区别时候的一张图来举例

这里的不同颜色其实就是不同逻辑，这图可以分成数据，事件方法，生命周期，模板四块内容。

我们可以看到，一个逻辑在类组件里其实是分散的，拿React来说，数据需要定义在state里，然后需要编写相关的事件方法，再在生命周期里进行逻辑的初始化，组件更新时候的处理，最后在模板里写jsx。

我们如果是去维护这个代码，会很痛苦，为了查看一个逻辑，我们要上下翻，找出各自的数据，方法，生命周期和模板。

而且这种方式的代码，很难被复用，抽离重复逻辑我们经历过mixin，HOC & render-props。这两种方式都有一个最大的问题，那就是props的来源不够清晰。mixin就不说了，都是泪，只能一个个去找。HOC嵌套层级一多，也会很难确定来源，而且HOC的学习成本也相对比较高，对于新手不太友好。（这块是按我vue2开发用到的mixin和HOC的经验写的，我作为React的新手，并没有经历过React的mixin和HOC抽离逻辑的时代，所以如果写的有问题，请各位大佬指出。最后感叹一句，React用HOC可太方便了!）

但是如果我们使用hooks，我还是用一张vue3中组合式API的图来说明，跟使用hooks的结果是类似的。

每块逻辑都是一个整体，非常清晰明了。而且你可以把这些逻辑都抽离出去，只是在这个组件当中引用即可。

逻辑复用就不用说了，现在谁家React项目里没有好多自定义的hooks啊。

4.hooks更贴合React的基本理念

React的设计理念里第一条

React的核心理念之一，相同的参数输入应该产生相同的输出。简单说，它应当是一个简单的纯函数。

我们可以拿之前说到的心智模型上的区别中的例子来说明，我们传入一个props参数{ user: '帅wowo' }，我们希望关于这个参数的所有事件都强依赖于这条数据。它不应该像类组件一样，传入的参数和我们得到的输出不一致。

但是函数组件可以做到，重复引用一下上面的一句话，在一次渲染中，组件的props和state是保持不变的。

hooks的不足

谈论一个技术，我们不能太过于片面，一定要保持辩证思维，理性分析。上面说了很多hooks的优点，但是它依然存在着不足。

1.比较大的心智负担

同样是因为上面那句话，在一次渲染中，组件的props和state是保持不变的。这个特性导致的闭包陷阱是我们现在开发中最常见的一个问题。我们需要时刻注意是否已经给hooks添加了必要的依赖项。在封装一些功能相对复杂的组件时，useEffect的重复渲染问题处理有时候会非常棘手，而且不易调试。

这个特性在对函数组件进行性能优化时也是会带来很大的麻烦，因为每次props和state数据变化，都会导致函数组件中所有内容的重新渲染。我们需要通过memo，useMemo，useCallback这些方法手动去减少组件的render。当一个组件结构比较复杂，嵌套较多时，依赖项问题的处理也很让人头疼。具体性能优化的内容，可以看我之前的文章。

这些点给开发者带来的学习hooks的成本相比较类组件来说会更大。