Web前端最全第一个 React 项目做完了，谈谈自己对 hooks 的思考(1)，字节跳动+阿里+华为+腾讯等大厂前端面试题

最后

如果你已经下定决心要转行做编程行业，在最开始的时候就要对自己的学习有一个基本的规划，还要对这个行业的技术需求有一个基本的了解。有一个已就业为目的的学习目标，然后为之努力，坚持到底。如果你有幸看到这篇文章，希望对你有所帮助，祝你转行成功。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

本文不会有React具体应用的内容，只是一些对于hooks跟之前的类组件的比较，对于hooks本身的思考。

笔者在今年的8月份入职现在的公司，从原来的vue转为React。因为公司还存在一些比较老的项目，所以前期并没有完全投入到React的项目开发当中。从10月份开始，参与了一个公司层面的新项目从0到1的构建过程，这也是我第一个React项目。我们是全面拥抱hooks的，这个项目的开发过程中，我也写了很多自定义的hooks方法，封装了好几个通用的功能组件，也算是熟练了React的具体应用。

项目开发初期，我一直有个疑惑，我在入职之前学习React的时候，其实很多的教程都是使用的类组件的方法，很少看到hooks的相关教程。自己边学边写demo的时候使用的也都是类组件的写法，但是现在越来越多的团队开始全面拥抱hooks，hooks到底有什么优点？我将在下面提出一些自己的思考和想法。

类组件和函数组件区别

---

这里要注意，类组件和hooks，这两个东西其实并不是一个概念。hooks只是一个工具集，用来增强函数组件的功能。真正要对比的应该是类组件和函数组件。

我们先来看看类组件和函数组件的区别。

代码写法上的区别

这是最直观的区别，代码就长的不一样嘛。我随便列几个很常见的例子，这些特性在函数组件里都没有。

• 类组件，顾名思义，它就是一个类，需要继承Class。

• 类组件可以直接定义state

• 类组件有生命周期方法

• 类组件可以使用this获取到组件实例

心智模型上的区别

这是两个组件之间最大的区别，用https://overreacted.io/zh-hans/how-are-function-components-different-from-classes/中的话来说。

函数式组件捕获了渲染所用的值。

我们引用文章里的一个例子

function ProfilePage(props) {

const showMessage = () => {

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

};

const handleClick = () => {

setTimeout(showMessage, 3000);

};

return (

关注

);

}

复制代码

class ProfilePage extends React.Component {

showMessage = () => {

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

};

handleClick = () => {

setTimeout(this.showMessage, 3000);

};

render() {

return 关注;

}

}

复制代码

我们用类组件以及函数组件实现了同一个逻辑。这两个组件都会接收一个props.user的属性，我们点击按钮，在3秒之后，会alert一条成功关注的信息。

假如一开始传入的props的值是 { user: '帅wowo' },然后我们点击关注按钮，在3秒之内，传入的props值变化了，变成了{ user: '丑wowo' }。这两个组件将分别alert出什么内容？

有过经验的同学肯定能轻松答出来。

// 函数组件会打印

‘成功关注 帅wowo’

// 类组件会打印

‘成功关注 丑wowo’

复制代码

为什么会这样呢？（这里注明一下，这个例子跟React框架无关，只是js的基本特性，你在任何用js编写的代码中都可以复现）

在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的作用域。

web浏览器中的javascript

• 客户端javascript
• 在html里嵌入javascript
• javascript程序的执行
• 兼容性和互用性
• 可访问性
• 安全性
• 客户端框架
• 开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

window对象

• 计时器

• 浏览器定位和导航

• 浏览历史

• 浏览器和屏幕信息

• 对话框

• 错误处理

• 作为window对象属性的文档元素