精进React中
# 精进React中
研究React源码的三个基本学习点
- 学习他的思想：React团队是一个非常注重用户体验和性能的团队，研究了大量的人机交互，其研究结果的体现之一就是React的Fiber架构和Scheduler调度器上面。使用了大量的操作系统的知识理论。
- 后面发现React中的很多思想其实跟Linux中思想如出一辙，或许React团队从中借鉴了一些思想
- 对于我自己使用React更有利。懂原理。
- 另外就是学习JS的各种API，尤其是Object：
# React 版本
React 遵循语义化版本（semver） (opens new window)原则。
也就是说，若当前版本号为 x.y.z，则:
- 当出现严重 bug 并修复时，我们会通过修改 z 来发布一个修订版本（如：15.6.2 至 15.6.3）。
- 当发布新功能或修复非严重 bug时，我们会通过修改 y 来发布一个次要版本（如：15.6.2 至 15.7.0）。
- 当发布破坏性更新时，我们会通过修改 x 来发布一个主版本（如：15.6.2 至 16.0.0）。
主版本也可能包含新功能，任何一个版本都可能包含问题修复。
次要版本是最常见的版本发布类型。
React（也被称为React.js或ReactJS）是一个用于构建用户界面的JavaScript库。它由Facebook和一个由个人开发者和公司组成的社区来维护。
React可以作为开发单页或移动应用的基础。然而，React只关注向DOM渲染数据，因此创建React应用通常需要使用额外的库来进行状态管理和路由，Redux和React Router分别是这类库的例子。
虚拟 DOM
另一个值得注意的特点是React使用了虚拟文档对象模型，也就是虚拟DOM。React创建了一个内存中的数据结构缓存，计算得出变化差异，只渲染实际变化的子组件, 从而高效地更新浏览器显示的DOM。
生命周期方法
生命周期方法是指在组件的生命周期内，允许在设定的点执行代码的hooks处理函数。
- shouldComponentUpdate允许开发者在不需要渲染的情况下，通过返回false来防止不必要的重新渲染组件。
- componentDidMount是在组件 "挂载 "后调用的（组件已经在用户界面中创建了，通常是通过将其与DOM节点关联起来）。这通常用于通过API从远程数据源触发数据加载。
- componentWillUnmount是在组件被拆解或 "解挂 "之前立即调用的。这通常用于清除组件的资源依赖关系，这些依赖关系不会随着组件的卸载而简单地被移除（例如，移除任何与组件相关的setInterval()实例，或者因为组件的存在而在 "文档 "上设置的 "eventListener"）。
- render是最重要的生命周期方法，也是任何组件中唯一必须存在的方法。它通常在每次更新组件的状态时都会被调用。
JSX
JSX，即JavaScript XML，是对JavaScript语言语法的扩展。JSX在外观上类似于HTML，它提供了一种开发者熟悉的语法结构化组件渲染的方法。React组件通常是使用JSX编写的，尽管不一定非要使用JSX（组件也可以用纯JavaScript编写）。JSX类似于Facebook为PHP创建的另一种名为XHP的扩展语法。
嵌套元素
同一层次上的多个元素需要被包裹在一个容器元素中，如上图中的<div>元素。
属性
JSX提供了一系列的元素属性，旨在对应HTML提供的属性。这些自定义的属性也可以传递给组件，所有的属性都会被组件作为props接收。
# JavaScript表达式
JavaScript表达式（但不是语句）可以在JSX内部通过大括号{}使用。
用JSX编写的代码需要被Babel等工具进行转换以后才能被Web浏览器所理解，这种处理一般是在软件构建过程中进行的，然后再部署构建后的应用程序。
超越HTML的架构
React的基本架构不仅仅适用于在浏览器中渲染HTML。例如，Facebook有动态图表，可以渲染到<canvas>标签，而Netflix和PayPal使用通用加载，在服务器和客户端上渲染相同的HTML。
React Hooks
Hooks是让开发者从函数组件中 "钩入"React状态和生命周期特性的函数。它们使代码具有更强的可读性且更易理解。Hooks并不在类组件内工作，它的终极目标是在React中消除类组件的存在。
React提供了一些内置的Hooks，如useState、useContext、useReducer和useEffect等。它们都在Hooks API参考书中做了说明。使用最多的是useState和useEffect，分别在React组件中控制状态和检测状态变化。
Hooks规则
Hooks也有一些规则，在使用Hooks之前必须遵循这些规则:
- 钩子只能在顶层调用（不能在循环或if语句中调用）。
- 钩子只能在React函数组件中调用，不能在普通函数或类组件中调用。
定制Hooks
构建自己的Hooks，也就是所谓的自定义Hooks，可以让你把组件逻辑提取到可重用的函数中。自定义钩子是一个名称以 "use "开头的JavaScript函数，它可以调用其他的钩子。钩子的规则也适用于它们。
常用术语
React并没有试图提供一个完整的 "应用程序库"。它是专门为构建用户界面而设计的，因此并不包括许多一些开发者认为构建应用程序所需的工具。这使得开发者可以选择任何一个库来完成诸如执行网络访问或本地数据存储等任务。这种情况也就决定了React技术在创建网页应用时标准无法统一。
Flux架构的使用
为了支持React的单向数据流的概念（与AngularJS/Angular的双向数据流形成对比），Flux架构是流行的模型-视图-控制器(MVC)架构的具有代表性的替代方案。Flux的特点是，数据动作通过中央调度器发送到一个存储仓库，而对存储仓库数据的变化会被传送回视图。当与React一起使用时，这种传送是通过组件属性完成的。
Flux可以被认为是观察者模式的一个变种。
Flux架构下的React组件不应该直接修改传递给它的任何props，而是应该传递回调函数，这些回调函数可以创建由调度器发送的数据动作来修改存储仓库。数据动作是一个对象，其职责是描述已经发生的事情：例如，一个数据动作描述的是一个用户 "follow"另一个用户。它可能包含如下数据：
用户ID，
目标用户ID，
以及USER_FOLLOWED_ANOTHER_USER枚举类型。
存储仓库，是一个数据模型，可以根据从调度器接收到的数据动作来改变自己。
这种模式有时被表述为 "属性向下流动，数据动作向上流动"。自Flux诞生以来，Flux的许多实现被创造出来，其中最著名的是Redux，它的特点是单一的存储仓库，通常被称为单一的数据真相源。
历史
React是由Facebook的软件工程师Jordan Walke创建的，受PHP的HTML组件库XHP的启发，发布了React的早期原型，名为 "FaxJS"，。它于2011年首次部署在Facebook的News Feed上，后来于2012年部署在Instagram上。2013年5月在美国JSConf大会上开源。
React Native是2015年2月在Facebook的React Conf上宣布的，2015年3月开源的React Native，实现了原生的Android、iOS和UWP开发。
2017年4月18日，Facebook宣布了React Fiber，这是React库的一个新的核心算法，用于构建用户界面，React Fiber将成为React库未来任何改进和功能开发的基础。
2017年9月26日，React 16.0正式对外发布。
2019年2月16日，React 16.8正式对外发布，该版本引入了React Hooks。
常用命令
创建工程：
npx create-react-app my-app
开发环境运行：
npm start
生产环境打包：
npm run build
【官方网站】
http://reactjs.org/ (opens new window)
# React简史
我们都知道脸书是由扎克伯格在在大学里面做的一个项目。当时他采用的语言是PHP，这门动态语言被很多人认为是"世界上最好的语言"，而发展至今，脸书大部分的应用依然采用PHP作为后端开发语言。我们都知道PHP是解释性的脚本语言，效率没有java，C#这些编译型语言执行效率高，因此脸书自己开发了一个php虚拟机，这个虚拟机就是大名鼎鼎的HHVM。因为有了HHVM,使得php的执行效率有了大幅提升，因此PHP一直是脸书的主流开发语言。
脸书为了使得PHP更加的好用，它开发了一个PHP扩展XHP，这个扩展主要是用来在php中输出xml代码，这样可以很方便地实现网页中的一些效果。受到XHP的启发，乔丹·沃尔克开发出了JS版本的XHP，也就是我们今天熟知的ReactJS最早的版本。ReactJS一经推出，就被大量使用在了脸书的新闻流推送里面，实践证明，这种开发效率非常高效。在2012年的时候，照片墙（Instagram）这个应用也大量才用了react这个技术。好东西要学会分享，在2013年的js开发者大会上，ReactJS被开源了。我们都知道开源社区是非常强大的，开源的React在短短几年就积累了大量的扩展，这让react一下子就成为了三大框架之一。
如果React只能做网页，我相信还不能让这么多人追捧它。但是在2015年的时候，React Native的出现，让React可以开发手机应用了，这对于混生应用开发者就是一种福利。有了它，前端工程师也可以是android和ios工程师了。
可能大家谁也没有想过，发展如此成功的ReactJS差一点就会走向衰落。在2016年的时候，脸书修改了ReactJS的开源协议，就是人们使用ReactJS做出来的产品将受制于脸书。这让很多厂商和开发者望而却步。Apache，wordpress等组织开始宣布封杀和弃用React，一时间React陷入了泥潭。本来欣欣向荣的社区，一下子仿佛被泼上了一盆冷水，一下子人们都开始纷纷考虑是否要使用其它的框架。
值得庆幸的事，脸书很快意识到了自己错误，从React 16开始，React的开源协议又修改回了MIT协议，人们又可以愉快地玩耍了。但是不得不提的是，经历了之前的风波，很多人心理还是会有芥蒂的。因为人们不知道未来脸书会不会突然又修改了开源协议。
很早的时候，我们前端的代码都是写在一起的，什么css，js和html都是放在一起。后来为了分离，我们将js还有css都放到了单独文件里面。而react的出现，又将js和html放到了一起，真是应了中国的一句古话：天下大势，分久必合合久必分。
React的组件思想让前端复用不再是纸上谈兵，前端发展已经到了工厂时代。以后的前端组件将会像是一个个汽车的轮子一样，人们想搭建一个应用，只需要去市场上找寻自己想要的组件（汽车配件），然后组装即可。
UI世界瞬息万变，虽然最终可能三大框架都会被取代，但我相信React在那之前已经证明了它自己，做到了一个构建用户界面的javascript库该做的。