React：一、初识react

1 前言

1.1 官网

（1）英文官网：https://reactjs.org/
（2）中文官网：https://react.docschina.org/

1.2 介绍

（1）动态构建用户界面的javaScript库
（2）FaceBook开源

1.3 特点

（1）声明式编程
（2）组件化编码
（3）React Native编写原生应用
（4）高效（优秀的Diffing算法）

1.4 React高效原因

（1）使用虚拟（virtual）DOM，不总是直接操作页面真实DOM。
（2）DOM Diffing算法，最小化页面重绘。

新建文件夹，使用vscode打开该文件夹，快捷键ctrl+` （Tab键上方）打开terminal终端，输入命令：

1.5 相关js库

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

npm i react react-dom

两个包安装成功：

目录结构如下：

2 使用

非脚手架搭建react：

文件结构：

2.1 引入react、react-dom、babel-min这几个js文件

因为是开发环境，所以全部引入development.js即可（注意引入顺序：先引入react，再引入react-dom）：

<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>

文件整体目录如下：

注意：
js中，混合写入类似于HTML的语法，叫做jsx语法。因为react会使用到jsx语法，故而还需下载babel-standalone（babel除了在使用import时，具有将ES6转换成ES5的作用，还有将jsx转换成js的作用）：

注意引入的顺序：1 react；2 react-dom；3 babel-min ，（核心库react必须在react-dom库之前）修改如下：

<!-- 1. 引入js文件 -->
<!-- 引入react核心库 -->
<script src="../node_modules/react/umd/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作dom -->
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转换为js -->
<script src="../node_modules/babel-standalone/babel.min.js"></script>

2.2 创建react元素

<script  type="text/babel">  //此处type一定要写babel//创建虚拟domconst title = React.createElement('h1',null,'Hello React')const a=<h1>你好~</h1>   //jsx语法,标签不要加双引号，因为不是字符串//渲染虚拟dom到页面// ReactDOM.render(虚拟DOM,容器)ReactDOM.render(a,document.getElementById("root"))ReactDOM.render(title,document.getElementById("myfreind"))
</script>

2.3 渲染React元素到页面中

<!-- 2 手动创建页面待展示的元素，vscode快捷键：#root+enter -->
<!-- 创建"容器" -->
<div id="root"></div>
<div id="myfreind"></div>

2.4 index.html如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 1. 引入js文件 --><!-- 引入react核心库 --><script src="../node_modules/react/umd/react.development.js"></script><!-- 引入react-dom，用于支持react操作dom --><script src="../node_modules/react-dom/umd/react-dom.development.js"></script><!-- 引入babel，用于将jsx转换为js --><script src="../node_modules/babel-standalone/babel.min.js"></script>
</head>
<body><!-- 2 手动创建页面待展示的元素，vscode快捷键：#root+enter --><!-- 创建"容器" --><div id="root"></div> <div id="myfreind"></div><!-- 3 创建react元素参数一：元素名称；参数二：元素属性；参数三：元素的子节点--><!-- 4 渲染react元素参数一：要渲染的react元素；参数二：挂载点--><script  type="text/babel">  //此处type一定要写babel//创建虚拟domconst title = React.createElement('h1',null,'Hello React')const a=<h1>你好~</h1>   //jsx语法,标签不要加双引号，因为不是字符串//渲染虚拟dom到页面// ReactDOM.render(虚拟DOM,容器)ReactDOM.render(a,document.getElementById("root"))ReactDOM.render(title,document.getElementById("myfreind"))</script></body>
</html>

2.5 浏览器中效果如下

3 虚拟DOM的两种创建方式

（1）定义常量标签（无单双引号的）

修改如上的方式（针对a常量标签修改），body：

<div id="root"></div>
<div id="myfreind"></div><script  type="text/babel">  //此处type一定要写babel//创建虚拟domconst title = React.createElement('h1',null,'Hello React')const a=<h1 id="nihao">你好~</h1>   //jsx语法,标签不要加双引号//渲染虚拟dom到页面ReactDOM.render(a,document.getElementById("root"))ReactDOM.render(title,document.getElementById("myfreind"))
</script>

效果一致：

（2）React.createElement(标签名，标签属性，标签内容)创建虚拟DOM

对于标签属性，是一个js对象（形如java的map），可以有id、className等属性。body：

<div id="root"></div>
<div id="myfreind"></div><script  type="text/babel">  //此处type一定要写babel//创建虚拟domconst title = React.createElement("h1",{id:"test",className:"text_line"},"我是大侠")//渲染虚拟dom到页面ReactDOM.render(title,document.getElementById("myfreind"))
</script>

但是注意，有些情况下，第一种方式更优：比如希望在h1标签中，嵌入< span id=“mm”>Hello</ span>标签，两种方式分别如下操作，body：

<div id="method1"></div>
<div id="method2"></div>
<script  type="text/babel">  //此处type一定要写babelconst m1=<h1><span id="mm">Hello</span></h1>const m2=React.createElement("h1",{},'<span id="mm">Hello</span>')ReactDOM.render(m1,document.getElementById("method1"))ReactDOM.render(m2,document.getElementById("method2"))
</script>

很明显如上方式是把< span id=“mm”>Hello</ span>作为了标签的内容，而不是一个虚拟DOM。
应该修改为如下方式：

<div id="method1"></div>
<div id="method2"></div>
<script  type="text/babel">  //此处type一定要写babelconst m1=<h1><span id="mm">Hello</span></h1>const m2=React.createElement("h1",{},React.createElement("span",{id:"mm"},"Hello"))ReactDOM.render(m1,document.getElementById("method1"))ReactDOM.render(m2,document.getElementById("method2"))
</script>

由此可见，这种情况下，多层嵌套的React.createElement并不适用复杂场景。jsx写法（第一种）更加便捷高效，不建议React.createElement中嵌套React.createElement。

小结：
1.为什么react要使用jsx？

减少创建虚拟DOM的繁琐操作，可以如同编写html那样渲染到页面上

比如下面的jsx写法，实际上babel最终会把下面的语句，翻译为React.createElement中嵌套React.createElement这种形式的，其实jsx这种写法，就是原始js创建虚拟DOM的语法糖（语法糖：类似python的装饰器语法糖等，就是一种语法的缩写、简写方式）：

//创建xuniDOM
const m3=(<h1><span id="mm">Hello</span></h1>
)

2.关于虚拟DOM：

本质上是Object类型的对象(一般对象)；

虚拟DOM比较轻，真实DOM较重，因虚拟DOM为React内部使用，无需真实DOM那么多属性；

虚拟DOM最终会被React转化为真实DOM呈现在页面上。

4 jsx语法规则

（1）全称： javascriptXML
（2）react定义的一种类似于XML的JS扩展语法：JS+XML
（3）本质是 React.craeteElement(components，props，…children)
（4）作用：简化虚拟DOM创建
写法： var a = < h1>hello</ h1>
注意1：它不是字符串，也不是HTML/XML标签
注意2：产生的是一个JS对象
（5）标签名任意：HTML标签或其他标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jsx语法</title><!-- 1. 引入js文件 --><!-- 引入react核心库 --><script src="../node_modules/react/umd/react.development.js"></script><!-- 引入react-dom，用于支持react操作dom --><script src="../node_modules/react-dom/umd/react-dom.development.js"></script><!-- 引入babel，用于将jsx转换为js --><script src="../node_modules/babel-standalone/babel.min.js"></script>
</head>
<body><div id="test"></div><script type="text/babel">const xiaoxuId = "xiaoxu"const data = "hello,jsx语法"const VDOM = (<h2 id = {xiaoxuId.toLowerCase()}><span>{data.toLowerCase()}</span></h2>)ReactDOM.render(VDOM,document.getElementById('test'))</script>
</body>
</html>

tips：debug方式：

<body><div id="test"></div><script type="text/babel">const xiaoxuId = "xiaoxu"const data = "hello,jsx语法"const VDOM = (<h2 id = {xiaoxuId.toLowerCase()}><span>{data.toLowerCase()}</span></h2>)ReactDOM.render(VDOM,document.getElementById('test'))debugger;</script>
</body>

样式填充：
以前的方式：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jsx语法</title><!-- 1. 引入js文件 --><!-- 引入react核心库 --><script src="../node_modules/react/umd/react.development.js"></script><!-- 引入react-dom，用于支持react操作dom --><script src="../node_modules/react-dom/umd/react-dom.development.js"></script><!-- 引入babel，用于将jsx转换为js --><script src="../node_modules/babel-standalone/babel.min.js"></script><style>.title{background-color: aquamarine;width: 200px;}</style>
</head>
<body><div id="test"></div><script type="text/babel">const xiaoxuId = "xiaoxu"const data = "Hello,jsx语法"const VDOM = (<h2 id = {xiaoxuId.toLowerCase()} class = "title"><span>{data.toLowerCase()}</span></h2>)ReactDOM.render(VDOM,document.getElementById('test'))</script>
</body>
</html>

修改如下：

内联样式：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jsx语法</title><!-- 1. 引入js文件 --><!-- 引入react核心库 --><script src="../node_modules/react/umd/react.development.js"></script><!-- 引入react-dom，用于支持react操作dom --><script src="../node_modules/react-dom/umd/react-dom.development.js"></script><!-- 引入babel，用于将jsx转换为js --><script src="../node_modules/babel-standalone/babel.min.js"></script><style>.title{background-color: aquamarine;width: 200px;}</style>
</head>
<body><div id="test"></div><script type="text/babel">const xiaoxuId = "xiaoxu"const data = "Hello,jsx语法"const VDOM = (<h2 id = {xiaoxuId.toLowerCase()} className = "title"style = {{color:'green',fontSize:"20px"}}><span>{data.toLowerCase()}</span></h2>)ReactDOM.render(VDOM,document.getElementById('test'))/* jsx语法规则：1.定义虚拟DOM时，不要写引号。2.标签中混入JS表达式时要用{}。3.样式的类名指定不要用class，要用className。4.内联样式：style = {{key:value}}*/</script>
</body>
</html>

虚拟DOM，只有一个根标签，且标签必须闭合：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jsx语法</title><!-- 1. 引入js文件 --><!-- 引入react核心库 --><script src="../node_modules/react/umd/react.development.js"></script><!-- 引入react-dom，用于支持react操作dom --><script src="../node_modules/react-dom/umd/react-dom.development.js"></script><!-- 引入babel，用于将jsx转换为js --><script src="../node_modules/babel-standalone/babel.min.js"></script><style>.title{background-color: aquamarine;width: 200px;}</style>
</head>
<body><div id="test"></div><script type="text/babel">const xiaoxuId = "xiaoxu"const data = "Hello,jsx语法"const VDOM = (<div><h2 id = {xiaoxuId.toLowerCase()} className = "title"style = {{color:'green',fontSize:"20px"}}><span>{data.toLowerCase()}</span></h2><input type = "text"/></div>)ReactDOM.render(VDOM,document.getElementById('test'))/* jsx语法规则：1.定义虚拟DOM时，不要写引号。2.标签中混入JS表达式时要用{}。3.样式的类名指定不要用class，要用className。4.内联样式：style = {{key:value}}5.只要一个根标签6.标签必须闭合*/</script>
</body>
</html>

标签的首字母：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jsx语法</title><!-- 1. 引入js文件 --><!-- 引入react核心库 --><script src="../node_modules/react/umd/react.development.js"></script><!-- 引入react-dom，用于支持react操作dom --><script src="../node_modules/react-dom/umd/react-dom.development.js"></script><!-- 引入babel，用于将jsx转换为js --><script src="../node_modules/babel-standalone/babel.min.js"></script><style>.title{background-color: aquamarine;width: 200px;}</style>
</head>
<body><div id="test"></div><script type="text/babel">const xiaoxuId = "xiaoxu"const data = "Hello,jsx语法"const VDOM = (<div><h2 id = {xiaoxuId.toLowerCase()} className = "title"style = {{color:'green',fontSize:"20px"}}><span>{data.toLowerCase()}</span></h2><input type = "text"/><Fruit>123</Fruit></div>)ReactDOM.render(VDOM,document.getElementById('test'))/* jsx语法规则：1.定义虚拟DOM时，不要写引号。2.标签中混入JS表达式时要用{}。3.样式的类名指定不要用class，要用className。4.内联样式：style = {{key:value}}5.只要一个根标签6.标签必须闭合7.标签首字母：（1）若为小写字母开头，则将标签转为html中同名元素，若html中没有该标签对应的同名元素，则报错。（2）若大写字母开头，react渲染对应的组件，若组件没有定义，则报错。*/</script>
</body>
</html>

注意区分js表达式和代码块，在jsx中，{}里只能存在表达式，而非代码块，常见的js表达式、代码块有如下：

1.表达式
（1）a
（2）a+b
（3）demo(24)
（4）arr.map()
（5）function test(){}

2.语句（代码）
（1）if(){}
（2）for(){}
（3）switch(value){case 1:…;case 2:…;}

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="../node_modules/react/umd/react.development.js"></script><script src = "../node_modules/react-dom/umd/react-dom.development.js"></script><script src="../node_modules/babel-standalone/babel.min.js"></script>
</head>
<body><div id = "test"></div><script type = "text/babel">const data = ["java","python","react","vue"]const vDOM = (<div>        <ul>{data.map((item,index)=>{return <li key = {index}>{item}</li>})} </ul></div>)        ReactDOM.render(vDOM,document.getElementById("test"))</script>
</body>
</html>

效果如下：

React：一、初识react相关推荐

初识react(四) react中异步解决方案之 redux-saga
回顾初识react(一) 揭开jsx语法和虚拟DOM面纱初识react(二) 实现一个简版的html redux.js的demo 初识react(三)在 react中使用redux来实现简版计数器 ...
初识react(二) 实现一个简版的html+redux.js的demo
回顾初识react(一) 揭开jsx语法和虚拟DOM面纱初识react(二) 实现一个简版的html+redux.js的demo 初识react(三)在 react中使用redux来实现简版计数器 ...
初识React及React开发依赖介绍
文章目录初识React React介绍 React特点 React的依赖介绍 React的开发依赖 Babel和React的关系 React的依赖引入初识React React介绍 React是什 ...
web前端高级React - React从入门到进阶之初识React
第一部分:React入门系列文章目录第一章:React从入门到进阶之初识React 第一章:React从入门到进阶之JSX简介第三章:React从入门到进阶之元素渲染第四章:React从入门到 ...
初识React脚手架
最近接手了一个React的项目,学习和摸索了一段时间,刚好有一些心得,就记录下来. 这个项目是混合开发(Hybird)的.整体是以原生+Cordova+ReactJS 架构,下面简单说下. 原生是由S ...
[译] React 路由和 React 组件的爱恨情仇
原文地址:The Love-Hate Relationship between React Router and React Components 原文作者:Kasra 译文出自:掘金翻译计划本文永 ...
从零开始React：一档 React环境搭建，语法规则，基础使用
手挽手带你学React入门第一期,带你熟悉React的语法规则,消除对JSX的恐惧感,由于现在开发中都是使用ES6语法开发React,所以这次也使用ES6的模式进行教学,如果大家对ES6不熟悉的话,先 ...
React笔记：React基础（2）
1. JSX JSX是一种拥有描述UI的JavaScript扩展语法,React使用这种语法描述组件的UI. 1.1 基本语法 JSX可以嵌套多个HTML标签,可以使用大部分符号HTML规范的属性. ...
React Component vs React Element
React Component vs React Element 有这样的一个问题: // 方法定义 function add(x, y) {return x + y }// 方法调用 add(1, ...
（React 框架）React技术
1.简介 React 是Facebook 开发并开源的前端框架当时他们的团队在市面上没找到合适的MVC 框架,就自己写一个 JS 框架,用来架设 instagram(图片分享社交网路),2013年开 ...

React：一、初识react

React：一、初识react

React：一、初识react相关推荐

最新文章

热门文章