React基础知识（React基本使用、JSX语法、React模块化与组件化）（一）
系列文章目录
文章目录
系列文章目录
4.1 函数式组件
4.2 类式组件
3.1 jsx使用
2.1 引入react相关js库
2.2 创建虚拟DOM的两种方法
2.3 虚拟DOM和真实DOM
1.1 React的特点
1.2 React高效的原因
一、React简介
二、React基本使用
三、JSX基本使用
四、React模块化与组件化
一、React简介
1.英文官网: https://reactjs.org/
2.中文官网: https://react.docschina.org/
1.1 React的特点
声明式设计： React采用声明范式，可以轻松描述应用。
高效： React通过对DOM的模拟，最大限度地减少与DOM的交互。
灵活： React可以与已知的库或框架很好地配合。
JSX： JSX 是JavaScript语法的扩展。React 开发不一定使用 JSX，但我们建议使用它。
组件： 通过 React构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
单向响应的数据流： React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什 么比传统数据绑定更简单。
1.2 React高效的原因
1.使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。
2.DOM Diffing算法, 最小化页面重绘。
二、React基本使用
2.1 引入react相关js库
1.react.js：React核心库。
2.react-dom.js：提供操作DOM的react扩展库。
3.babel.min.js：解析JSX语法代码转为JS代码的库。可在bootcdn中引入相关库 https://www.bootcdn.cn/
2.2 创建虚拟DOM的两种方法
1.JSX方式
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>hello_react</title></head><body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel" > /* 此处一定要写babel *///1.创建虚拟DOMconst VDOM = <h1>Hello,React</h1> /* 此处一定不要写引号，因为不是字符串 *///2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))</script></body></html>运行结果：
2.纯JS方式(一般不用)
使用纯js的方式需要不断的创建节点，非常的不方便
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>2_使用js创建虚拟DOM</title></head><body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><script type="text/javascript" > //1.创建虚拟DOMconst VDOM = React.createElement('h1',{id:'title'},React.createElement('span',{},'Hello,React'))//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))</script></body></html>2.3 虚拟DOM和真实DOM
React提供了一些API来创建一种 “特别” 的一般js对象
const VDOM = React.createElement('xx',{id:'xx'},'xx')上面创建的就是一个简单的虚拟DOM对象
代码片段：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>3_虚拟DOM与真实DOM</title></head><body><!-- 准备好一个“容器” --><div id="test"></div><div id="demo"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel" > /* 此处一定要写babel *///1.创建虚拟DOMconst VDOM = ( /* 此处一定不要写引号，因为不是字符串 */<h1 id="title"><span>Hello,React</span></h1>)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))const TDOM = document.getElementById('demo')console.log('虚拟DOM',VDOM);console.log('真实DOM',TDOM);debugger;// console.log(typeof VDOM);// console.log(VDOM instanceof Object);/* */</script></body></html>运行结果：
关于虚拟DOM：
1.本质是Object类型的对象（一般对象）
2.虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
3.虚拟DOM最终会被React转化为真实DOM，呈现在页面上。
三、JSX基本使用
3.1 jsx使用
1.全称: JavaScript XML ,react定义的一种类似于XML的JS扩展语法: JS + XML,本质是React.createElement(component, props, …children)方法的语法糖
2.作用: 用来简化创建虚拟DOM
1)写法：
var ele = <h1>Hello JSX!</h1>
2)注意1：它不是字符串, 也不是HTML/XML标签
3)注意2：它最终产生的就是一个JS对象
3.jsx语法规则
1)定义虚拟DOM时，
不要写引号。
2) 标签中混入JS表达式时要用{}。
3) 样式的类名指定不要用class，要用className。
4)内联样式，要用style={{key:value}}的形式去写。
5)只有一个根标签
6)标签必须闭合
7) 标签首字母
(1)若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。
(2)若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。
4.babel.js的作用
浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
2)只要用了JSX，都要加上type="text/babel", 声明需要babel来处理
代码片段:
jsx使用变量/动态属性/指定类名/内联样式
<head><meta charset="UTF-8"><title>jsx语法规则</title><style>.title {background-color: orange;width: 200px;}</style></head><body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel" >const myId = 'aTgUiGu'const myData = 'HeLlo,rEaCt'//1.创建虚拟DOMconst VDOM = (<div><h2 className="title" id={myId.toLowerCase()}><span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span></h2><h2 className="title" id={myId.toUpperCase()}><span style={{color:'white',fontSize:'29px'}}>{myData.toLowerCase()}</span></h2><input type="text"/></div>)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))</script></body></html>运行结果：
jsx条件渲染
<!DOCTYPE html><body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">let flag = Math.random() > 0.5;console.log(flag);let VDOM = flag ? <div>大</div> : <div>小</div>//2.渲染虚拟DOM到页面ReactDOM.render(VDOM, document.getElementById('test'))</script></body></html>运行结果：
jsx列表渲染
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>jsx小练习</title></head><body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel" >//模拟一些数据const data = ['Angular','React','Vue']//1.创建虚拟DOMconst VDOM = (<div><h1>前端js框架列表</h1><ul>{data.map((item,index)=>{return <li key={index}>{item}</li>//使用列表需携带key值})}</ul></div>)//2.渲染虚拟DOM到页面ReactDOM.render(VDOM,document.getElementById('test'))</script></body></html>运行结果：
不携带key值：
携带key值：
注意：
区分【js语句(代码)】与【js表达式】
1.表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方
下面这些都是表达式：
(1). a
(2). a+b
(3). demo(1)
(4). arr.map()
(5). function test () {}
2.语句(代码)：
下面这些都是语句(代码)：
(1).if(){}
(2).for(){}
(3).switch(){case:xxxx}
四、React模块化与组件化
注意
1.组件名必须首字母大写
2.虚拟DOM元素只能有一个根元素
3.虚拟DOM元素必须有结束标签
4.1 函数式组件
该函数是一个有效的 React 组件，因为它接收唯一带有数据的 “props”(代表属性)对象 与并返回一个 React元素。这类组件被称为“函数组件”，因为它本质上就是 JavaScript 函数。
相对比类组件，函数组件有以下特点：
没有组件实例
没有生命周期
没有 state 和 setState，只能接收 props
函数组件是一个纯函数，执行完即销毁，无法存储state
代码片段
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//1.创建函数式组件function MyComponent(props){console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式return <h2>我是用函数定义的组件(适用于【简单组件】的定义),{props.name}</h2>}//2.渲染组件到页面ReactDOM.render(<MyComponent name='zs'/>,document.getElementById('test'))</script></body></html>运行结果：
执行了ReactDOM.render(<MyComponent/>.......）之后，发生了什么？
1.React解析组件标签，找到了MyComponent组件。
2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
4.2 类式组件
通过类来定义一个组件。
类组件有以下特点：
有组件实例
有生命周期
有 state 和setState({})，使用this.setState({name:‘tom’})可以来修改state中的数据
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom，用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel，用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//1.创建类式组件class MyComponent extends React.Component {render(){//render是放在哪里的？—— MyComponent的原型对象上，供实例使用。//render中的this是谁？—— MyComponent的实例对象 <=> MyComponent组件实例对象。console.log('render中的this:',this);return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>}}//2.渲染组件到页面ReactDOM.render(<MyComponent/>,document.getElementById('test'))/* */</script></body></html>运行结果：
执行了ReactDOM.render(<MyComponent/>.......)’之后，发生了什么？
1.React解析组件标签，找到了MyComponent组件。
2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
- 前端开发和后端开发
- 探索 TypeScript 编程的利器：ts-morph 入门与实践
- 前端一般用什么语言开发
- 这些 JavaScript 编码习惯，让你最大程度提高你的项目可维护性！
- 前端是干什么的，好不好就业呢
- 前端开发的理解
- 展现量、点击量、点击率；访客数、访问次数、浏览量的区别与作用
- 前端从打基础开始
- 如何让自己的前端知识更全面
- 忘记 localStorage 吧，indexedDB 才是前端存储新宠！
- 掌握jQuery，轻松转换JSON对象！解码技巧揭秘，高效编程不再难
- Electron 40.0.0 发布，跨平台桌面应用开发工具
- 揭秘jQuery异步POST发送JSON数据的实用技巧
- vue 动态表单优秀案例
- 神奇的CSS用法之border-radius
- Vue 相关开源项目库汇总
- HTML中meta标签的常见使用案例(示例详解)
- 成功解决TypeError: cli.init is not a function for react native
- React基础知识（React基本使用、JSX语法、React模块化与组件化）（一）
- react setState异步操作数据的问题