总结
=============================================================
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。
开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
个人将这段时间所学的知识，分为三个阶段：
第一阶段：HTML&CSS&JavaScript基础
第二阶段:移动端开发技术
第三阶段:前端常用框架
-
推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。
-
大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。
转自：zouwowo
juejin.cn/post/6907189103151087623
前言
本文不会有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中的一等公民，函数式编程方式可以让我们可以更加灵活的去组织代码。
最后
除了简历做到位，面试题也必不可少，整理了些题目，前面有117道汇总的面试到的题目，后面包括了HTML、CSS、JS、ES6、vue、微信小程序、项目类问题、笔试编程类题等专题。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
