React.js 全面解析:从基础到实战案例

引言:

React.js,由Facebook推出并维护的开源JavaScript库,以其组件化思想、虚拟DOM技术和声明式编程风格,成为构建用户界面的首选工具之一。本文将系统性地介绍React的基础概念、核心特性,并通过实际案例展示基础属性的应用,帮助开发者快速上手React开发。

一、React基础

1. 组件(Components)

React应用的核心是组件,每个组件代表页面上的一个独立部分,负责渲染UI和处理自己的状态。

2. JSX

React采用JSX语法,一种JavaScript和HTML的混合体,使得编写HTML结构变得直观且高效。

3. 状态(State)与属性(Props)

  • State:组件内部可变的数据,用于存储组件的状态信息。
  • Props:父组件向子组件传递数据的方式,是只读的。

4. 生命周期方法

React组件从创建到销毁会经历多个阶段,每个阶段对应不同的生命周期方法,如componentDidMountrendercomponentDidUpdate等。

5. 事件处理

React使用合成事件系统,事件处理函数作为props传递给组件,并需以特定方式命名(如onClick)。

二、基础属性与用法

1. State示例

 

Jsx

1class Counter extends React.Component {
2  constructor(props) {
3    super(props);
4    this.state = { count: 0 };
5  }
6
7  incrementCount = () => {
8    this.setState(prevState => ({ count: prevState.count + 1 }));
9  };
10
11  render() {
12    return (
13      <div>
14        <p>Count: {this.state.count}</p>
15        <button onClick={this.incrementCount}>Increment</button>
16      </div>
17    );
18  }
19}

2. Props示例

 

Jsx

1function Welcome(props) {
2  return <h1>Hello, {props.name}</h1>;
3}
4
5ReactDOM.render(<Welcome name="Sara" />, document.getElementById('root'));

3. 条件渲染

 

Jsx

1function Greeting(props) {
2  const isLoggedIn = props.isLoggedIn;
3  return (
4    <div>
5      {isLoggedIn ? <p>Welcome back!</p> : <p>Please log in.</p>}
6    </div>
7  );
8}

4. 列表渲染

 

Jsx

1const numbers = [1, 2, 3, 4, 5];
2const listItems = numbers.map((number) =>
3  <li key={number.toString()}>{number}</li>
4);
5
6ReactDOM.render(
7  <ul>{listItems}</ul>,
8  document.getElementById('numbersList')
9);

5. 事件处理

 

Jsx

1class Toggle extends React.Component {
2  constructor(props) {
3    super(props);
4    this.state = { isToggleOn: true };
5
6    // 绑定this
7    this.handleClick = this.handleClick.bind(this);
8  }
9
10  handleClick() {
11    this.setState(state => ({
12      isToggleOn: !state.isToggleOn
13    }));
14  }
15
16  render() {
17    return (
18      <button onClick={this.handleClick}>
19        {this.state.isToggleOn ? 'ON' : 'OFF'}
20      </button>
21    );
22  }
23}

三、React Hooks

自React 16.8引入的Hooks,允许在函数组件中使用state和其他React特性,无需编写类。

1. useState

 

Jsx

1import React, { useState } from 'react';
2
3function Example() {
4  const [count, setCount] = useState(0);
5
6  return (
7    <div>
8      <p>You clicked {count} times</p>
9      <button onClick={() => setCount(count + 1)}>
10        Click me
11      </button>
12    </div>
13  );
14}

2. useEffect

用于执行副作用操作(如数据获取、订阅或者手动修改DOM),并支持清理操作。

 

Jsx

1import React, { useState, useEffect } from 'react';
2
3function Example() {
4  const [count, setCount] = useState(0);
5
6  useEffect(() => {
7    document.title = `You clicked ${count} times`;
8  });
9
10  return (
11    <div>
12      <p>You clicked {count} times</p>
13      <button onClick={() => setCount(count + 1)}>
14        Click me
15      </button>
16    </div>
17  );
18}

四、总结

React通过组件化和JSX简化了UI的开发复杂度,其强大的状态管理和生命周期机制为开发者提供了高度灵活的控制能力。通过学习和掌握上述基础知识,开发者能够构建功能丰富、高效且可维护的Web应用。随着React生态的不断壮大,如Redux进行状态管理,React Router进行路由控制,以及Next.js等服务端渲染技术的集成,React已成为现代前端开发不可或缺的一部分。

感谢你的点赞!关注!收藏!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/768110.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

“穿越时空的机械奇观:记里鼓车的历史与科技探秘“

在人类文明的发展历程中&#xff0c;科技的创新与进步不仅仅推动了社会的进步&#xff0c;也为我们留下了丰富的文化遗产。记里鼓车&#xff0c;作为一种古老的里程计量工具&#xff0c;其历史地位和技术成就在科技史上具有重要的意义。本文将详细介绍记里鼓车的起源、结构原理…

MySQL数据库设计作业 ——《网上书店系统》数据库设计实验报告

数据库设计作业——《网上书店系统》数据库设计 一、功能需求 普通用户&#xff1a;可以进行最基础的登陆操作&#xff0c;可浏览图书、按类别查询图书、查看 图书的详细信息&#xff0c;还可以注册成为会员。会员&#xff1a;需要填写详细信息&#xff08;真实姓名、性别、手…

SSM学习4:spring整合mybatis、spring整合Junit

spring整合mybatis 之前的内容是有service层&#xff08;业务实现层&#xff09;、dao层&#xff08;操作数据库&#xff09;&#xff0c;现在新添加一个domain&#xff08;与业务相关的实体类&#xff09; 依赖配置 pom.xml <?xml version"1.0" encoding&quo…

springboot+vue+mybatis企业保修系统+PPT+论文+讲解+售后

企业管理系统提供给用户一个企业信息管理的系统&#xff0c;最新的企业信息让用户及时了解企业管理动向,,还能通过交流区互动更方便。本系统采用了B/S体系的结构&#xff0c;使用了java技术以及MYSQL作为后台数据库进行开发。系统主要分为系统管理员、员工和主管三个部分&#…

【C语言】手撕结构体内存对齐

©作者:末央&#xff06; ©系列:C语言初阶(适合小白入门) ©说明:以凡人之笔墨&#xff0c;书写未来之大梦 目录 结构体对齐规则结构体大小计算 - 三步曲 结构体对齐规则 怎么计算结构体的内存大小。这就涉及到结构体内存对齐的问题。 结构体的第⼀个成员对⻬到…

项目实战--MySQL实现分词模糊匹配

一、需求描述 推广人员添加公司到系统时&#xff0c;直接填写公司简称&#xff0c;而公司全称可能之前已经被添加过&#xff0c;为防止添加重复的公司&#xff0c;所以管理员在针对公司信息审批之前&#xff0c;需要查看以往添加的公司信息里是否有相同公司。 二、方案 技术…

项目2:API Hunter 细节回顾 -1

一. 接口调用 对于开发者来说&#xff0c;接口的调用应当是方便快捷的&#xff0c;而且出于安全考虑&#xff0c;通常会选择在后端调用第三方 API&#xff0c;避免在前端暴露诸如密码的敏感信息。 若采用 HTTP 调用方式&#xff1a; HttpClientRestTemplate第三方库&#xf…

【JavaWeb】登录校验-会话技术(一)Cookie与Session

登录校验 实现登陆后才能访问后端系统页面&#xff0c;不登陆则跳转登陆页面进行登陆。 首先我们在宏观上先有一个认知&#xff1a; HTTP协议是无状态协议。即每一次请求都是独立的&#xff0c;下一次请求并不会携带上一次请求的数据。 因此当我们通过浏览器访问登录后&#…

py黑帽子学习笔记_burp

配置burp kali虚机默认装好了社区版burp和java&#xff0c;其他os需要手动装 burp是用java&#xff0c;还得下载一个jython包&#xff0c;供burp用 配apt国内源&#xff0c;然后apt install jython --download-only&#xff0c;会只下载包而不安装&#xff0c;下载的目录搜一…

【JVM-05】Java内存区域(运行时数据区)、对象创建过程、内存布局

【JVM-05】Java内存区域即运行时数据区、对象创建过程、内存布局 1. 介绍下Java内存区域(运行时数据区)1.1 程序计数器(线程私有)1.2 虚拟机栈(线程私有)1.3 本地方法栈(线程私有)1.4 Java堆(线程共享)1.5 方法区(线程共享)1.5.1 方法区和永久代的关系1.5.2 常用参数1.5.3 为什…

用随机森林算法进行的一次故障预测

本案例将带大家使用一份开源的S.M.A.R.T.数据集和机器学习中的随机森林算法&#xff0c;来训练一个硬盘故障预测模型&#xff0c;并测试效果。 实验目标 掌握使用机器学习方法训练模型的基本流程&#xff1b;掌握使用pandas做数据分析的基本方法&#xff1b;掌握使用scikit-l…

AWS的收费方式与计费项目

AWS&#xff08;亚马逊云服务&#xff09;是全球领先的云计算服务提供商&#xff0c;为各种规模和类型的企业提供了广泛的云计算服务。AWS的收费方式和计费项目是许多用户关心的问题&#xff0c;因为了解这些信息有助于企业更好地规划和控制成本。本文将介绍AWS的收费方式和常见…

MobileVitv1替换yolov8主干网络

一、原理介绍 MobileViT模型是为移动设备设计的轻量级、通用目的视觉变换器。它融合了卷积神经网络&#xff08;CNN&#xff09;和视觉变换器&#xff08;ViT&#xff09;的优势&#xff0c;旨在在保持高效性能的同时减少模型参数和降低延迟。以下是关于MobileViT模型的主要原理…

MATLAB中findall用法

目录 语法 说明 示例 查找具有可见或隐藏句柄的图窗 查找句柄处于隐藏状态的对象 查找 Text 对象 提示 findall的功能是查找所有图形对象。 语法 h findall(objhandles) h findall(objhandles,prop1,value1,...,propN,valueN) 说明 h findall(objhandles) 返回 ob…

电脑提示你的msvcr100.dll丢失要如何解决?一键修复msvcr100.dll的解决方法

电脑提示你的msvcr100.dll丢失要如何解决&#xff1f;首先我们就要了解msvcr100.dll这个文件&#xff0c;了解前因后果&#xff0c;这样我们才能知道使用什么方法去修复它。今天主要就是来给大家详细的讲解一下msvcr100.dll文件&#xff0c;并且教各种的修复方法&#xff0c;每…

excel表格如何换行,这几个操作方法要收藏好

Excel表格作为一款强大的数据处理工具&#xff0c;在日常工作和生活中被广泛应用。当需要在单元格内显示较长的文本内容或使数据更加清晰易读时&#xff0c;我们需要掌握一些换行技巧。下面将介绍几种常用的Excel换行方法&#xff1a; 一、使用快捷键换行 1、首先&#xff0c;…

介绍一些好玩且实用的开源的AI工具

介绍一些好玩且实用的开源的AI工具 随着人工智能技术的迅猛发展&#xff0c;开源社区涌现出了许多关于AI的项目&#xff0c;这些项目不仅展示了技术的创新力&#xff0c;也为开发者提供了丰富的工具和资源。本文将介绍几个既有趣又实用的开源人工智能工具&#xff0c;它们不仅…

前端Web开发HTML5+CSS3+移动web视频教程 Day4 CSS 第2天

P44 - P 四个知识点&#xff1a; 复合选择器 CSS特性 背景属性 显示模式 复合选择器 复合选择器仍然是选择器&#xff0c;只要是选择器&#xff0c;作用就是找标签。复合选择器就是把基础选择器进行组合使用。组合了之后就可以在大量的标签里面更快更精准地找标签了。找…

轻度图像处理工具,匹敌photoshop

一、简介 1、一款功能强大的在线图片编辑工具,用户可以将其安装为渐进式网页应用(PWA)。它提供了与 Photoshop 相似的核心功能,能够满足大多数图像编辑需求,非常适合那些不愿或无法安装 Photoshop 的用户。即使使用免费版本,用户也能享受所有功能,是轻度图像处理的理想选…

20240703在飞凌OK3588-C开发板上刷Rockchip原厂的Buildroot20220811

20240703在飞凌OK3588-C开发板上刷Rockchip原厂的Buildroot20220811 2024/7/3 18:25 详细的刷机LOG&#xff1a; [BEGIN] 2024/7/3 18:18:49 rootRK3588:/# DDR Version V1.07 20220412 LPDDR4X, 2112MHz channel[0] BW16 Col10 Bk8 CS0 Row16 CS1 Row16 CS2 Die BW16 Size204…