React的简单笔记｜青训营笔记

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

1、什么是react

React.js 是一个帮助构建页面 UI 的库。
React.js 将帮助我们将界面分成了各个独立的小块，每一个块就是组件，这些组件之间可以组合、嵌套，就成了我们的页面。
React.js 中一切皆组件，用 React.js 写的其实就是 React.js 组件。
React.js 不是一个框架，它只是一个库。它只提供 UI （view）层面的解决方案。在实际的项目当中，它并不能解决我们所有的问题，需要结合其它的库，例如 Redux、React-router 等来协助提供完整的解决方法。

React简介

官网 英文官网: reactjs.org/

中文官网: react.docschina.org/

介绍描述

用于动态构建用户界面的 JavaScript 库(只关注于视图)

由Facebook开源

React的特点

声明式编码

组件化编码

React Native 编写原生应用

高效（优秀的Diffing算法）

相关js库

1. react.js：React核心库。
2. react-dom.js：提供操作DOM的react扩展库。
3. babel.min.js：解析JSX语法代码转为JS代码的库。

2、理解JSX

JSX

1. 全称: JavaScript XML

2. react定义的一种类似于XML的JS扩展语法: JS + XML本质是

   **React.createElement(component, props, ...children)**方法

3. 作用: 用来简化创建虚拟DOM

React.js 就把 JavaScript 的语法扩展了一下，让 JavaScript 语言能够支持这种直接在 JavaScript 代码里面编写类似 HTML 标签结构的语法，这样写起来就方便很多了。编译的过程会把类似 HTML 的 JSX 结构转换成 JavaScript 的对象结构。
所谓的 JSX 其实就是 JavaScript 对象。

总结
要记住几个点：

• JSX 是 JavaScript 语言的一种语法扩展，长得像 HTML，但并不是 HTML。

• React.js 可以用 JSX 来描述你的组件长什么样的。

• JSX 在编译的时候会变成相应的 JavaScript 对象描述。

• react-dom 负责把这个用来描述 UI 信息的 JavaScript 对象变成 DOM 元素，并且渲染到页面上。

3、ref 和 React.js 中的 DOM 操作

在 React.js 当中基本不需要和 DOM 直接打交道。React.js 提供了一系列的 on* 方法帮助我们进行事件监听，所以 React.js 当中不需要直接调用 addEventListener 的 DOM API；

React.js 这种重新渲染的机制帮助我们免除了绝大部分的 DOM 更新操作，也让类似于 jQuery 这种以封装 DOM 操作为主的第三方的库从我们的开发工具链中删除。

虚拟DOM与真实DOM React提供了一些API来创建一种 “特别” 的一般js对象

const VDOM = React.createElement('xx',{id:'xx'},'xx')

上面创建的就是一个简单的虚拟DOM对象

虚拟DOM对象最终都会被React转换为真实的DOM

我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界。

我们可以给任意代表 HTML 元素标签加上 ref 从而获取到它 DOM 元素然后调用 DOM API。但是记住一个原则：能不用 ref 就不用。特别是要避免用 ref 来做 React.js 本来就可以帮助你做到的页面自动更新的操作和事件监听。多余的 DOM 操作其实是代码里面的“噪音”，不利于我们理解和维护。

总而言之，React是一个将数据渲染为 HTML 视图 的 js 库 简单看来，React 框架主要功能体现在前端 UI 页面的渲染，包括性能优化以及操作简化等等方面。 站在 mvc 框架的角度来看，React 操作 view 层的功能实现。