响应式系统和React | 青训营笔记

这是我参与「第五届青训营」伴学笔记创作活动的第 6 天，学习了掘金视频课《前端入门——工具篇》第三节课程 “React的历史与应用” ，第四节课程 “React的设计思路” ，第五节课程 “React （hooks）的写法与 React 实现” ，第六节课程 “React 状态管理库与应用级框架科普” ，以下为本次的学习笔记：

React的历史与应用

前端应用开发
移动原生应用开发
综合Election，进行桌面应用开发

2011年 Facebook在其 php 生态中，引入了 xhp 框架，首次引入了组合式组件的思想，启发了后来的 React 的设计。 2010年 Jordan Walke创造了FaxJS，也就是后来的 React 原型。

2012年创造在Facebook收购Instagram 后,该 FaxJS 项目在内部得到使用，Jordan Walke 基于 FaxJS 的经验，创造React。 2013年 React 正式开源，在 2013 JSConf 上 Jordan Walke 介绍了这款全新的框架。 2014年-今天生态大爆发，各种围绕 React 的新工具/新框架开始涌现。

React的设计思路

UI编程痛点

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

组件化实现

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

React （hooks）的写法与 React 实现

useState

普通更新 / 函数式更新 state

useEffect

useEffet 我们可以理解成它替换了componentDidMount, componentDidUpdate, componentWillUnmount 这三个生命周期，但是它的功能还更强大。

有三种写法：

当数组为空 [ ]，表示不会因为页面的状态改变而执行回调方法【即仅在初始化时执行，componentDidMount】，

当这个参数不传递，表示页面的任何状态一旦变更都会执行回调方法

当数组非空，数组里的值一旦有变化，就会执行回调方法

Hook

可以挂到React生命周期上去执行的一个函数(上文举例的useState, useEffect都是hook, 比如说useState时挂载到了onUpdate上，useEffect是挂载到了onMount上) (其它的hook基本上都是useState和useEffect的封装)

Hook的使用法则：不要在循环，条件或嵌套函数中调用Hook

问题

JSX不符合JS标准语法
更新DOM
- Dom操作是比较耗费性能的，特别是将整个页面的Dom删除，重新挂载上新的Dom，是非常耗费性能的，且用户体验很差的一个操作那我们可以对老的Dom结构和新的Dom结构算一个Diff，然后把不同的那部分替换上去，性能开销和用户体验都会好上不少但我们需要注意Diff算法不能太耗时，我们既希望计算出的Diff尽可能小，又计算Diff的时间尽可能短，我们需要在这两者之间取一个平衡

虚拟DOM

React 状态管理库与应用级框架科普

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