这是我参与「第五届青训营」笔记创作活动的第13天

一、本堂课重点内容：

React的历史与应用、React的设计思路、React (hooks)的写法、React的实现、React状态管理库、应用级框架科普。

二、详细知识点介绍：

1.React的历史与应用

2010年Facebook 在其php生态中，引入了xhp框架，首次引入了组合式组件的思想，启发了后来的React的设计。
2011年Jordan Walke创造了FaxJS,也就是后来的React原型。
2012年在Facebook收购Instagram后，该FaxJS项目在内部得到使用，Jordan Walke基于FaxJS的经验，创造了React。
2013年React 正式开源，在2013 JSConf上Jordan Walke介绍了这款全新的框架。
2014年到今天生态大爆发，各种围绕React的新工具/新框架开始涌现。

2.React的设计思路

状态更新，UI不会自动更新，需要手动地调用DOM进行更新。
欠缺基本的代码层面的封装和隔离，代码层面没有组件化。
UI之间的数据依赖关系，需要手动维护，如果依赖链路长，则会遇到"Callback Hell"。

3.React (hooks)的写法

import React { useState } from 'react';
function Example() {
const [ count,setCount ] = useState(0) ;
useEffect(() => {
document.title ='You clicked ${count} times';
});

return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1) }>
Click me
</button>
</div>
);
}

4.React的实现

Virtual DOM (虚拟DOM)

Virtual DOM是一-种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立对应的关系。
它赋予了React声明式的API:您告诉React希望让UI是什么状态，React 就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。

React状态管理库

redux
xstate
mobx
recoil

应用级框架科普

1. next.js

硅谷明星创业公司Vercel的React开发框架，稳定，开发体验好，支持Unbundled Dev, SWC等，其同样有Serverless 一键部署平台帮助开发者快速完成部署。口号是“Let's Make Web Faster”。

2. MODERN.js

字节跳动Web Infra 团队研发的全栈开发框架,内置了很多开箱即用的能力与最佳实践，可以减少很多调研选择工具的时间。

3. Blitz

无API思想的全栈开发框架，开发过程中无需写API调用与CRUD逻辑，适合前后端紧密结合的小团队项目。

三、课后个人总结：

通过对本次课程的学习让我对React有了更加深入的了解，了解的react的发展历史和设计思路，还知道了一些跟react相关的技术，让我对react的了解不仅仅局限于如何使用react。

四、引用参考：

掘金-字节内部课程-React

React|青训营笔记