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

前言

随着前端领域不断地发展，ReactFacebook推出的一款前端框架，广受世界各地的开发的青睐，今天就让我们来入门了解一下React吧。

为什么会有React

React是一个响应式系统，于2013年正式推出。 响应式编程的思路：

React设计思路

使用React相比于原生js的优势：

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

组件化

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

组件设计

• 组件声明了状态和UI的映射
• 组件有Props(外部父组件传进来的状态)/State(组件内部的私有状态)两种状态
• “组件”可由其他组件拼装而成

React(hooks)的写法

React的实现

1. jsx不符合js的语法

我们可以将jsx的语法转换为react的语法，这个过程可以称之为转译，这样我们的编译器就可以理解我们的代码

2. 我们如何将我们写的jsx发生改变时，如何更新DOM

这里我们介绍到一个知识点Virtual DOM(虚拟DOM) Virtual DOM 是一种用于和真实的DOM同步，而在JS内存中维护的一个对象(注意真实的DOM是在浏览器中来维护的),它具有和DOM类似的树状结构，并和DOM可以建立一一对应的关系

React状态管理

因为React是单向数据流，因此我们的的状态只能从根节点一个一个往下传递，当有多个组件需要公用一个状态的时候，交互会非常的麻烦。因为我们在外部放置一个状态管理的一个文件，叫做store，所有的组件都可以跟store进行数据交换。但是我们不能让所有的组件都放到store当中，这样的话形成一个强耦合，依赖性太强，封装性不够好。 推荐：

React状态管理库

推荐的状态管理库有：

• redux
• xstate
• mobx
• recoil

状态机

当前状态。收到一个外部事件，迁移到下一个状态的过程

应用级框架科普

1. NEXT.js
2. MODERN.js
3. Blitz

结语

现代流行的三大前端框架，React，Vue,Angular都有着各自的特点，有自己的优势和劣势，但是他们都向着声明式编程在进发，各框架之间的大体实现思路都有很大的相同点，了解一门框架也能够让我们更快速地学习其他的开发框架，提升自己的编程和学习能力。