重新系统学习React的路径

时隔半年，又重新用回了React的框架。
这次因为没有人带我，也暂时没有分配任务，所以留给我的学习时间是很充裕的。况且，经过小半年的实习，我也成长了很多，对前端的认识已经提高了不少。更开心的是，从WINDOWS系统升级到了MBP的MacOS系统，操作和环境搭建也有些许不同。带着不一样的心情，再次重新学习React给我带来的感触良多。这次学习的轨迹确实值得记录一下。

1. react的官网

因为这一次的时间比较充裕，自己的技术水平也比较高了，于是，我并不追求立刻上手的快速搭建。这一次，我选择了稳扎稳打的保守学习路径，即从官方文档入手。
写过文档的人都知道，每一份文档都是一位技术人泣血的结晶，必定是吹毛求疵式的尽善尽美。而React这种占有量巨大的前端框架的官方文档一定也是考虑良多，尽量会给水平不一的使用者提供最大可能的帮助的。因此我选择了从官网入手。
并且，官网的风格也在很大程度上体现了这个框架的风格。多说无益，上手。

1）React官网首页

首先，我选择了官网的首页React官网首页。之前实习因为是急着上手做需求，所以直接就上手实践，甚至开始看项目文档了。但是现在既然选择了稳扎稳打夯实基础，自然不能这么冒进。
由于太过初学者的线上修改代码太小学生气质了，所以，我从官网推荐的Tania Rascia 的 React 概览开始入手。这位姐姐的博客写的很简洁，直戳重点，对React的组件的概念以及传参的概念的解释很容易理解。
这一篇博客也解决了我在之前直接上手就做的过程中产生的问题：

• 为什么React的组件可以直接引入，在使用时直接标签这个名字就可以了？

在之前我做的时候，一直以为React render的语言就是HTML，所以上述的东西让我很疑惑。但是这篇博客对React使用的语言的介绍让我恍然大悟。这些东西看起来很基础，但是可能是因为过于基础，在之前的学习中才会一直被我忽略掉。
当然，JSX更接近HTML，其在使用中的注意事项还有如下几点

1. className用于代替class添加CSS类（classJavaScript中的保留关键字）。
2. JSX中的属性和方法为camelCase- onclick将变为onClick。
3. 自闭合标签必须以斜杠结尾-例如 <img />

而在Javascript语言的使用中，JSX语言也有很多便利之处。例如
JavaScript表达式也可以使用大括号（包括变量，函数和属性）嵌入JSX内。

const name = 'Tania'
const heading = <h1>Hello, {name}</h1>

2） React实践教学

在这一部分中，我跟着教程实现了一个能够判断输赢的井字棋。
主要做了如下工作：

1. 在macOS的环境下安装了Node.js以及npm，首先搭建好了React开发的环境，这里不得不感叹一句，mac真的好好用啊！
2. 在mac上面安装了我比较习惯使用的编辑器：vscode，顺便安装了几个比较好用的插件，我一般用的都是补全、标记还有框架相关的插件，太多了比较繁琐。
3. 跟着教程一步一步去做。

最终实现了一个井字棋。
效果如下：
没法生成gif图，后续再补上，反正就是有了一个游戏的效果。

一些思考

在进行这个小游戏的开发的过程中，我并没有遇到什么困难，但是我发现了一个很有意思的东西，那就是在每一次传参之前都会有一个super(props)的操作。
但是在我之前进行vue的开发的过程中，并没有这样的操作。上一次见到super这个函数（？）还是在看红宝书的时候，原型链那一节中介绍到的，子类继承父类的构造器时使用的。
不会就问谷歌吧。
查到了很多相关的资料，下面整理一下的对这个问题理解的路径。

1. 首先是对super的理解。
   之前在看书也好，做项目也好的时候，基本没有用到过super这个函数，了解也仅限于它是子类用来继承父类的一座桥梁。
   这一部分的理解主要参考super - Javascript | MDN

总结起来，就是一句话，super前子类没有this，super后子类才有this。
然后是一篇大概最著名的关于我们为什么要写super(props)
的帖子：为什么我们要写 super(props) ？
第一次搜索的时候，google给我推送的就是这一篇帖子，起初我在基本忘记了类与继承的相关知识的时候直接去看了这篇帖子，结果看得云里雾里的。然后，我又去了解了上面的👆关于super的解释，再回过头来看这篇帖子。
这篇文章首先对前面提到的那个super的作用举例进行了解释，然后对super()和super(props)的区别进行了分析。
总之就是super()在构造函数执行完之后再给出this，所以如果你中间有用到this指针的话，就会报出undefined的错误。
今天先看到这里，后续再补充。