这是我参与【第五届青训营】笔记创作活动的第六天

2023.01.30

React

React是单向数据流

响应式编程

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

组件化

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

组件设计

• 组件声明了状态和UI的映射
• 组件有Props/State两种状态
  • 组件内部拥有私有状态State
  • 组件接收外部的Props状态提供复用性
  • 根据当前的State/Props，返回一个UI
• “组件”可由其他组件拼装而成

状态归属问题

如果想要两个组件的状态共享，那么状态归属于两个节点向上寻找到最近的祖宗节点。

React(hooks)的写法

useState

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

useEffect

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

• 有“副作用”的函数，要传入useEffect来执行。副作用代表除了单纯的计算之外，还要做其它的一些事情，比如网络请求，更新DOM，localStorage存储数据等。

React的实现 — Problems

• JSX不符合JS标准语法
• 返回的JSX发生改变时，如何更新DOM
  • Virtual DOM（虚拟DOM）是一种用于和真实DOM同步，而在JS内存中维护的一个对象，它具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系。
  • 它赋予了React声明式的API：您告诉React希望让UI是什么状态，React就确保DOM匹配该状态。这使您可以从属性操作、事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。
• State/Props更新时，要重新触发render函数

React的实现 — How to Diff?

不同类型的元素	替换
同类型的DOM元素	更新
同类型的组件元素	递归

React状态管理库

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