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

一、React历史与应用

React是由Facebook开发的一款用于构建用户界面的JS库。

发展历程：

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

二、React的设计思路

1.UI编程痛点

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

2.响应式与转换式

响应式编程：事件→执行既定的回调→状态变更→UI更新

状态更新，UI自动更新
前端代码组件化，可复用，可封装
状态之间的互相依赖关系，只需声明即可

3.组件化

组件是组件的组合/原子组件
组件内拥有状态，外部不可见
父组件可将状态传入组件内部
组件内部拥有私有状态State
组件接受外部的Props状态提供复用性
根据当前的State/Props，返回一个UI

4.状态归属问题

状态归属于两个节点向上寻找到最近的祖宗节点

5.组件设计

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

三、React（hooks）的写法

import React, { useState, useEffect } from 'react' ;
  function Example() {
  const [ count, setCount] = useState(0) ;
  // Similar to componentDidMount and componentDidUpdate:
  useEffect(() => {
    // Update the document title using the browser API
    document. title =、 You clicked ${count} times^ ;
  });
return
  <div>
    <p>You clicked {count} times</p>
    <button onClick={() => setCount(count + 1)}>
      Click me
    </button>
  </div>
);
}

四、React的实现

1.problems

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

2.how to diff？

完美的最小Diff算法，需要O(n^3)的复杂度。
牺牲理论最小Diff，换取时间，得到了O(n)复杂度的算法：Heuristic O(n) Algorithm

diff算法规则：
不同类型的元素→替换
同类型的DOM元素→更新
同类型的组件元素→递归

五、React状态管理库

将状态抽离到UI外部进行统一管理

六、应用级框架科普

next.js ：硅谷明星创业公司Vercel的React开发框架，稳定，开发体验好，支持Unbundled Der， SWc等，其同样有Serverless一链部署平台帮助开发者快速完成部署，口号是Ler's Make web Fasier”
modern.js ：字节跳动Web Infre团队研发的全栈开发框架，内置了很多开箱即用的能力与最佳实践，可以减少很多调研选择工具的时间
Blitz：无API思想的全栈开发框架，开发过程中无需写API调用与CRUD逻辑，适合前后端紧密结合的小团队项目

七、课后总结

本章节学习了响应式编程和React的相关知识，从React的发展历程、设计思路，到React的实现以及应用等，逐步了解React的基础知识，由于第一次接触相关内容，对知识点的理解与掌握不太牢固，需要课后多加学习了解，更深一步学习React的相关应用。

响应式编程与React | 青训营笔记