响应式系统与React | 字节青训营笔记
这是我参与「第四届青训营 」笔记创作活动的的第12天
React简介
React：是Facebook开发的一款JS库。
React的语法是jsx，通过使用这种语法，可以在react代码中直接混合使用js和html来编写代码，这样代码的逻辑就非常清晰，当然也意味着，需要将jsx代码编译成普通的javascript代码，才能在浏览器中运行，或者在服务器端通过webpack进行编译。
React特点：
- 声明式：我们只需要描述UI，而react负责渲染UI， 当数据变动时 React 能高效更新并渲染合适的组件。
- 基于组件：以组件方式进行开发。构建管理自身状态的封装组件，然后对其组合以构成复杂的 UI。
- 特殊性：使用特殊的jsx（JavaScript XML）语法。
- 高效、灵活：React通过对DOM的模拟使用了虚拟DOM，最大限度地减少与DOM的交互。
**react生命周期
生命周期是一个抽象的概念，在生命周期的整个过程，分成了很多个阶段；
- 比如初始化阶段（Constructor），通过给 this.state 赋值对象来初始化内部的state。
- 比如装载阶段（Mount），组件第一次在DOM树中被渲染的过程；
- 比如更新过程（Update），组件状态发生变化，重新更新渲染的过程；
- 比如卸载过程（Unmount），组件从DOM树中被移除的过程；
react的优点：
-
React速度快、性能好（React通过对DOM的模拟使用了虚拟DOM，最大限度地减少与DOM的交互。）
-
跨浏览器兼容（虚拟DOM的原因帮助我们解决了跨浏览器问题，它为我们提供了标准化的API）
-
单向数据流（Flux随着React视图库的开发而被Facebook概念化，是一个用于在JavaScript应用中创建单向数据层的架构）
-
React兼容性好（使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。）
JSX介绍
JSX是一种JavaScript的语法扩展，运用于React架构中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。
JSX特点：
- JSX 是一种 JS 扩展的表达式
- JSX 是带有逻辑的标记语法，有别于 HTML 模版
- 并且支持样式、逻辑表达式和事件
react设计思路
UI编程的痛点
- 状态更新, UI不会自动更新, 需要手动调用DOM进行更新
- 欠缺基本的代码层面的封装和隔离, 代码层面没有组件化
- UI之间的数据依赖关系, 需要手动维护, 如果依赖链路长, 则会遇到"Callback Hell"
组件化
组件化是React的核心思想。
- 组件化提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。
- 任何的应用都会被抽象成一颗组件树。
- 根据组件的定义方式，可以分为：函数组件(Functional Component )和类组件(Class Component)；
类组件
- constructor是可选的，我们通常在constructor中初始化一些数据；
- this.state中维护的就是我们组件内部的数据；
- render() 方法是 class 组件中唯一必须实现的方法；
函数组件
函数组件是使用function来进行定义的函数，只是这个函数会返回和类组件中render函数返回一样的内容。
总结:
- 组件是组件的组合/原子组件
- 组件内拥有状态, 外部不可见
- 父组件可将状态传入组件内部
虚拟DOM
Virtual DOM（虚拟DOM）： Virtual DOM是一种用于和真实DOM同步，而在JS内存中维护的一个对象，他具有和DOM类似的树状结构，并个DOM可有建立--对应的关系
它赋予了React声明式的API：您告诉React希望让UI是什么状态，React就确保DOM匹配该状态。这使您可有从属性操作，事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。
React状态管理库
推荐
个人总结
这是我加入青训营学习前端的第15天，今天主要讲的是React的一些基础知识，我主要学习了关于React的组件化、生命周期等知识。对于我来说，通过今天的学习，我掌握了React定义函数和组件化开发的方法。
