湖南营销型网站建设团队,有什么好的加盟店项目,金属网站模板,做网站常用工具React学习笔记 React系列笔记学习 中篇笔记地址#xff1a;【超全】React学习笔记 中#xff1a;进阶语法与原理机制 下篇笔记地址#xff1a;【超全】React学习笔记 下#xff1a;路由与Redux状态管理 React 简介
React 是一个由 Facebook 开发并维护的用于构建用户界面的…React学习笔记 React系列笔记学习 中篇笔记地址【超全】React学习笔记 中进阶语法与原理机制 下篇笔记地址【超全】React学习笔记 下路由与Redux状态管理 React 简介
React 是一个由 Facebook 开发并维护的用于构建用户界面的 JavaScript 库。它被广泛用于构建单页应用SPA尤其是复杂的交互式用户界面。React 允许开发人员构建 Web 应用程序这些程序可以在数据更改时自动更新和渲染而无需重新加载页面。 核心特点 组件化 React 通过组件化的方式来构建界面每个组件都是一个独立的、可复用的代码块负责自己的渲染逻辑。组件可以嵌套、组合形成组件树以构建复杂的用户界面。 声明式编程 React 采用声明式编程方式允许开发者通过描述结果来编写UI而不是描述过程。当数据变更时React 会自动计算最小的变更集并应用到DOM上使得代码更易读、易维护。 虚拟DOMVirtual DOM React引入了虚拟DOM的概念它是一个轻量级的DOM树的副本使得React能够最小化直接与实际DOM的交互从而提高性能。 单向数据流 数据在React中从上到下单向流动使得组件之间的数据流清晰、直观。
编程思想 组件生命周期 React组件有自己的生命周期包括创建、更新和销毁等阶段。在这些不同的阶段开发者可以通过特定的生命周期方法来控制组件的行为。 状态管理State Props React组件的状态管理是React编程的核心部分。组件的状态state和属性props是驱动组件渲染和行为的数据源。 事件处理 React中的事件处理机制允许在组件中捕获和处理用户和系统事件。 条件渲染和列表渲染 React提供了强大的条件渲染和列表渲染功能使得开发者可以轻松地实现动态界面。
示例
import React from react;
import ReactDOM from react-dom;// 创建一个组件
class HelloWorld extends React.Component {render() {return (divHello, World!/div);}
}// 渲染组件到页面
ReactDOM.render(HelloWorld /, document.getElementById(root));在这个示例中我们创建了一个简单的 HelloWorld 组件并使用 ReactDOM.render 方法将其渲染到页面上。React通过组件化的方式使得开发者能够以模块化和可维护的方式构建应用程序同时通过声明式编程、虚拟DOM和单向数据流等特点使得开发高效、简洁和高性能的应用成为可能。
React的基本使用
创建和渲染React元素是React应用的基础。下面是这两个方面的介绍和示例代码
1. 创建React元素了解学习
React元素是构建React应用的最小单位。你可以使用React.createElement方法来创建一个React元素。此方法接受三个参数
type类型元素的类型例如div、span等或者一个React组件。props属性一个对象包含传递给该元素的属性和值。children子元素该元素的子元素可以是文本、React元素或数组。childrens更多子元素这个可以放多个createElement会被一桶方进入去
const element React.createElement(h1,{ className: greeting },Hello, world!
);2. JSX可选
除了React.createElement你还可以使用JSX来创建React元素它是一种JavaScript的语法扩展看起来更像是XML或HTML。使用JSX通常会使你的代码更易读和编写。
const element h1 classNamegreetingHello, world!/h1;3. 渲染React元素
要将React元素渲染到DOM中你可以使用ReactDOM.render方法。此方法接受两个参数
element元素你想要渲染的React元素。container容器你想要将React元素渲染到的DOM容器。
const container document.getElementById(root);
ReactDOM.render(element, container);示例代码
将以下代码放入你的HTML文件中你会看到一个显示Hello, world!的标题元素。
!DOCTYPE html
html langen
head
meta charsetUTF-8
meta nameviewport contentwidthdevice-width, initial-scale1.0
titleReact Example/title
script srchttps://unpkg.com/react17/umd/react.development.js/script
script srchttps://unpkg.com/react-dom17/umd/react-dom.development.js/script
/head
bodydiv idroot/divscript typetext/javascriptconst element h1 classNamegreetingHello, world!/h1;const container document.getElementById(root);ReactDOM.render(element, container);
/script/body
/html在这个示例中我们首先加载了React和ReactDOM库然后创建了一个名为root的div元素作为我们React应用的根元素。接下来我们创建了一个React元素并使用ReactDOM.render方法将其渲染到root元素中。
JSX概念与理解使用
JSX的基本使用:
JSX是JavaScript XML的缩写它允许你在JavaScript中写HTML。表示在JavaScript代码中写XML ( HTML格式的代码。优势︰声明式语法更加直观、与HTML结构相同降低了学习成本、提升开发效率。这种语法糖可以使你的代码更容易编写和阅读并且React元素通常是通过JSX创建的。
const element h1Hello, world!/h1;为什么学习JSX
createElement()的问题 繁琐不简洁。 不直观无法一眼看出所描述的结构。 不优雅用户体验不爽。
React的React.createElement函数虽然功能强大但在创建复杂节点时可能会显得非常繁琐和不直观。
以下是一个例子说明通过React.createElement创建一个包含多个元素和文本的复杂节点的过程以及同样的节点如何通过JSX轻松创建。
使用React.createElement创建复杂节点:
const complexElement React.createElement(div,{ className: container },React.createElement(h1,null,Hello, world!),React.createElement(p,null,This is a complex element.),React.createElement(ul,null,[1, 2, 3, 4, 5].map((number, index) React.createElement(li,{ key: index },number)))
);ReactDOM.render(complexElement,document.getElementById(root)
);在上面的代码中我们尝试创建一个包含标题、段落和列表的容器。你可以看到代码非常繁琐和嵌套很难一眼看出元素的结构。
使用JSX创建相同的复杂节点:
const complexElementJSX (div classNamecontainerh1Hello, world!/h1pThis is a complex element./pul{[1, 2, 3, 4, 5].map((number, index) (li key{index}{number}/li))}/ul/div
);ReactDOM.render(complexElementJSX,document.getElementById(root)
);在上面的JSX版本中代码更简洁、更直观、更易读。你可以很容易地看出元素的结构而不需要通过多层嵌套的React.createElement调用来理解。这显示了为什么学习和使用JSX是有用的它可以大大简化React元素的创建和渲染过程提高开发效率和代码的可读性。
使用细节 驼峰命名法: 在JSX中所有的React元素属性名应使用驼峰命名法 (camelCase)而不是HTML中的短横线命名法 (kebab-case)。例如HTML中的tabindex在JSX中应该写为tabIndex。 // 正确
input typetext readOnly{true} /// 错误
input typetext read-only{true} /特殊属性名: 当您在JSX中创建React元素时有一些HTML属性名需要以特殊的JSX属性名来代替。这是因为classfor和tabindex在JavaScript中是保留字。下面是一些例子来说明这点: class - className: 在HTML中我们用class属性来指定CSS类名但在JSX中我们应该用className来代替。 // HTML
div classappHello, world!/div// JSX
div classNameappHello, world!/divfor - htmlFor: 在HTML中for属性用于将label元素关联到input元素。但在JSX中我们应该用htmlFor来代替。 // HTML
label forusernameUsername:/label
input idusername typetext /// JSX
label htmlForusernameUsername:/label
input idusername typetext /tabindex - tabIndex: 在HTML中tabindex属性用于指定元素的tab顺序。但在JSX中我们应该用tabIndex来代替。 // HTML
input tabindex1 typetext /// JSX
input tabIndex1 typetext /以上的例子明确了在JSX中使用特殊属性名的重要性以及如何正确地使用它们。 自闭合标签: 没有子节点的React元素可以用/结束这与XML和HTML中的自闭合标签类似。 没有子节点的React元素: 当一个React元素没有子节点时您可以使用自闭合标签的形式来定义它。这种形式类似于XML和HTML中的自闭合标签它以/结束而不是使用一个单独的结束标签。 // 正确
input typetext /
br /
hr /具有子节点的React元素: 对于具有子节点的React元素您应该使用一个开始标签和一个结束标签来定义它而不是使用自闭合标签的形式。 // 正确
divpHello, world!/p
/div// 错误
div /在上面的例子中input, br, 和 hr 元素没有子节点所以它们是以自闭合标签的形式定义的。而div元素有一个子节点p所以它是以一个开始标签和一个结束标签的形式定义的。在第二个错误的示例中div /是一个自闭合标签但是它应该包含一个子节点p所以应该使用一个开始标签和一个结束标签来定义它。 使用小括号包裹JSX: 当JSX元素跨越多行时推荐使用小括号将其包裹起来。这样做可以避免JavaScript的自动分号插入(ASI)机制在意料之外的地方插入分号导致意想不到的结果。 // 推荐
const element (divpHello, world!/p/div
);// 不推荐
const element divpHello, world!/p/div;以上的细节和规范可以帮助开发者在编写JSX代码时保持清晰和一致避免常见的错误和陷阱。
小结
推荐使用JSX语法创建React元素写JSX就跟写HTML一样更加直观、友好JSX语法更能体现React的声明式特点描述UI长什么样子)
使用步骤︰
const title h1Hello JSXh1
ReactDOM.render(title, root);为什么脚手架create react-app能使用JSX语法
JSX不是标准的ECMAScript语法它是ECMAScript的语法扩展。需要使用babel编译处理后才能在浏览器环境中使用。create-react-app脚手架中已经默认有该配置无需手动配置。编译JSX语法的包为:babel/preset-react。
JSX中使用JavaScript表达式:
你可以在JSX中的大括号内放入任何有效的JavaScript表达式。例如2 2、user.firstName或formatName(user)都是有效的JavaScript表达式。
语法∶ {JavaScript表达式}
注意∶语法中是单大括号不是双大括号! 不要与Vue混淆
在JSX中可以使用单大括号 {} 来包裹JavaScript表达式。在大括号内您可以放置任何有效的JavaScript表达式。表达式是计算并产生一个值的代码片段。例如2 2、user.firstName 或 formatName(user) 都是JavaScript表达式。
单大括号中可以使用任意的JavaScript表达式
在JSX中您可以在大括号中放置任何JavaScript表达式。例如
const element h1Hello, {10 20}/h1;在这个例子中10 20 是一个JavaScript表达式它的结果是 30所以输出的HTML将是 h1Hello, 30/h1。
JSX自身也是JS表达式
JSX表达式本身也是JavaScript表达式这意味着您可以在if语句、for循环、赋值、参数、运算符等JavaScript代码结构中使用JSX。
const dv divHello/div;
const rt_value (div嵌入表达式: {dv}/div
)注意: JS中的对象是一个例外一般只会出现在style属性中
虽然您可以在JSX中的大括号内放置任何表达式但直接放置一个对象字面量是个例外。如果您尝试这样做JSX会将其解释为多个单独的表达式而不是一个对象表达式。所以如果您想传递一个对象您应该包裹它在圆括号里。
例如以下代码是错误的
const element h1 style{ background: blue, color: white }Hello World!/h1;正确的做法应该是
const element h1 style{{ background: blue, color: white }}Hello World!/h1;注意: 不能在JSX中出现语句(比如: if/for等)
在JSX的大括号内您不能使用语句比如if或for。但您可以在外面的JavaScript代码中使用它们或者使用JavaScript的表达式语法来实现相同的效果。
例如您不能直接在JSX中这样做
// 错误
const element h1{if (user) {return user.firstName}}/h1;但您可以这样做
// 正确
const element h1{user ? user.firstName : Stranger}/h1;在这个例子中我们使用了条件三元运算符来实现条件渲染。
JSX的条件渲染:
条件渲染是根据某些条件动态显示不同的UI结构。在React中你可以使用JavaScript的条件语句如 if、else或表达式如三元运算符 ? : 或逻辑与运算符 来实现条件渲染。
使用 if / else 实现条件渲染
在React中你可以在函数的外部或内部使用 if / else 语句来决定渲染哪些组件。
function LoadingIndicator(props) {if (props.isLoading) {return divLoading.../div;} else {return divContent loaded/div;}
}ReactDOM.render(LoadingIndicator isLoading{true} /,document.getElementById(root)
);在上述代码中如果 props.isLoading 为 true将渲染显示 “Loading…” 的 div。否则将渲染显示 “Content loaded” 的 div。
使用三元运算符实现条件渲染
你也可以使用三元运算符 ? : 在 JSX 内直接进行条件渲染。
function LoadingIndicator(props) {return (div{props.isLoading ? Loading... : Content loaded}/div);
}ReactDOM.render(LoadingIndicator isLoading{true} /,document.getElementById(root)
);使用逻辑与运算符 实现条件渲染
逻辑与运算符 是一个简洁的方法用于在满足某个条件时渲染某些元素。
function LoadingIndicator(props) {return (div{props.isLoading Loading...}/div);
}ReactDOM.render(LoadingIndicator isLoading{true} /,document.getElementById(root)
);在上述代码中如果 props.isLoading 为 true则会渲染显示 “Loading…”。否则如果 props.isLoading 为 false则不渲染任何内容返回 null。
JSX的列表渲染:
列表渲染是在React中很常见的操作。通常你会有一个数组的数据你需要将其转换为一个由React元素组成的数组然后将它们显示在UI中。
1. 使用 Array.prototype.map() 方法渲染列表:
map() 方法是在JavaScript数组中处理列表数据的常用方式。它会遍历数组的每个元素并返回一个新的数组该数组由对原数组的每个元素应用某个函数得到的结果组成。
在React中你可以使用 map() 方法将一个数据数组转换为一个元素数组并使用 key 属性来保证每个元素具有稳定的标识。
const numbers [1, 2, 3, 4, 5];
const listItems numbers.map((number, index) li key{index.toString()}{number}/li
);ReactDOM.render(ul{listItems}/ul,document.getElementById(root)
);
// 或则
const user_info ({id : 1, name : caixy},{id : 2, name : Caixy!!!},{id : 3, name : CAIXYPROMISE}
)
const list (ul{user_info.map(item li key{item.id}{item.name}/li)}/ul
)注意:
key 属性是React用来识别哪些元素改变了的重要标识。每个元素的 key 值应该是唯一的。应避免使用数组索引作为 key 值除非列表不会重新排序、不会过滤、不会删除或添加新元素。因为当元素顺序改变时索引也会改变这可能会导致不必要的组件重新渲染和状态丢失。key 属性的值应该是稳定、可预测和唯一的以便React能够匹配元素与其对应的状态。
嵌套组件中的列表渲染:
function NumberList(props) {const numbers props.numbers;const listItems numbers.map((number) li key{number.toString()}{number}/li);return (ul{listItems}/ul);
}const numbers [1, 2, 3, 4, 5];ReactDOM.render(NumberList numbers{numbers} /,document.getElementById(root)
);JSX的样式处理:
在React和JSX中可以通过几种不同的方法来处理样式。以下是两种常见的方法。
行内样式
在React中行内样式不是作为字符串而是作为一个对象来使用的。样式属性的名称采用驼峰命名法camelCase而不是短划线命名法。此外属性值作为字符串提供。下面是一个示例:
const divStyle {color: blue,backgroundColor: lightgray,
};function HelloWorldComponent() {return div style{divStyle}Hello World!/div;
}ReactDOM.render(HelloWorldComponent /,document.getElementById(root)
);在上述代码中我们首先创建了一个名为 divStyle 的对象该对象包含我们想要应用到 div 元素上的样式属性。然后我们通过 style 属性将 divStyle 对象传递给 div 元素。
类名
可以使用 className 属性为React元素指定CSS类。className 属性接受一个字符串该字符串包含一个或多个类名。下面是一个示例:
function HelloWorldComponent() {return div classNamehello-worldHello World!/div;
}ReactDOM.render(HelloWorldComponent /,document.getElementById(root)
);// CSS:
// .hello-world {
// color: blue;
// background-color: lightgray;
// }在上述代码中我们为 div 元素指定了一个 className 属性该属性的值是 hello-world。然后我们在CSS中定义了一个 .hello-world 类该类应用了我们想要的样式。
注意
由于 class 是JavaScript中的保留字因此在JSX中应使用 className 而不是 class。在行内样式中应使用驼峰命名法而不是短划线命名法来命名样式属性。例如应使用 backgroundColor 而不是 background-color。
JSX小结
在React的世界里JSX扮演了非常重要的角色它为我们提供了一种在JavaScript中书写HTML的方式降低了学习曲线同时提升了开发效率。通过对JSX的使用我们能够快速且直观地创建React元素使得代码更为简洁和易读。下面是对前面内容的简单总结:
JSX基础:
JSX是JavaScript XML的简写它允许我们在JavaScript代码中写HTML。使用JSX比React.createElement更简洁、直观和优雅特别是在创建复杂节点时。示例: const element h1Hello, world!/h1;
细节使用:
驼峰命名法: JSX中的属性名应使用驼峰命名法。特殊属性名: 如class应写为classNamefor应写为htmlFortabindex应写为tabIndex。自闭合标签: 没有子节点的React元素可以用/来结束。小括号包裹: 推荐使用小括号包裹多行的JSX避免JavaScript的自动分号插入机制带来的问题。
JavaScript表达式在JSX中的使用:
在JSX中可以使用单大括号{}包裹任意的JavaScript表达式。JSX自身也是JavaScript表达式。注意: 不能在JSX中使用语句如if和for等。
条件渲染:
通过if/else, 三元运算符? : 或逻辑与运算符实现条件渲染。
列表渲染:
使用数组的map()方法渲染列表并为每个元素提供唯一的key属性值。注意: 尽量避免使用数组索引作为key值。
样式处理:
行内样式: 通过对象的形式传递样式属性名采用驼峰命名法。类名: 使用className属性指定CSS类。
为什么能使用JSX:
JSX不是标准的ECMAScript语法需要通过Babel编译处理后才能在浏览器环境中运行。create-react-app脚手架中已经默认包含了这种配置使得我们能够直接使用JSX语法。
通过上述的详细介绍和示例应该能够对JSX有一个全面且深入的理解知道如何在React项目中利用JSX来创建和渲染UI结构以及如何处理常见的使用细节和常见问题。这为接下来的React学习和开发打下了坚实的基础。
React基础组件概念与使用
1. React 组件介绍
在React的世界中组件是核心的构建块它们是React应用的基础。通过组件我们可以将UI拆分成独立可重用的片段每个片段都可以单独思考。这种模块化的设计方式不仅提高了代码的可维护性同时也为复杂的应用开发提供了清晰的结构。
1.1 组件的基本概念: 组件是React的一等公民: 组件是React框架中最基本的单位所有的React应用都是由一个或多个组件组成的。每个组件都是一个独立的模块它包含了一些特定的功能和显示逻辑。 使用React就是在用组件: 开发React应用的过程实际上就是一个不断地创建组件和组装组件的过程。React通过组件提供了一种高效的方式来构建和组织代码使得代码结构清晰、易于维护。 组件表示页面中的部分功能: 组件通常对应页面上的某个视觉元素或功能模块例如按钮、表单、导航条等。通过组件我们可以将复杂的页面拆分成更小、更管理的部分。 组合多个组件实现完整的页面功能: 组件可以嵌套和组合使用通过将简单的组件组合成更复杂的组件我们可以构建出完整的页面。组件的组合提供了极大的灵活性使我们能够以模块化的方式构建复杂的应用。 特点: 可复用、独立、可组合: 可复用: 组件是可复用的同一个组件可以在多个地方使用降低了代码重复度提高了开发效率。独立: 每个组件是独立的它有自己的状态和逻辑可以独立运行和测试。可组合: 组件可以与其他组件组合使用创建复杂的UI结构和功能。
通过理解和运用组件的这些特点我们可以更好地组织和管理React应用的代码同时也能更高效地开发和维护复杂的应用程序。
2. React组件的两种创建方式
在React中有两种主要的组件创建方式分别是通过函数和通过类来创建组件。每种方法都有其特点和用途下面将分别介绍这两种方法的基本使用和特点。
2.1 使用函数创建组件
使用函数来创建组件是React中最常见也最简单的组件创建方式。通过定义一个JavaScript函数并返回一些 JSX我们就能创建一个简单的React组件。这种类型的组件通常被称为“函数组件”。
函数组件是React的基础它们提供了一种简单、清晰和易于理解的方式来创建组件。随着React的发展函数组件通过Hooks得到了极大的增强使得它们不仅仅是表现组件还能拥有状态和其他复杂功能但这已经超越了基本的函数组件范畴。
特点:
函数组件必须有返回值: 函数组件必须返回React元素这可以是一个JSX表达式也可以是null或false来表示不渲染任何内容。组件名称必须以大写字母开头: 这是React的命名规范以大写字母开头的名称表示它是一个组件而不是普通的React元素或者JavaScript对象。React会根据这个规则来确定如何处理和渲染这个实体。使用函数名作为组件标签名: 在使用函数组件时应使用函数的名称作为组件的标签名。例如上面的Hello组件应该用Hello /标签来使用。
基本语法
function Hello() {return (div这是我的第一个函数组件!/div);
}ReactDOM.render(Hello /,document.getElementById(root)
);2.2 使用类创建组件
类组件是利用ES6的class语法创建的组件它提供了更多的功能和灵活性特别是在处理组件的状态和生命周期时。下面是创建类组件的基本约定和步骤
类名称的约定: 类名称也必须以大写字母开头: 类似于函数组件类组件的名称也必须以大写字母开头以区分React组件和普通的JavaScript类。 继承的约定: 2. 类组件应该继承React.Component父类: 通过继承React.Component类组件可以获得React为组件提供的方法和属性这是创建类组件的基础。render方法的约定: 3. 类组件必须提供render()方法: render方法是类组件的核心它定义了组件的输出。每当组件的props或state发生变化时render方法都会被调用。 render()方法必须有返回值: render方法应返回一个React元素该元素描述了组件在页面上的表现。这个返回值可以是JSX表达式、一个React元素、null或false表示不渲染任何内容。
下面是一个简单的类组件创建示例
class Hello extends React.Component {render() {return divHello class Component!/div;}
}ReactDOM.render(Hello /,document.getElementById(root)
);在上述示例中我们创建了一个名为Hello的类组件该组件继承了React.Component。我们为Hello组件定义了一个render方法该方法返回了一个简单的JSX表达式。最后我们使用ReactDOM.render方法将Hello组件渲染到页面上。
这个简单的示例展示了创建和使用类组件的基本步骤。通过继承React.Component和实现render方法我们可以创建具有更多功能和灵活性的组件。随着您对React的深入理解您会发现类组件可以提供更多高级功能例如状态管理、生命周期方法和错误边界处理等。
2.3 抽离为独立JS文件
随着项目规模的扩大和组件数量的增加组织和管理这些组件变得至关重要。一种常见的做法是将每个组件放在一个单独的JS文件中这样做有助于保持代码的清晰和模块化。下面是如何将组件抽离到独立JS文件中的步骤 创建组件文件: 创建一个新的JS文件例如Hello.js用于存放组件的代码。 导入React: 在Hello.js文件的顶部导入React库。这是因为组件需要React的支持才能正常工作。import React from react;创建组件: 在Hello.js文件中创建您的组件。您可以选择创建函数组件或类组件具体取决于您的需求。function Hello() {return divHello World!/div;
}
// 或
class Hello extends React.Component {render() {return divHello World!/div;}
}导出组件: 在Hello.js文件的底部导出您刚刚创建的组件。这样其他文件就可以导入和使用它了。export default Hello;导入组件: 在index.js或您想要使用该组件的文件中导入Hello组件。import Hello from ./Hello;渲染组件: 使用ReactDOM.render方法将Hello组件渲染到页面上。ReactDOM.render(Hello /,document.getElementById(root)
);通过以上步骤您已经将Hello组件从index.js文件中抽离出来并放置在了一个单独的Hello.js文件中。这种组织方式不仅使代码结构更清晰也更便于团队协作和代码维护。随着项目的发展推荐将相关的组件组织到特定的目录和文件中例如将所有与用户相关的组件放在一个名为users的目录中每个组件有其单独的JS文件。
3. React 事件处理
3.1 事件绑定
在React中事件处理程序的命名和DOM中稍有不同但大体相似主要体现在以下几点 事件命名: React事件的命名采用驼峰命名法而非全小写。例如onClick 代替 onclickonMouseEnter 代替 onmouseenter。 事件绑定语法: 在React中事件绑定的语法是 on 事件名称 {事件处理程序}。例如onClick{handleClick}。注意事件处理程序通常是一个函数的引用而非函数调用除非您想在事件触发时立即执行该函数。
以下是在类组件和函数组件中绑定事件的例子
类组件中的事件绑定
class App extends React.Component {handleClick() {console.log(单击事件触发了);}render() {// 注意事件名称为onClick而非onclick// 并且事件处理函数为this.handleClick而非this.handleClick()return (button onClick{this.handleClick}/button);}
}ReactDOM.render(App /,document.getElementById(root)
);在上述代码中我们创建了一个名为 handleClick 的方法来处理按钮的点击事件并使用 onClick 属性将其绑定到按钮上。
函数组件中的事件绑定
function App() {function handleClick() {console.log(单击事件触发了);}// 注意事件名称为onClick而非onclickreturn (button onClick{handleClick}点我/button);
}ReactDOM.render(App /,document.getElementById(root)
);在上述代码中我们在函数组件内部定义了一个名为 handleClick 的函数来处理按钮的点击事件并使用 onClick 属性将其绑定到按钮上。
通过这些例子您可以看到在类组件和函数组件中绑定事件的方式是非常相似的。最主要的区别是在类组件中事件处理函数通常是类的方法而在函数组件中事件处理函数通常是组件函数内部的函数。同时注意React事件的命名和绑定语法以确保事件能够正确触发。
3.2 事件对象
在React的事件处理程序中可以通过参数获取到事件对象。React有自己的事件对象系统称为合成事件Synthetic Event**它是对浏览器的原生事件的跨浏览器封装。这意味着React的事件对象具有统一的属性和方法无论在哪个浏览器中运行都能保证相同的行为。**这有助于处理跨浏览器兼容性问题使得在不同浏览器中的事件处理变得更简单、更一致。
以下是一个简单的示例展示了如何在事件处理函数中访问事件对象并使用它来阻止默认行为
function handleClick(e) {// 阻止默认行为例如阻止链接的跳转e.preventDefault();// 输出事件对象console.log(事件对象, e);// 输出事件类型console.log(事件类型, e.type);
}// 注意: 事件名称为onClick而非onclick
// 事件处理函数为handleClick而非handleClick()
return (a href#some-link onClick{handleClick}点我不会跳转页面/a
);// 也可以直接在事件绑定时传递事件对象
return (a hrefhttps://www.baidu.com/ onClick{(e) {e.preventDefault();console.log(事件对象, e);}}点我不会跳转页面/a
);ReactDOM.render(a href#some-link onClick{handleClick}点我不会跳转页面/a,document.getElementById(root)
);在上述代码中我们创建了一个名为 handleClick 的函数该函数接受一个参数 e表示事件对象。在函数体内我们使用 e.preventDefault() 方法阻止了链接的默认跳转行为并通过 console.log 输出了事件对象和事件类型。最后我们使用 onClick 属性将 handleClick 函数绑定到了链接元素上。
另外我们也展示了如何在事件绑定时直接传递事件对象并在箭头函数中处理事件对象。这种方式可以让我们在事件处理函数中直接访问事件对象而无需创建一个单独的事件处理函数。这在处理简单事件时可能会很方便。
4. 有状态组件和无状态组件
在React中组件分为有状态组件和无状态组件两大类。这个分类基于组件是否具有内部状态state。状态是React组件中存储数据的地方它决定了组件的行为和显示。
4.1 无状态组件函数组件
无状态组件通常使用函数来创建它仅依赖于外部传入的props来确定渲染结果没有自己的状态state也没有生命周期方法。由于它们只是纯函数无状态组件通常更简单、更容易理解和维护。以下是一个简单的无状态组件示例
function Greeting(props) {return h1Hello, {props.name}/h1;
}ReactDOM.render(Greeting nameWorld /,document.getElementById(root)
);在上述代码中Greeting 是一个无状态组件它接受一个 props 对象作为参数并返回一个React元素。无状态组件是纯函数它们的输出完全由输入即props决定。函数无状态组件通常用在不需要与用户操作反馈的组件当中使用。
4.2 有状态组件类组件
有状态组件通常使用类来创建并且拥有内部状态state和生命周期方法。有状态组件可以在内部管理数据响应事件并在数据变化时自动更新UI。所以有状态的类组件通常用于需要与用户操作进行反馈的组件中去使用。以下是一个简单的计数器可以作为 有状态组件示例
class Counter extends React.Component {constructor() {super();// 初始化状态this.state { count: 0 };}// 事件处理函数handleIncrement () {this.setState({ count: this.state.count 1 });}render() {return (divpCount: {this.state.count}/pbutton onClick{this.handleIncrement}Increment/button/div);}
}ReactDOM.render(Counter /,document.getElementById(root)
);在上述代码中Counter 是一个有状态组件它具有内部状态 state并定义了一个事件处理函数 handleIncrement 来处理按钮的点击事件。当按钮被点击时handleIncrement 函数被调用它通过 setState 方法更新组件的状态从而引发组件的重新渲染以显示新的计数值。
总结来说无状态组件和有状态组件是React中两种主要的组件类型无状态组件用于简单的、纯展示性的任务而有状态组件用于更复杂的、交互式的任务。在设计React应用时应根据组件的职责和需求来选择合适的组件类型。
5. 组件中的state和setState
5.1 state的基本使用
在React组件中state是一个特殊的对象它存储了组件的状态数据。state是组件内部私有的不能从组件外部访问或修改。我们可以通过this.state来访问组件的状态如下例所示
class Hello extends React.Component { // 注意: 是 React.Component, 不是 React.component// 使用构造函数初始化状态constructor() {super();this.state { count: 0 }; // 注意: 是 0, 不是 o}render() {return (div有状态组件{this.state.count}/div);}
}ReactDOM.render(Hello /,document.getElementById(root)
);在上述代码中我们首先通过constructor构造函数初始化state对象并设置初始状态count为0。然后在render方法中我们通过this.state.count访问state对象中的count属性并将其渲染到DOM中。
5.2 setState的基本使用
当我们需要修改组件的状态时不能直接修改state对象而应该使用this.setState方法。this.setState是异步的它接受一个新的状态对象或一个函数作为参数并安排一个组件更新。以下是一个简单的例子
class Counter extends React.Component {constructor(props) {super(props);this.state { count: 0 };}// 事件处理函数handleIncrement () {this.setState({ count: this.state.count 1 });}render() {return (divpCount: {this.state.count}/pbutton onClick{this.handleIncrement}Increment/button/div);}
}ReactDOM.render(Counter /,document.getElementById(root)
);在上述代码中我们定义了一个事件处理函数handleIncrement它通过this.setState方法更新count状态。每次点击按钮时handleIncrement函数都会被调用count状态会增加1并触发组件重新渲染以显示新的计数值。
总的来说state和setState是React组件中管理和更新状态的核心机制。通过理解和掌握它们的使用可以有效地管理组件的状态并实现动态交互功能。
5.3 setState()修改状态
在React中组件的状态是可以变化的但是我们不能直接修改state对象的值而应该通过this.setState()方法来修改状态。下面是setState方法的基本语法
this.setState({// 要修改的数据
});注意事项:
不要直接修改state中的值: 这是非常重要的直接修改state是错误的做法可能会导致未预期的结果和难以调试的问题。// 错误的做法!
this.state.count 1;setState()的作用: setState()方法主要有两个作用 修改state中的数据。在state数据被修改并且组件重新渲染后更新UI界面。
数据驱动视图的思想
React框架遵循数据驱动视图的思想即状态(state)的变化会自动驱动视图的更新。这种方式简化了UI编程我们只需要关注数据的管理不需要直接操作DOM元素。当数据发生变化时React会负责计算最小的DOM操作来保证UI的更新效率。
下面是一个setState的使用例子展示了如何通过点击按钮来更新组件的状态并且显示新的状态值
class Counter extends React.Component {constructor(props) {super(props);this.state { count: 0 };}handleIncrement () {this.setState({ count: this.state.count 1 });}render() {return (divpCount: {this.state.count}/pbutton onClick{this.handleIncrement}Increment/button/div);}
}ReactDOM.render(Counter /,document.getElementById(root)
);在这个例子中handleIncrement方法通过this.setState()来增加count的值每次点击按钮时count值会增加1并且组件会重新渲染显示新的count值。这个例子体现了React的数据驱动视图的思想通过修改数据来自动更新视图。
6. 事件绑定和this指向
在React的类组件中事件处理器的this指向可能会导致一些混淆。在JavaScript中函数的this值是由调用它的上下文决定的而不是由函数自身决定的。因此当我们在类组件中定义事件处理器时需要确保this指向正确。
1. 箭头函数
箭头函数不会创建自己的this值它会捕获创建时所在的this值。因此可以利用箭头函数来保证this指向的正确。下面是一个示例展示了如何使用箭头函数来绑定事件处理器
class Hello extends React.Component {onIncrement () {this.setState(prevState ({ count: prevState.count 1 }));}render() {return (button onClick{this.onIncrement}Increment/button);}
}ReactDOM.render(Hello /,document.getElementById(root)
);在上述代码中onIncrement方法是一个箭头函数它会捕获类实例的this值。因此当onIncrement方法被作为事件处理器调用时this指向的是类实例从而可以正确地调用this.setState方法来更新状态。
2. 在render方法中使用箭头函数
另一种方式是在render方法中使用箭头函数来创建事件处理器。以下是一个示例
class Hello extends React.Component {onIncrement() {this.setState(prevState ({ count: prevState.count 1 }));}render() {return (button onClick{() this.onIncrement()}Increment/button);}
}ReactDOM.render(Hello /,document.getElementById(root)
);在这个例子中我们在render方法中创建了一个新的箭头函数该箭头函数调用onIncrement方法。由于箭头函数捕获了render方法的this值也就是类实例的this值因此onIncrement方法中的this指向是正确的。
这两种方式都可以保证事件处理器中this的正确指向但是第一种方式在类属性中使用箭头函数通常更为推荐因为它可以避免在每次渲染时创建新的函数对象从而提高性能。
3. 使用 Function.prototype.bind
在ES5中bind方法可以创建一个新的函数该函数的this值被绑定到提供的值以及可选的参数列表。在React的类组件中可以在构造函数中使用bind方法将事件处理程序的this值绑定到类实例上。以下是一个示例
class Hello extends React.Component {constructor() {super();this.onIncrement this.onIncrement.bind(this);}onIncrement() {this.setState(prevState ({ count: prevState.count 1 }));}render() {return (button onClick{this.onIncrement}Increment/button);}
}ReactDOM.render(Hello /,document.getElementById(root)
);在上述代码中
在Hello组件的构造函数中通过调用this.onIncrement.bind(this)将onIncrement方法的this值绑定到类实例上并将绑定结果赋值回this.onIncrement。在render方法中通过onClick{this.onIncrement}属性将onIncrement方法绑定到按钮的点击事件上。当用户点击按钮时onIncrement方法会被调用并且this值指向的是类实例从而可以正确地调用this.setState方法来更新状态。
通过使用bind方法可以确保事件处理程序中this的正确指向但是这种方式需要在构造函数中编写额外的代码。为了减少样板代码很多开发者倾向于使用箭头函数来绑定事件处理程序。
4. 事件绑定和this指向总结
在React中确保事件处理程序中this的正确指向是非常重要的特别是在类组件中。下面是三种常见的处理this指向的方法并给出了相应的代码示例。
使用类的实例方法
通过使用箭头函数定义类的实例方法可以确保this指向类的实例。这是因为箭头函数不会创建自己的this上下文而是从外围作用域继承this值。这是一种简洁且推荐的方法。
class Hello extends React.Component {onIncrement () {this.setState(prevState ({ count: prevState.count 1 }));}render() {return (button onClick{this.onIncrement}Increment/button);}
}ReactDOM.render(Hello /,document.getElementById(root)
);使用箭头函数
在事件处理属性中直接使用箭头函数也可以确保this的正确指向但可能会导致每次组件渲染时都创建新的函数实例这可能会影响性能。
class Hello extends React.Component {onIncrement() {this.setState(prevState ({ count: prevState.count 1 }));}render() {return (button onClick{() this.onIncrement()}Increment/button);}
}ReactDOM.render(Hello /,document.getElementById(root)
);使用bind方法
通过在构造函数中使用bind方法可以将事件处理程序的this值绑定到类实例上。这是一种传统的方法但可能会增加样板代码的数量。
class Hello extends React.Component {constructor() {super();this.onIncrement this.onIncrement.bind(this);}onIncrement() {this.setState(prevState ({ count: prevState.count 1 }));}render() {return (button onClick{this.onIncrement}Increment/button);}
}ReactDOM.render(Hello /,document.getElementById(root)
);以上三种方法根据个人和项目的需求可以选择使用其中使用类的实例方法是比较现代且简洁的方法。
7. React 表单处理
在React中表单处理可以通过两种主要方式来完成受控组件和非受控组件。下面我们分别介绍这两种方式
7.1 受控组件
受控组件是指其表单数据由React组件的state管理的表单元素。在受控组件中表单元素的值由state决定并通过事件处理程序更新。
步骤:
添加状态 在组件的state中添加一个状态项该状态项将作为表单元素的value值。
state { txt: }绑定事件 给表单元素绑定一个change事件当表单元素的值发生变化时更新state的值。
input typetext value{this.state.txt} onChange{e this.setState({ txt: e.target.value })}
/通过上述步骤我们就创建了一个受控组件。在这个例子中input元素的值始终由this.state.txt决定每当用户输入时onChange事件处理程序会被触发从而更新this.state.txt的值。
完整示例
在受控组件中表单元素的值由React组件中的state控制。以下是一个完整的实例包括文本框、下拉框和复选框的操作
import React, { Component } from react;class FormExample extends Component {state {textValue: ,selectedOption: ,isChecked: false};handleTextChange (event) {this.setState({ textValue: event.target.value });}handleSelectChange (event) {this.setState({ selectedOption: event.target.value });}handleCheckboxChange (event) {this.setState({ isChecked: event.target.checked });}render() {return (div{/* 文本框 */}input typetext value{this.state.textValue} onChange{this.handleTextChange} /{/* 下拉框 */}select value{this.state.selectedOption} onChange{this.handleSelectChange}option valueoption1Option 1/optionoption valueoption2Option 2/option/select{/* 复选框 */}input typecheckbox checked{this.state.isChecked} onChange{this.handleCheckboxChange} //div);}
}export default FormExample;在以上示例中通过定义状态state和事件处理函数我们实现了对文本框、下拉框和复选框的受控操作。每当用户对表单元素进行操作时对应的onChange事件处理函数就会被调用从而更新state中的值实现了数据与视图的同步更新。 文本框、富文本框、下拉框通过操作value属性并绑定onChange事件处理函数将表单元素的值设置为state的值实现受控操作。 复选框通过操作checked属性并绑定onChange事件处理函数将复选框的选中状态设置为state的值实现受控操作。 受控组件多表单元素优化:
在处理表单时如果表单元素很多为每个表单元素编写单独的处理函数可能会很繁琐。一个更好的方法是编写一个通用的处理函数它可以处理所有表单元素的变化。以下是如何实现这个优化的示例
import React, { Component } from react;class FormExample extends Component {state {txt: ,checkboxValue: false};handleForm (event) {const target event.target;const value target.type checkbox ? target.checked : target.value;const name target.name;this.setState({[name]: value});}render() {return (div{/* 文本框 */}input typetextnametxtvalue{this.state.txt}onChange{this.handleForm}/{/* 复选框 */}input typecheckboxnamecheckboxValuechecked{this.state.checkboxValue}onChange{this.handleForm}//div);}
}export default FormExample;在上面的代码中我们实现了以下几点优化
添加name属性为每个表单元素添加了name属性并且name属性的值与state中的属性名相同。获取对应值通过检查表单元素的type属性我们可以确定是获取value属性还是checked属性的值。通用事件处理函数创建了一个通用的handleForm事件处理函数它可以处理所有表单元素的onChange事件。在这个函数中我们使用了计算属性名称[name]来动态更新state中对应的值。这样无论我们有多少表单元素只需要一个handleForm函数就可以处理所有的表单元素变化。
7.2 非受控组件 (DOM方式)
与受控组件不同非受控组件不通过 state 来保存表单元素的值而是直接通过 DOM 来操作。非受控组件更接近于传统的 HTML 表单处理方式。
步骤:
创建 ref 对象 使用 React.createRef() 方法创建一个 ref 对象。
constructor() {super();this.txtRef React.createRef();
}将 ref 对象添加到表单元素中 在表单元素的 ref 属性中传入创建好的 ref 对象。
input typetext ref{this.txtRef} /通过 ref 对象获取表单元素的值 在事件处理程序中通过 ref 对象的 current 属性来获取表单元素的值。
console.log(this.txtRef.current.value);完整示例:
下面是一个非受控组件的完整示例演示了如何通过 ref 来获取表单元素的值。
import React, { Component } from react;class UncontrolledForm extends Component {constructor(props) {super(props);// 1. 创建一个 ref 对象this.txtRef React.createRef();}handleSubmit (event) {event.preventDefault();// 3. 通过 ref 对象获取文本框的值console.log(Text field value:, this.txtRef.current.value);}render() {return (form onSubmit{this.handleSubmit}{/* 2. 将创建好的 ref 对象添加到文本框中 */}input typetext ref{this.txtRef} /button typesubmitSubmit/button/form);}
}export default UncontrolledForm;在这个示例中我们首先通过 React.createRef() 创建了一个 ref 对象 this.txtRef然后将它传给了 input 元素的 ref 属性。在 handleSubmit 方法中我们通过 this.txtRef.current.value 获取到了文本框的值并在控制台中打印出来。
通过上述步骤我们实现了一个非受控组件。在实际应用中通常推荐使用受控组件来处理表单数据因为它们可以更好地集成在 React 组件的状态管理系统中但在某些情况下非受控组件可能会更简单或方便但是React官方不推荐使用非受控组件因为它会设计到DOM操作而DOM操作会消耗大量时间和内存不利于网站系统。
8. React组件的总结
React 是一个用于构建用户界面的 JavaScript 库其核心思想是通过组件来构建应用。下面我们将深入探讨 React 组件的基础知识包括组件的创建、状态管理、事件处理以及表单处理。
1. 组件的两种创建方式: 函数组件和类组件
在 React 中组件可以通过两种方式来创建函数组件和类组件。
1.1 函数组件 函数组件是最简单的组件类型它是一个接收 props 参数并返回 React 元素的 JavaScript 函数。
function Hello() {return divHello, World!/div;
}1.2 类组件 类组件则是使用 ES6 类来创建的它可以包含局部状态state和生命周期方法等更多功能。
class Hello extends React.Component {render() {return divHello, World!/div;}
}2. 无状态函数组件与有状态类组件
2.1 无状态组件 无状态组件主要负责展示数据它通常没有自己的状态只接收外部传入的 props。
function UserInfo(props) {return divUser: {props.name}/div;
}2.2 有状态组件 有状态组件可以有自己的局部状态它们负责数据的处理和交互。
class Counter extends React.Component {state { count: 0 };handleIncrement () {this.setState({ count: this.state.count 1 });};render() {return (divCount: {this.state.count}button onClick{this.handleIncrement}Increment/button/div);}
}3. 事件处理和 this 指向问题
在 React 组件中事件处理程序中 this 的指向是一个常见的问题。以下是解决 this 指向问题的常见方法
class Hello extends React.Component {handleClick () {console.log(Button clicked:, this);};render() {return button onClick{this.handleClick}Click me/button;}
}在上述代码中我们使用箭头函数来确保 handleClick 方法中的 this 指向组件实例。
4. 受控组件与非受控组件
React 中的表单处理可以通过受控组件和非受控组件两种方式来实现。受控组件通过 state 来控制表单元素的值而非受控组件则通过 ref 来直接操作 DOM 元素。
受控组件示例:
class FormExample extends React.Component {state { textValue: };handleTextChange (event) {this.setState({ textValue: event.target.value });}render() {return (input typetext value{this.state.textValue} onChange{this.handleTextChange} /);}
}非受控组件示例:
class UncontrolledForm extends React.Component {txtRef React.createRef();handleSubmit (event) {event.preventDefault();console.log(Text field value:, this.txtRef.current.value);}render() {return (form onSubmit{this.handleSubmit}input typetext ref{this.txtRef} /button typesubmitSubmit/button/form);}
}5. React 的设计思想
React 强调组件化的设计和开发方式充分利用 JavaScript 语言的能力来创建和组织组件。这种设计思想使得开发者能够构建复杂、可维护和高效的前端应用。
通过以上的介绍和示例你应该对 React 组件的基础有了更深刻的理解。从组件的创建方式、状态管理、事件处理到表单处理这些基础知识是掌握 React 开发的重要基础。
React脚手架的使用
React 脚手架是一个用来帮助开发者快速创建和配置一个新的 React 项目的工具。它通过预配置好的工具和默认的项目结构使得开发者可以立即开始编写 React 代码而不需要花费时间去配置 Babel、Webpack 等开发工具。其中最知名的 React 脚手架工具是 Create React App。
1. 使用create-react-app创建react应用
2. react脚手架 xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 包含了所有需要的配置语法检查、jsx编译、devServer… 下载好了所有相关的依赖 可以直接运行一个简单效果 react提供了一个用于创建react项目的脚手架库: create-react-app 项目的整体技术架构为: react webpack es6 eslint 使用脚手架开发的项目的特点: 模块化, 组件化, 工程化
3.创建第一个React脚手架应用
创建一个新的 React 应用非常简单。React 团队提供了一个叫做 Create React App 的官方脚手架工具它可以帮助你快速地搭建好基础的项目结构包括一些基础的配置比如 Babel 和 Webpack 等。以下是使用 Create React App 创建一个新的 React 应用的步骤
1. 确保你的系统已经安装了 Node.js 和 npm
React 应用的开发和构建依赖于 Node.js 和 npm所以在开始之前请确保你的系统上已经安装了它们。你可以在命令行中运行以下命令来检查它们是否已经安装
node -v
npm -v如果你的系统上还没有安装 Node.js 和 npm你可以去 Node.js 官网 下载并安装最新版本的 Node.jsnpm 会随同 Node.js 一起安装。
2. 创建新的 React 应用
打开你的终端或命令提示符然后运行以下命令来创建一个新的 React 应用
npx create-react-app my-react-app在这里my-react-app 是你的应用的名称你可以用任何你喜欢的名称来替换它。
npx 是一个 npm 包运行器它会自动下载并运行 create-react-app 脚本以创建一个新的 React 应用。
3. 切换到项目目录并启动应用
创建完应用后切换到项目目录并运行以下命令来启动应用
cd my-react-app
npm start现在你的新 React 应用应该已经在浏览器中打开了并且你应该能够看到一个简单的欢迎页面。你可以开始编辑 src 目录下的文件来开发你的应用了。
这样你就成功地使用 Create React App 创建了一个新的 React 应用并且为开始开发做好了准备。
4. 使用React库
进入React库内之后你会看到src文件夹你可以在此之内随便创建一个js文件并输入
// 1.导入React
import React from react
import ReactDOM from react-dom// 2.创建React元素
const title React.createElement(h1, null, Hello World);// 3. 渲染ReactDOM
ReactDOM.render(title, document.getElementById(root));这样你就可以使用你的ReactApp内的React库了。
4. react脚手架项目结构
public ---- 静态资源文件夹
favicon.icon ------ 网站页签图标index.html -------- 主页面logo192.png ------- logo图logo512.png ------- logo图manifest.json ----- 应用加壳的配置文件robots.txt -------- 爬虫协议文件
src ---- 源码文件夹
App.css -------- App组件的样式App.js --------- App****组件App.test.js ---- 用于给App做测试index.css ------ 样式index.js ------- 入口文件logo.svg ------- logo图reportWebVitals.js— 页面性能分析文件(需要web-vitals库的支持)setupTests.js---- 组件单元测试的文件(需要jest-dom库的支持)
5.React 文件内容详解
!DOCTYPE html !-- 声明文档类型为 HTML5 --
html langen !-- 设置页面的语言为英文 --head !-- 文档的头部区域包含了文档的元数据metadata --meta charsetutf-8 / !-- 设置文档字符编码为 UTF-8使得文档可以正确显示多种字符 --!-- 设置网页图标%PUBLIC_URL% 是一个占位符它将被替换为公共URL的路径 --link relicon href%PUBLIC_URL%/favicon.ico / !-- 设置视口使网页具有移动端的响应式特性: 仅限安卓 --meta nameviewport contentwidthdevice-width, initial-scale1 / meta nametheme-color content#000000 / !-- 设置浏览器工具栏的颜色 --metanamedescriptioncontentWeb site created using create-react-app !-- 设置网页的描述有助于搜索引擎优化 --/!-- 设置苹果设备上的应用图标 --link relapple-touch-icon href%PUBLIC_URL%/logo192.png / !-- 链接到Web应用程序的清单文件该文件描述了应用程序的名称、图标等信息 --link relmanifest href%PUBLIC_URL%/manifest.json / titleReact App/title !-- 设置网页的标题 --/headbody !-- 文档的主体部分 --noscriptYou need to enable JavaScript to run this app./noscript !-- 如果浏览器不支持或禁用了JavaScript会显示此提示 --div idroot/div !-- React应用程序的挂载点React会将其组件渲染到这个div元素中 --/body/html上述配置主要是一个基础的HTML模板它为React应用程序提供了一个起始点。在React应用程序中所有的组件将会被渲染到div idroot/div这个元素中。其他的元数据和链接有助于提供一些基本的、常见的网页特性和设置例如字符编码、视口设置、网页图标等。同时%PUBLIC_URL%是一个特殊的占位符它在构建过程中会被替换成实际的公共URL路径这样无论应用程序是部署在根路径还是子路径都能正确地引用到资源文件。
逻辑流程
项目启动: 当运行 npm start 或 yarn start 时项目会启动执行 src/index.js 文件。渲染组件: index.js 文件负责渲染 App 组件到 index.html 文件中的 #root 元素上。加载样式和资源: 在 App.js 和其他组件中可以导入 CSS、图片和其他资源用于构建应用的界面。组件逻辑: 在 App.js 和其他组件文件中可以编写 React 组件和业务逻辑构建应用的功能。
通过这个文件结构和逻辑流程可以看出 Create React App 脚手架提供了一个很好的起点帮助开发者快速开始构建 React 应用。同时它的配置也可以通过 eject 或其他方法进行定制以适应更复杂的项目需求。
6. SPA文件架构
什么是SPA
SPA (Single Page Application, 单页应用程序) 是一种现代的网页应用架构它通过在客户端动态重写页面内容而不是从服务器加载新的页面来提供更接近于原生应用的用户体验。下面是SPA架构的主要特点和组成部分
主要特点
单页面SPA 只有一个 HTML 页面所有的视图更新和交互都在这个页面中完成。前端路由通过前端路由管理不同的视图和状态使得 URL 变化能够对应到不同的内容和视图而不需要重新加载页面。动态内容加载通过 AJAX 或 Fetch API 动态加载数据然后用 JavaScript 动态渲染页面内容。快速响应由于减少了页面加载的时间和服务器请求的次数SPA 可以提供快速的响应和流畅的用户体验。
组成部分 HTML/CSS/JavaScript HTML: 作为页面的结构基础。CSS: 提供样式和布局。JavaScript: 实现动态内容加载和交互逻辑。 前端框架/库 如 React, Angular, Vue.js 等它们提供了组件化、路由管理、状态管理等功能帮助开发者构建复杂的 SPA。 前端路由 前端路由是 SPA 的核心它通过更改 URL 的 hash 或使用 HTML5 History API 来实现页面的无刷新跳转。 状态管理 如 Redux 或 Vuex用于管理应用的状态使得状态的管理更加清晰和有序。 模块打包工具 如 Webpack 或 Parcel它们可以帮助开发者将多个模块和资源文件打包成一个或多个文件以便在浏览器中加载。 网络请求 使用 AJAX, Fetch API 或者 axios 等库来发送网络请求获取或提交数据。 后端 API SPA 通常会与一个或多个后端 API 交互获取数据或执行操作。
工作流程
用户访问 SPA 的入口 URL加载单一的 HTML 页面。页面加载后JavaScript 代码被执行初始化应用。用户与应用交互前端路由根据 URL 的变化显示不同的视图同时通过网络请求与后端 API 交互获取或提交数据。JavaScript 代码根据获取的数据动态更新页面内容提供流畅的用户体验。
SPA 架构的优点是用户体验好、响应快速而缺点则可能包括首屏加载时间较长、SEO 优化困难等。不过随着服务端渲染 (SSR) 和预渲染 (Prerendering) 等技术的发展这些问题得到了一定程度的解决。
React下的SPA
React 是构建用户界面的库非常适合用于构建 SPA。下面是在 React 中实现 SPA 的基本概念和步骤 组件化: 在 React 中一切都是组件。你可以将每个页面视为一个组件每个组件都有自己的状态state和属性props。 路由: 使用 React Router 来管理不同的视图。React Router 是一个基于组件的路由库可以帮助你根据 URL 的变化渲染不同的组件。 状态管理: 在大型 SPA 中可能需要使用 Redux 或 Context API 来管理应用级的状态。 按需加载: 使用动态导入dynamic imports和 React.lazy 来实现组件的按需加载提高首屏加载速度。
具体步骤如下 创建 React 项目: npx create-react-app my-spa
cd my-spa安装 React Router: npm install react-router-dom配置路由: 在 src 目录下创建一个 routes.js 文件配置不同的路由路径和组件。 import React from react;
import { BrowserRouter as Router, Route, Switch } from react-router-dom;
import Home from ./components/Home;
import About from ./components/About;const Routes () (RouterSwitchRoute exact path/ component{Home} /Route path/about component{About} //Switch/Router
);export default Routes;创建页面组件: 在 src/components 目录下创建 Home.js 和 About.js 文件每个文件代表一个页面。 启动应用: 在 src/index.js 文件中导入 Routes 组件并将其渲染到页面上。 import React from react;
import ReactDOM from react-dom;
import Routes from ./routes;
import ./index.css;ReactDOM.render(Routes /, document.getElementById(root));通过以上步骤你就可以创建一个基本的 SPA并通过 React Router 管理不同的视图。随着项目的增长你可能还需要考虑状态管理、API 交互、错误处理等其他方面的问题。
