响应式系统与React

这是我参与「第四届青训营 」笔记创作活动的的第12天

1.重点内容

React框架的设计思路，基本知识和代码实现

2.重要的知识点

• React的设计思路
• React的实现
• React状态管理库
• 应用级框架

3.详尽的知识点

React的设计思路

React的原型是FaxJS，其设计理念包含以下四点

• Seamless Client Server Rendering

  • 可在客户端或者服务端渲染

• Reactive

  • 响应式的，开发者不需要手动更新

• Performant

  • 性能良好

• Structural

  • 结构化的组件

开发人员在开发过程中，用户做出选择后页面需要实时更新。当用原生JS时，代码会变得臃肿。这时开发人员发现在UI编写中，出现了三个问题

• 状态的更新不是自动的，需要手动调用DOM进行更新
• 代码层面没有封装和隔离，不存在所谓的组件
• UI之间的数据依赖的关系，需要手动去维护，最终引起回调地狱

响应式系统和转换式系统

转换式系统是给定输入求解输出的一个系统，而响应式系统则是监听事件，消息驱动。

React作为响应式系统，开发人员希望它能解决上面出现的问题。

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

React的解决方案

针对上面的解决React开发者设计了组件

1. 组件是组件的组合或者是由原子组件构成的
2. 组件内部存在状态，外部不可见
3. 父组件可以将状态传入子组件的内部

组件设计

1. 组件声明了状态和UI的映射
2. 组件由Props/State两种状态
3. 组件本身可以由其他组件组成

组件化

1. 组件内部由私有状态State
2. 组件可以接收外部的Props状态提供复用性
3. 根据当前的State/Props，返回UI

状态上移的问题

当我们需要在两个兄弟节点之间传输状态时，我们需要将状态上传到兄弟组件共同的父组件中，这就会和React的理念相悖。开发人员针对此问题开发了React状态管理库。

React的实现

React的实现是使用JSX来完成的，因此会出现问题

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

对应的解决方法

1. 使用Babel进行转换
2. 使用虚拟DOM，最后渲染到真实DOM上
3. 对于不同类型的元素直接替换，同类型的DOM进行更新，同类型的组件递归更新

React状态管理库

对于状态上移的问题，核心的解决思想是将状态抽离到UI外部进行统一管理。

• redux
• xstate
• mobx
• recoil

应用级框架

• Next.js
• MODERN.js
• Blitz

4.课后总结

React作为目前开发者常用的框架之一，了解其构成原理和开发思路有利于开发者在实际生产中更深入了解其工作原理，提高工作效率。