介绍描述
- 用于动态构建用户界面的 JavaScript 库(只关注于视图)
- 由Facebook开源
React的特点
- 声明式编码
- 组件化编码
- React Native 编写原生应用
- 高效（优秀的Diffing算法）
命令式编程 和 声明式编程
- 告诉计算机怎么做（How） - 过程
- 告诉计算机我们要什么（What） - 结果
如何使用 React
基于浏览器的模式
- React.js 提供 React.js 核心功能代码，如：虚拟 dom，组件
- React.createElement(type,props,children);
- ReactDOM 提供了与浏览器交互的 DOM 功能，如：dom 渲染
- ReactDOM.render(element, container[, callback])
- element：要渲染的内容
- container：要渲染的内容存放容器
- callback：渲染后的回调函数
- ReactDOM.render(element, container[, callback])
babel
babel-standalone.js：在浏览器中处理 JSX
- 浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
- 只要用了JSX，都要加上type=“text/babel”, 声明需要babel来处理
效果图:
React高效的原因
- 使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
- DOM Diffing算法, 最小化页面重绘。
在使用react 时需要引入核心模块
<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
//React核心库。
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
//提供操作DOM的react扩展库。
<script crossorigin src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
//解析JSX语法代码转为JS代码的库
react_54">react基本代码效果图
JSX 是一个基于 JavaScript + XML 的一个扩展语法,本质是React.createElement(component, props, …children)方法的语法糖
- 它可以作为值使用
- 它并不是字符串
- 它也不是HTML
- 它可以配合JavaScript 表达式一起使用
创建虚拟DOM的两种方式
- 纯JS方式(一般不用)
- JSX方式
虚拟DOM与真实DOM
- React提供了一些API来创建一种 “特别” 的一般js对象
const VDOM = React.createElement(‘xx’,{id:‘xx’},‘xx’)
上面创建的就是一个简单的虚拟DOM对象 - 虚拟DOM对象最终都会被React转换为真实的DOM
- 我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界。
插值表达式
在 JXS 中可以使用 {表达式} 嵌入表达式
表达式：产生值的一组代码的集合
注意:
vue使用两个花括号解析变量,react只用一个花括号解析变量
列表渲染
列表渲染(类似于vue里面的v-for)
- 数组
- 对象
扩展：虚拟 DOM （virtualDOM） 和 diff
效果图
条件渲染
- 三元运算符
- 与或运算符
效果图
在属性上使用 表达式
JSX 中的表达式也可以使用在属性上，但是使用的时候需要注意
- 当在属性中使用 {} 的时候，不要使用引号包含
这个是react的基本语法
下面我们来说一下react的项目安装及其启动
大家可以根据自己的需求进行安装
创建项目的命令
安装项目以后使用npm start进行启动项目
启动项目成功效果图
重点报错
如果项目使用npm start 报错的话输入npm run eject,以后再使用npm start启动项目
总结:
今天主要学习了react的基本语法,及其基本项目安装,react相比vue更加复杂一点,但比vue更加灵活,但有一点是react创建项目时更加复杂,但更加容易报错,比如我上面说的那个报错,恐怕很多人都会遇到,希望大家在用到的时候一定要注意
最后作者创作不易,如果文章对你有帮助的话,记得留下你的点赞和关注呦
