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

响应式系统与React（基础原理篇）

1.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内部为了告诉我们当前处于哪些阶段，会对我们组件内部实现的某些函数进行回调，这些函数就是生命周期函数：

  • 比如实现componentDidMount函数：组件已经挂载到DOM上时，就会回调；
  • 比如实现componentDidUpdate函数：组件已经发生了更新时，就会回调；
  • 比如实现componentWillUnmount函数：组件即将被移除时，就会回调；
  • 我们可以在这些回调函数中编写自己的逻辑代码，来完成自己的需求功能；

原文链接

React优点：

• React速度快、性能好（React通过对DOM的模拟使用了虚拟DOM，最大限度地减少与DOM的交互。）
• 跨浏览器兼容（虚拟DOM的原因帮助我们解决了跨浏览器问题，它为我们提供了标准化的API）
• 单向数据流（Flux随着React视图库的开发而被Facebook概念化，是一个用于在JavaScript应用中创建单向数据层的架构）
• React兼容性好（使用RequireJS来加载和打包，而Browserify和Webpack适用于构建大型应用。）

React缺点： 并不是一个单独完整的框架（React是目标是UI组件，通常可以和其它框架组合使用，目前并不适合单独做一个完整的框架。）

原文链接

1.1-JSX语法

JSX：是一种JavaScript的语法扩展，运用于React架构中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。

元素是构成React应用的最小单位，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面。

JSX特点：

• JSX 是一种 JS 扩展的表达式
• JSX 是带有逻辑的标记语法，有别于 HTML 模版
• 并且支持样式、逻辑表达式和事件

2.React组件化

组件化是React的核心思想。

• 组件化提供了一种抽象，让我们可以开发出一个个独立可复用的小组件来构造我们的应用。
• 任何的应用都会被抽象成一颗组件树。
• 根据组件的定义方式，可以分为：函数组件(Functional Component )和类组件(Class Component)；

组件化思想的应用：

• 有了组件化的思想，我们在之后的开发中就要充分的利用它。
• 尽可能的将页面拆分成一个个小的、可复用的组件。
• 这样让我们的代码更加方便组织和管理，并且扩展性也更强。

2.1-类组件

类组件的定义有如下要求：

• 组件的名称是大写字符开头（无论类组件还是函数组件）
• 类组件需要继承自 React.Component
• 类组件必须实现render函数

使用class定义一个组件：

• constructor是可选的，我们通常在constructor中初始化一些数据；
• this.state中维护的就是我们组件内部的数据；
• render() 方法是 class 组件中唯一必须实现的方法；

2.2-函数组件

函数组件是使用function来进行定义的函数，只是这个函数会返回和类组件中render函数返回一样的内容。

函数组件的特点：

• 没有生命周期，也会被更新并挂载，但是没有生命周期函数；
• 没有this(组件实例）；
• 没有内部状态（state）；

2.3-组件间的通信

• 父组件在展示子组件，可能会传递一些数据给子组件：

  • 父组件通过 属性=值的形式来传递给子组件数据；
  • 子组件通过 props 参数获取父组件传递过来的数据；

组件设计：

• 组件声明了状态和UI的映射
• 组件有Props/State两种状态
• 组件可有其他组件拼装而成

组件化总结：

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

3.虚拟DOM

Virtual DOM（虚拟DOM）： Virtual DOM是一种用于和真实DOM同步，而在JS内存中维护的一个对象，他具有和DOM类似的树状结构，并个DOM可有建立--对应的关系

它赋予了React声明式的API：您告诉React希望让UI是什么状态，React就确保DOM匹配该状态。这使您可有从属性操作，事件处理和手动DOM更新这些在构建应用程序时必要的操作中解放出来。

4.个人总结

这是在青训营学习前端的第10天，今天主要讲的是React的一些基础知识，我主要学习了关于React的组件化、生命周期等知识。对于我来说，通过今天的学习，我掌握了React定义函数和组件化开发的方法，然后我根据老师上课所说的知识+课外查询的资料整理成了以上这篇文章，主要针对React的基础知识，让大家更好的掌握使用React，一起从底层基础开始学习，希望能帮助到大家，谢谢！