响应式系统与React

由牛岱老师授课，讲述了React的历史与应用、React的设计思路、React（hooks）的写法、React的实现、React状态管理库和应用及框架科普。

一、React历史与应用

React是JavaScript库，是MVC中的view层，与用户的界面打交道。

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

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

二、React的设计思路

推演React 组件设计：

UI编程痛点

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

响应式与转换式响应式系统：监听事件、消息驱动、监控系统、UI界面事件发生后，执行既定的回调函数使状态变更需要实现

状态更新，UI自动更新
前端代码组件化，可复用。可封装
状态之间的互相依赖关系，只需声明即可（如A=B+C的关系，每次不需要再手动维护）

转换式系统：给定【输入】求解【输出】、编译器、数值计算。

组件化

graph TD
Root --> 内容
Root --> 顶栏 --> 橱窗
顶栏 --> 配置面板 --> 型号选择
型号选择-->iPhone13
型号选择-->iPhone13Pro
配置面板 --> 颜色选择
颜色选择-->红
颜色选择-->蓝

（当前价格属于Root节点）

总结

组件是组件的组合/原子组件
组件内部拥有状态，外部不可见
父组件可将状态传入组件内部
状态归属两个节点向上寻找到最近的祖宗节点
将onChangeValue()向下传递

组件设计

组件声明了状态和UI的映射
组件有Props/State两种状态
“组件”可由其他组件拼装而成
组件声明了状态和UI的映射（根据当前的State和Props返回一个UI)

React 推荐使用组合来进行组件的复用，而不是继承，背后有什么样的考虑？降低代码耦合度，提高复用性。通过继承实现的代码复用是一种“白盒复用”，通过组合实现代码复用是一种“黑盒复用”，对象内部细节不可见。

4.状态归属问题

React是单向数据流

三、React（hooks）的写法

代码

import React，{useState} from 'rect';

function Example（）{
const [count, setCount] = useState(0);

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

useState
传入一个初始值，返回一个状态，和set该状态的函数，用户可以通过调用该函数，来实现状态的修改。

useEffect
传入一个函数，和一个数组，数组是状态的数组，称作依赖项，该函数在mount时，和依赖项被set的时候会执行。

自定义hook
将组件逻辑提取到可重用的函数中；不同组件引用自定义hook时，state是互相隔离的。
高阶组件（Higher Order Component）HOC的缺点:
高阶组件就是一个函数，该函数接收一个组件作为参数，返回一个新组件。
返回了一堆无关的标签结构，而自定义hook只需要拿到hook中的变量即可，代码冗余不方便阅读。
推荐使用自定义hook代替HOC。

React代码优化性能

react性能优化、

减少setState,与视图层无关的属性不要放到state上；
不要滥用props；
组件尽可能拆分和解耦，比如input和list组件，list组件最好只在自己数据变化时重新渲染，不然input更新list组件也会重新渲染；
遍历时使用key;
类组件中PureComponent （但因为是浅比较，所以要使用不可突变数据结构，或者用immutable.js跟踪变化）:当父组件更新时，如果子组件的 props 和 state 都没发生改变， render 方法就不会触发，省去 Virtual DOM 的生成和比对过程，达到提升性能的目的。具体就是 React 自动帮我们做了一层浅比较，减少了自己去写shouldComponentUpdate（）：React性能优化：PureComponent的使用原则；函数组件中用memo、useCallback、useMemo。
懒加载

React和Vue

React 这种函数式编程，和 vue 这种基于模版语法的前端框架，各有什么优势和缺点？

react是单向数据流，vue是双向数据绑定，比起vue，react的单项数据流使得代码量更多一些；
react是函数式编程，易于封装和扩展，灵活度更高，具备丰富的js库；vue的灵活度不如react；
react生态圈强大，同时适用于web端和原生app
react写的是jsx，写起来更接近原生js，经过转译会变成js，自由度高；而vue用了很多模板语法，自由度变低；

响应式系统与React | 青训营