react笔记01

一、React 说明

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设他们自己的 Instagram 的网站。
做出来以后，发现这套东西很好用，在2013年5月开源了。目前已经成为前端的三大主流框架。

• React官网：https://reactjs.org/
• React中文：https://react.docschina.org/

1、React 的特点

• 使用JSX语法创建组件，实现组件化开发，为函数式的 UI 编程方式打开了大门;
• 性能高：通过 diff算法 和 虚拟DOM 实现视图的高效渲染和更新;

• 声明式、组件化、一处学习到处编写
  哒哒哒

2、react 核心

虚拟DOM：React将DOM抽象为虚拟DOM，虚拟DOM其实就是用一个对象来描述DOM，通过对比前后两个对象的差异，最终只把变化的部分重新渲染，提高渲染的效率

为什么用虚拟DOM?
当DOM发生更改时需要遍历DOM对象的属性, 而原生DOM可遍历属性多达200多个个, 而且大部分属性与渲染无关, 导致更新页面代价太大。

虚拟DOM的处理方式？
1） 用 JS对象结构表示 DOM 树的结构，然后用这个树构建一个真正的 DOM 树，插到文档当中。
2）当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异。
3） 把记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了。

---

Diff算法:

最小化页面重绘
当我们使用React在render() 函数创建了一棵React元素树，在下一个state或者props更新的时候，render() 函数将会创建一棵新的React元素树。
React将对比这两棵树的不同之处，计算出如何高效的更新UI（只更新变化的地方），此处所采用的算法就是diff算法。

二、JSX语法全面入门

总结
1. JSX只是高级语法糖, 最终执行时还是会被转成原生js, 通过babel等方式;
2. 更加语义化, 更加直观, 代码可读性更高;
3. 性能相对原生方式更加好一些

1.jsx语法创建虚拟DOM

执行结果

执行结果

---

2.典型js方式 和 JSX方式 对比：

image.png

---

3. 多层标签嵌套

多层标签嵌套

4.js中的变量, 表达式要写在{}内

---

5.内联样式通过对象方式引入

image.png

---

6.数组遍历

遍历数据

四、React中的组件/模块, 组件化/模块化

1）组件
一个应用/版块/页面中用于实现某个局部的功能(包括html, js, css等)
把这些局部功能组装到一起就形成了完整的一个大的功能
主要目的在于: 复用代码, 提高项目运行效率。
2）组件化
如果一个应用是用多组件的方式进行综合开发的, 那么这个应用就是一个组件化应用。
3）模块
多个组件形成模块, 或者是一个提供特定功能的js文件, 主要特点在于耦合性低, 可移植性高, 执行效率好。
4）模块化
如果一个应用都是用模块的形式来构建的，那么这个应用就是模块化应用。

构造函数创建组件：

image.png

image.png