这是我参与「第四届青训营 」笔记创作活动的的第13天，今天的课程是「响应式系统与 React」，老师主要讲解了 React历史与应用 、 React的设计思路 、 React的写法 、 React的实现 、 React状态管理库 等内容。

React历史与应用

应用

1、前端应用开发
如Facebook、Instagram、Netflix网页版
2、移动原生应用开发
如Instagram、Discord、Oculus
3、结合Electron，进行桌面应用开发

历史

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

React的设计思路

UI编程痛点

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

组件化

1、组件是组件的组合/原子组件
2、组件内拥有状态，外部不可见
3、父组件可将状态传入组件内部

组件设计

1、组件声明了状态和UI的映射
2、组件有Props/State两种状态
3、组件可由其他组件拼装而成

生命周期

React（hooks）的写法

import React,{useState} from 'react';
...

React的实现

Problems

1、JSX不符合JS标准语法
2、返回的JSX发生改变时，如何更新DOM
3、State/Props更新时，要重新触发render函数

React状态管理库

核心思想：将状态抽离到UI外部进行统一管理。

推荐：