React作为前端领域最流行的UI库之一,以其高效的虚拟DOM和组件化开发模式深受开发者喜爱。本文从React基础概念出发,详细讲解JSX语法、组件生命周期、状态管理、Hooks等核心知识,同时介绍Context、高阶组件等高级特性。通过实际代码示例,帮助你快速掌握React开发,构建出性能优秀、结构清晰的现代Web应用。
认识React
- React 中文文档1(国内社区):https://react.docschina.org/
- React 中文文档2(官方):https://zh-hans.reactjs.org
React 概述
React 是一个用于构建(动态显示)用户界面
的 JavaScript 库。
🏢 React源起:React 起源于
💡 定位:React本身只关注界面, 其它如:前后台交互、路由管理、状态管理等都由其扩展插件或其它第三方插件搞定
🧩 全家桶:React全家桶包括 react 、 react-router-dom、 redux
React 三个特点
- 1️⃣ 声明式 ==> 命令式编程 arr.filter(item => item.price>80)
- 利用JSX 语法来声明描述动态页面, 数据更新界面自动更新
- 我们不用亲自操作DOM, 只需要更新数据, 界面就会自动更新
- React.createElement() 是命令式
- 2️⃣ 组件化
- 将一个较大较复杂的界面拆分成几个可复用的部分封装成多个组件, 再组合使用
- 组件可以被反复使用
- 3️⃣ 一次学习,随处编写
- 不仅可以开发 web 应用(react-dom),还可以开发原生安卓或ios应用(react-native)
React 开发的网站
以下都是使用React开发的知名网站:
网站名称 | 网址 |
---|---|
MDN | https://developer.mozilla.org/zh-CN/ |
知乎 | https://www.zhihu.com/ |
阿里云 | https://www.aliyun.com/ |
美团 | https://bj.meituan.com/ |
飞猪旅行 | https://www.fliggy.com/ |
安装VSCode插件
开发React应用时,建议安装以下VSCode插件:
- ES7+ React/Redux
- open in browser
React基本使用
基本使用步骤
-
引入两个JS文件( 注意 引入顺序 )
<!-- react库, 提供React对象 -->
<script src="../js/react.development.js"></script>
<!-- react-dom库, 提供了ReactDOM对象 -->
<script src="../js/react-dom.development.js"></script> -
在html定义一个根容器标签
<div id="root"></div>
-
创建react元素(类似html元素)
// 返回值:React元素
// 参数1:要创建的React元素名称 =》字符串
// 参数2:元素的属性 =》对象 {id: 'box'} 或者 null
// 后面参数:该React元素的所有子节点 =》文本或者其他react元素
const element = React.createElement(
'h1',
{title: '你好, React!'},
'Hello React!'
) -
渲染 react 元素
// 渲染React元素到页面容器div中
ReactDOM.render(element, document.getElementById('root'))
特殊属性
- class ==》 className
const element = React.createElement(
'h1',
{
title: '你好, React!',
className: 'active'
},
'Hello React!'
)
再来个复杂点的
const title = '北京疫情'
const content = '北京这段时间疫情还在持续中...'
const vDom = React.createElement('div', null,
React.createElement('h2', {title}, '你关注的北京疫情'),
React.createElement('p', null, content)
)
ReactDOM.render(vDom, document.getElementById('root2'))
理解 React 元素
-
也称
虚拟 DOM
(virtual DOM) 或虚拟节点
(virtual Node) -
它就是一个普通的 JS 对象, 它不是真实 DOM 元素对象
类型 特点 性能 虚拟 DOM 属性比较少 较轻
的对象真实 DOM 属性特别多 较重
的对象 -
但它有一些自己的特点
虚拟 DOM 可以转换为对应的真实 DOM => ReactDOM.render方法将虚拟DOM转换为真实DOM再插入页面
虚拟 DOM 对象包含了对应的真实 DOM 的关键信息属性:
标签名 => type: "h1"
标签属性 => props: {title: '你好, React!'}
子节点 => props: {children: 'Hello React!'}
JSX
基本理解和使用
❓ 问题: React.createElement()写起来太复杂了
💡 解决: 推荐使用更加简洁的JSX
JSX 是一种JS 的扩展语法, 用来快速创建 React 元素(虚拟DOM/虚拟节点)
形式上像HTML标签/任意其它标签, 且标签内部是可以套JS代码的
const h1 = <h1 className="active">哈哈哈</h1>
⚠️ 浏览器并不认识 JSX 所以需要引入babel将jsx 编译成React.createElement的形式
babel编译 JSX 语法的包为:@babel/preset-react
运行时编译可以直接使用babel的完整包:babel.js
🔍 线上测试: https://www.babeljs.cn/
<!-- 必须 引入编译jsx的babel库 -->
<script src="../js/babel.min.js"></script>
<!-- 必须声明type为text/babel, 告诉babel对内部的代码进行jsx的编译 -->
<script type="text/babel">
// 创建React元素 (也称为虚拟DOM 或 虚拟节点)
const vDom = <h1 title="你好, React2!" className="active">Hello React2!</h1>
// 渲染React元素到页面容器div中
ReactDOM.render(vDom, document.getElementById('root'))
</script>
📝 JSX注意事项:
必须有结束标签 整个只能有一个根标签 空标签可以自闭合
JSX中使用 JS 表达式
- JSX中使用JS表达式的语法:
{js表达式}
- 作用:
指定动态的属性值和标签体文本
可以是js的表达式, 不能是js的语句
可以是任意基本类型数据值, 但null、undefined和布尔值没有任何显示
可以是一个js数组, 但不能是js对象
可以是react元素对象
style属性值必须是一个包含样式的js对象
let title = 'I Like You'
const vNode = (
<div>
<h3 name={title}>{title.toUpperCase()}</h3>
<h3>{3}</h3>
<h3>{null}</h3>
<h3>{undefined}</h3>
<h3>{true}</h3>
<h3>{'true'}</h3>
<h3>{React.createElement('div', null, 'atguigu')}</h3>
<h3>{[1, 'abc', 3]}</h3>
<h3 title={title} id="name" className="ative" style={{color: 'red'}}></h3>
{/* <h3>{{a: 1}}</h3> */}
</div>
)
条件渲染
if...else
let vDom
if (isLoading) {
vDom = <h2>正在加载中...</h2>
} else {
vDom = <div>加载完成啦!</div>
}
ReactDOM.render(vDom, document.getElementById('root'))
三元表达式
const vDom = isLoading ? <h2>正在加载中2...</h2> : <div>加载完成啦2!</div>
ReactDOM.render(vDom, document.getElementById('root'))