React新手村：一步步掌握前端开发利器Day1-171主机测评

文章目录

React新手村：一步步掌握前端开发利器
一、React的主要原理：
二、React的特点是什么？
三、React的 JSX 语法
- 1.什么是 JSX 语法？
四、初学之单页面开发
- 1. 认识 React ：
- 2.JSX语法之数据绑定
- 3.JSX语法之属性绑定
- 4.JSX语法之样式绑定
- 5.JSX语法之组件创建
- 6.JSX语法之组件通信
- 7.JSX语法之组件状态
总结

React新手村：一步步掌握前端开发利器

React的起源与未来发展

React（也称为React.js或ReactJS）由Facebook的软件工程师Jordan Walke创建，最初用于解决Facebook广告业务中复杂的UI更新问题。2011年，React首次应用于Facebook的新闻feed功能，2012年扩展到Instagram。2013年，React正式开源，成为JavaScript生态中的重要工具。

React 是目前全球最流行的前端 JavaScript 框架之一，广泛应用于企业级应用、社交媒体平台、电商网站等。其组件化开发模式、虚拟 DOM 技术以及活跃的社区支持使其成为开发者的首选。

由于市场需求旺盛，掌握 React 成为了许多前端开发岗位的基本要求。

详情可见React官方网址：英文官网: https://reactjs.org/ 中文官网: https://react.docschina.org/

迈出学习React框架的第一步

一、React的主要原理：

传统的 web 应用，操作 DOM 一般是直接更新操作的，但 DOM 更新通常是比较昂贵的。而 React 为了尽可能减少对 DOM 的操作，提供了一种不同的而又强大的方式来更新 DOM，代替直接的 DOM 操作。就是 VirtualDOM,一个轻量级的虚拟的 DOM，就是 React 抽象出来的一个对象，描述 dom 应该什么样子的，应该如何呈现。通过这个 Virtual DOM 去更新真实的 DOM，由这个 Virtual DOM 管理真实 DOM 的更新。

为什么通过这多一层的 Virtual DOM 操作就能更快呢？这是因为 React 有个 diff 算法，更新 VirtualDOM 并不保证马上影响真实的 DOM，React 会等到事件循环结束，然后利用这个 diff 算法，通过当前新的 dom 表述与之前的作比较，计算出最小的步骤更新真实的 DOM 。

最明显的一点好处就是 React 所谓的 dom diff ，能够实现 delta 级别的 dom 更新。当有数据变动导致 DOM 变动时，React 不是全局刷新，而是通过它内部的 dom diff 算法计算出不同点，然后以最小粒度进行更新。这也是 React 号称性能好的原因。

二、React的特点是什么？

组件化开发：React 将 UI 拆分为独立、可重用的组件，每个组件都有自己的逻辑和控制。声明式编程：React 采用声明式编程范式，开发人员只需描述应用的每个状态下的 UI，React 会自动处理 UI 的更新。虚拟DOM：React 使用虚拟 DOM 来提高性能，通过对比虚拟 DOM 的变化，最小化实际 DOM 操作。高效的状态管理：React通过状态（State）和属性（Props）来管理数据，确保数据流动的单向性。

三、React的 JSX 语法

1.什么是 JSX 语法？

什么是 JSX

JSX 是 React 的核心组成部分，它使用 XML 标记的方式去直接声明界面，界面组件之间可以互相嵌套。可以理解为在 JS 中编写与 XML 类似的语言,一种定义带属性树结构（ DOM 结构）的语法，它的目的不是要在浏览器或者引擎中实现，它的目的是通过各种编译器将这些标记编译成标准的 JS 语言，用来简化创建虚拟 DOM。

JSX语法的使用前提使用JSX语法后，你必须要引入 babel 的 JSX 解析器，把 JSX 转化成 JS 语法，这个工作会由 babel 自动完成。同时引入 babel 后，你就可以使用新的 es6 语法。

虽然可以完全不使用 JSX 语法，只使用 JS 语法，但还是更推荐使用 JSX。

四、初学之单页面开发

1. 认识 React ：

在开始之前我们需要在页面引三个必要文件

Jsx 语法的转义文件将 Jsx 语法转成浏览器识别的 JavaScript 对象

引入 React 的核心库将这些对象转换为虚拟DOM

解析 ReactDom 库渲染到页面的指定容器

<!– 因为浏览器不识别jsx语法需要将jsx语法转成浏览器识别的js对象 –>
<script src="./babel.min.js"></script>
<!– 引入react核心库提供核心功能 –>
<script src="./react.development.js"></script>
<!– 解析react中的dom库提供与dom相关的功能可以将react组件渲染到页面 –>
<script src="./react-dom.development.js"></script>

在 body 标签内创建一个 id 为 root 的 div 标签作为根节点

告知浏览器识别的文本信息 babel 转义后的文本内容

在 script 中用 jsx 语法创建 h1 标签

let hi = <h1>认识react</h1>;

创建 root 实例（在例子中取名为root，可随意更改）

let root = ReactDOM.createRoot(document.getElementById("root"));

渲染页面 .render() 方法

root.render(hi);

以上就实现了一个使用React框架构建的简单HTML页面，页面通过引入React核心库和DOM库，结合Babel转译工具实现前端渲染。

完整代码如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>认识react</title>
<script src="./babel.min.js"></script>
<script src="./react.development.js"></script>
<script src="./react-dom.development.js"></script>
<body>
<div id="root"></div>
<script type="text/babel">
let hi = <h1>认识react</h1>;
let root = ReactDOM.createRoot(document.getElementById("root"));
root.render(hi);
</script>
</body>
</html>

运行结果如下运行结果如图

2.JSX语法之数据绑定

数据绑定方法：在 vue 中我们使用插值语法{{变量名}}渲染，而 react 则通过JSX的{变量名}语法将 JavaScript 变量动态绑定到 DOM 元素并渲染。

完整代码如下

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jsx数据绑定</title>
<script src="./babel.min.js"></script>
<script src="./react.development.js"></script>
<script src="./react-dom.development.js"></script>

<body>
<div id="root"></div>
<script type="text/babel">
let names = '狗（非人类）';
let pic = 'https://pica.zhimg.com/100/v2-3f15035df7cea8b7c1080b4585641bea_r.jpg'
let root = ReactDOM.createRoot(document.getElementById("root"));
let str = '人，你好我好大家好';
let str1 = […str].reverse().join("")
const myName = (
<div>
<h1>{names}</h1>
<h2>{str1}</h2>
<img width='300' height='400' src={pic}/>
</div>
)
root.render(myName);
</script>
</body>

</html>

运行结果如下

请添加图片描述

补充知识点：

反转字符串的方法:

// 反转字符串方法：
// 1.循环转换数组
// let arr1 = Array.from(str);
// let str1 = [];
// for(let i=arr1.length-1;i>=0;i–) {
// str1.push(arr1[i])
// }
// 2..split分割后自动转为数组然后.reverse转换方向最后.join转为字符串
// let str1 = str.split("").reverse().join("");
// 3.[…]解构并转换为数组然后.reverse转换方向最后.join转为字符串
let str1 = […str].reverse().join("")

变量声明方法的区别展示变量声明差异（let的暂时性死区 vs var的提升特性）

console.log(a);
let a; //会报错
var a; //会打印undefined 因为var可以提升变量声明

数字运算的动态绑定动态绑定内默认为一个代码块会执行后再进行渲染

const myName = <h1>{2 + 8}</h1> //会渲染10

3.JSX语法之属性绑定

JSX 支持直接为元素添加静态属性，例如 id ，其属性值可以是字符串或表达式，但需用引号包裹字符串值。

注意：

React 中多单词属性需使用驼峰命名（camelCase）。

JSX 注释需写在 {/* */} 中。与 JavaScript 的多行注释语法不同。

其中在 style 标签中编写 CSS 时 React 需用 className 替代 class（因为 class 是 JS 关键字）

样式优先级：内联样式 > 内部样式 = 外联样式（内部 / 外联按加载顺序覆盖

资源引用：外部资源（如图片）通过属性直接动态绑定，如 img 标签的路径绑定 src=“https://example.com/image.jpg” 。其路径可以是相对或绝对 URL。

完整代码如下

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jsx属性绑定</title>
<script src="./babel.min.js"></script>
<script src="./react.development.js"></script>
<script src="./react-dom.development.js"></script>
<!– 外联样式 –>
<!– <link rel="stylesheet" href=""> –>
<!– 内联样式 > 内部样式 = 外联样式（内部 / 外联按加载顺序覆盖） –>
<!– 内联样式 –>
<style>
#tips {
color: red;
}
.hi {
color: purple;
}
</style>
</head>

<body>
<div id="root"></div>
<script type="text/babel">
let root = ReactDOM.createRoot(document.getElementById("root"));
// 静态属性
let element = <div id='tips'>hello</div>
element = (
<div>
{/* 内部样式 width height */}
<img width='300' height='400' src="https://pica.zhimg.com/100/v2-3f15035df7cea8b7c1080b4585641bea_r.jpg" />
{/* table表格 tr表示行 th表示表头单元格 td表示行内单元格 */}
<table border='2'>
<tr>
{/* 使用camelCase（驼峰命名）绑定多单词属性 */}
{/* colSpan='2'合并两列 */}
<td colSpan='2'>成绩</td>
{/*<td>成绩</td> */}
</tr>
<tr>
<td>90</td>
<td>80</td>
</tr>
</table>
{/*
和普通 HTML 一样，在 <style> 标签中编写 CSS
但 React 中需用 className 替代 class（因为 class 是 JS 关键字）
*/}
<h1 className='hi'>大家好</h1>
{/*
htmlFor 属性的作用：htmlFor 等价于原生 HTML 中 label 的 for 属性
值必须与关联的 input 的 id 一致点击 label 文字时对应的 input 会自动获得焦点
*/}
<label htmlFor="username">姓名:</label>
<input type="text" id='username' />
</div>)
root.render(element);
</script>
</body>

</html>

请添加图片描述

4.JSX语法之样式绑定

样式绑定：两种方法

style:在jsx中直接定义可做三元判断进行展示

class: 样式表中定义通过className使用

注意：

className绑定：引用外部样式表中定义的类名，需使用className而非class。

style属性绑定：通过JavaScript对象定义样式，属性名需转为驼峰命名（如fontSize），且支持动态逻辑判断。

样式优先级：内联样式 > 外部样式表

完整代码如下

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>样式绑定</title>
<script src="./babel.min.js"></script>
<script src="./react.development.js"></script>
<script src="./react-dom.development.js"></script>
<style>
.news {
color: red;
}

.other {
font-size: 40px;
}
</style>
</head>

<body>
<!–
样式绑定：两种方法
style:在jsx中直接定义可做三元判断
class: 样式表中定义通过className使用
–>
<div id="root"></div>
<script type="text/babel">
let root = ReactDOM.createRoot(document.getElementById("root"));
const vase = {
color: 'blue',
fontSize: '40px',
fontWeight: 'bold'
}
// 定义两种样式便于后面做三元判断
const one = {
color: 'pink'
}
const two = {
color: 'green'
}
let element = (
<div>
{/* class表中定义的样式在jsx中两种引入方法均可 */}
<div className='news other'>哪吒</div>
<div className={'news other'}>孙悟空</div>
{/* 在jsx定义的样式引入方法 */}
<p style={vase}>哈哈哈哈</p>
{/* 在jsx定义的样式引入并进行三元判断选择展示哪一个 */}
<div style={5 > 2 ? one : two}>你好</div>
</div>
)
element = root.render(element);
</script>
</body>

</html>

请添加图片描述

5.JSX语法之组件创建

两种组件创建：

函数组件：函数组件采用大驼峰命名法（如HelloWorld），必须返回一个根节点（如在最外层用 div 标签包裹全部内容）。官方推荐使用函数组件，因其语法简洁且符合现代React开发趋势。

类组件：类组件同样采用大驼峰命名法（如EveryDay），必须继承React.Component基类。类组件中必须定义render()方法，用render渲染页面，且该方法返回一个根节点。类组件是React早期的主要组件形式。

注意：

JSX根节点规则：无论是函数组件还是类组件，返回的JSX结构必须有且仅有一个根节点

style属性绑定：通过JavaScript对象定义样式，属性名需转为驼峰命名（如fontSize），且支持动态逻辑判断。

样式优先级：内联样式 > 外部样式表

完整代码如下

<!DOCTYPE html>
<html lang="en">

<body>
<div id="root"></div>
<script type="text/babel">
let root = ReactDOM.createRoot(document.getElementById("root"));
// 函数组件
function HelloWorld() {
return (
<div>
<h1>你好，这里是函数组件，是官方推荐的用法~</h1>
</div>
)
}
// 类组件
class EveryDay extends React.Component {
render() {
return (
<div>
<h1>哈哈哈哈，我是类组件，也能使！</h1>
</div>
)
}
}
root.render(
<div>
<HelloWorld />
<EveryDay />
</div>
);
</script>
</body>

</html>

请添加图片描述

6.JSX语法之组件通信

React中父组件向子组件传递数据通过props实现。

props是单向数据流，只能从父组件流向子组件，所有函数组件接收的唯一参数就是props对象。

类组件通过this.props访问传递的参数。

基本流程：

在父组件中定义要传递的参数。

在子组件标签上通过属性绑定传递数据。

子组件通过props接收并使用数据。

整个流程形成单向数据流。

函数组件接收props

函数组件直接通过参数接收props。

props是一个包含所有传递属性的对象。

函数组件内部没有this指向。

类组件接收props

类组件通过this.props访问传递的参数。

需要在render方法中使用this.props。

类组件有明确的this指向当前组件实例。

props的特性

props是响应式的，数据变化会触发组件重新渲染。

props是只读的，尝试修改会报错。

props可以传递任意JavaScript值。

父组件通过属性绑定方式传递数据。

完整代码如下

<!DOCTYPE html>
<html lang="en">

<body>
<div id="root"></div>
<script type="text/babel">
let root = ReactDOM.createRoot(document.getElementById("root"));
// 父组件中使用组件
function App() {
let user = '图图';
return (
<div>
<Child1 users={user} />
<Child2 users={user} />
</div>
)
}

// 子函数组件在react中没有this
function Child1(props) {
// props.users = '喜羊羊'; //会报错
console.log(this)
return <h1>你好{props.users}</h1>
}

// 子类组件 this指向Child2类
class Child2 extends React.Component {
// 实例 this
render() {
console.log(this)
return (
<h1>哈喽{this.props.users}</h1>
)
}
}
root.render(<App/>);
</script>
</body>

</html>

请添加图片描述

7.JSX语法之组件状态

类组件状态初始化

在React类组件中，状态通过constructor初始化。

constructor接收props参数，必须调用super(props)后才能使用this。

this.state，类似于Vue的data属性。

状态访问与渲染

状态通过this.state访问，可在render方法中解构或直接引用。

JSX中可通过插值表达式{}动态渲染状态值。

<!DOCTYPE html>
<html lang="en">

<body>
<div id="root"></div>
<script type="text/babel">
let root = ReactDOM.createRoot(document.getElementById("root"));
class Count extends React.Component {
// 给类组件添加状态构造器函数用于初始化实例的
constructor(props) {
// 接收父组件传递的参数
// 通过this访问当前创建的实例但是一定要在调用super函数后才可以使用this
super(props);
// 组件自身的状态相当于Vue中的data属性
this.state = {
a: 'hi'
}
}
render() {
console.log(this)
// 获取状态 this组件实例的state属性
let {a} = this.state;
return (
<div>
<p>展示:{a}</p>
<p>展示:{this.state.a}</p>
</div>
)
}
}
root.render(<Count/>);
</script>
</body>

</html>

请添加图片描述

总结

以上就是第一天要讲的内容啦，本文仅仅简单围绕React前端框架，从基础认知到实操应用，为新手梳理了核心知识点。React作为流行前端框架，以虚拟DOM、组件化开发为核心优势，通过diff算法最小化DOM操作，提升页面性能，广泛应用于各类Web开发场景。

学习重点包括JSX语法及应用，需借助Babel转译，支持数据、属性、样式绑定，且有独特命名规范与注释方式。实操部分涵盖单页面开发流程、组件创建（函数组件与类组件）、组件通信（props单向数据流）及类组件状态管理。

新手需掌握核心库引入、虚拟DOM渲染逻辑，理解组件化思想与单向数据流原则，熟练运用JSX语法实现动态页面。这些基础内容为后续深入学习React状态管理、路由等知识奠定了坚实基础，是入门React的必备要点。

React新手村：一步步掌握前端开发利器Day1

文章目录

React新手村：一步步掌握前端开发利器

一、React的主要原理：

二、React的特点是什么？