之前的内容中我们已经简单介绍了react，写了react的Hello react样例以及创建虚拟DOM的两种方法，下面我们先来做一个简单的回顾：

回顾

react全家桶

  • react全家桶是一个大型的react项目项目框架套件系统，我们将要学习到的包含有：
  • react核心库
  • 用于做路由的react-router库
  • 用于做消息管理的PubSub库
  • 用于做集中式状态管理的react-redux库
  • UI组件库Ant-Design
  • react是一个只专注与界面的js库
  • react的特点有：
  • 组件化模式
  • 声明式编码
  • 高开发效率
  • 高组件复用率
  • 支持跨平台移动端开发
  • 操作虚拟DOM，减少真实DOM操作
  • Diffing算法，只更改需要更改的内容

学react需要的js知识

  • 会判断this指向
  • 熟悉class类
  • 熟悉ES6语法
  • 熟悉npm包管理器
  • 熟悉原型和原型链
  • 熟悉数组常用方法
  • 熟悉模块化知识

Hello react

  • react用jsx创建虚拟DOM
  • jsx语法写的代码不允许用引号扩起来
  • react使用react-dom渲染虚拟DOM到页面
  • react必须在react-dom之前引入
  • 浏览器无法识别jsx所以要引入babel库来将jsx转换为js
  • <script>标签需要将type属性值设为text/babel来调用babel库

两种创建虚拟DOM的方法

  • jsx语法创建
  • 原生js语法调用React.createElement方法创建
  • 开发中使用jsx语法，几乎不用原生js语法创建虚拟DOM
  • jsx语法简单易用
  • 原生js语法创建虚拟DOM代码逻辑结构过于繁琐，不便代码阅读与维护
  • babel库最终会将jsx语法转换成原生js语法供浏览器运行

Copyright statement：The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.

Link of this article：https://work.lynchow.com/article/review_0001/