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.mzph.cn/diannao/36958.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

DataWhale-吃瓜教程学习笔记(四)

学习视频&#xff1a;第3章-二分类线性判别分析_哔哩哔哩_bilibili 西瓜书对应章节&#xff1a; 3.4 文章目录 - 算法原理- 损失函数推导-- 异类样本中心尽可能远-- 同类样本方差尽可能小-- 综合 知识点补充 - 二范数二范数&#xff08;2-norm&#xff09;详解定义几何意义性质…

vue3中省市区联动在同一个el-form-item中咋么设置rules验证都不为空的效果

在开发中出现如下情况&#xff0c;在同一个el-form-item设置了省市区三级联动的效果 <el-form-item label"地区" prop"extraProperties.Province"><el-row :gutter"20"><el-col :span"12"><el-select v-model&qu…

OpenHarmony开发实战:HDF驱动开发流程

概述 HDF&#xff08;Hardware Driver Foundation&#xff09;驱动框架&#xff0c;为驱动开发者提供驱动框架能力&#xff0c;包括驱动加载、驱动服务管理、驱动消息机制和配置管理。并以组件化驱动模型作为核心设计思路&#xff0c;让驱动开发和部署更加规范&#xff0c;旨在…

Unity3D Excel表格数据处理模块详解

一、引言 在Unity3D开发中&#xff0c;我们经常需要处理大量的数据&#xff0c;这些数据可能是游戏配置、角色属性、道具信息等。Excel表格作为一种常见的数据存储方式&#xff0c;具有结构清晰、易于编辑的特点&#xff0c;因此被广泛应用于游戏开发中。本文将详细介绍如何在…

四川赤橙宏海商务信息咨询有限公司抖音开店靠谱吗?

在数字化浪潮席卷全球的今天&#xff0c;电商行业正以前所未有的速度发展。而在这个大潮中&#xff0c;四川赤橙宏海商务信息咨询有限公司凭借其专业的团队和前瞻性的战略眼光&#xff0c;专注于抖音电商服务&#xff0c;为广大商家提供了一站式解决方案&#xff0c;成为了行业…

面经-常用框架

1.Spring 1.1什么是Spring框架&#xff1f; Spring 是⼀种轻量级开发框架&#xff0c;旨在提⾼开发⼈员的开发效率以及系统的可维护性。 Spring 的 6 个特征:核⼼技术&#xff0c;测试&#xff0c;数据访问&#xff0c;Web⽀持&#xff0c;集成&#xff0c;语⾔ 1.2列举⼀些重…

Ubuntu20.04安装LibTorch并完成高斯溅射环境搭建

0. 简介 最近受到优刻得的使用邀请&#xff0c;正好解决了我在大模型和自动驾驶行业对GPU的使用需求。UCloud云计算旗下的Compshare的GPU算力云平台。他们提供高性价比的4090 GPU&#xff0c;按时收费每卡2.6元&#xff0c;月卡只需要1.7元每小时&#xff0c;并附带200G的免费…

接口自动化测试-项目实战

什么是接口自动化测试&#xff1a;使用工具或代码代替人对接口进行测试 测试项目结构&#xff08;python包&#xff09; 1、接口api包 2、script:业务脚本 3、data:数据 4、config.py :配置文件 5、reporter:报告 错误问题&#xff1a; 1、未打印任何东西。添加pip ins…

走马灯封装

走马灯功能需求&#xff1a; 支持定时切换&#xff1b;支持左右按钮切换&#xff08;根据鼠标是否在切换组件内展示和隐藏左右切换按钮&#xff09;&#xff1b;支持底部标识切换&#xff1b; 走马灯 完整代码如下&#xff1a; /*** class 走马灯*/import react, { Compone…

C语言 指针——缓冲区溢出与缓冲区溢出攻击

目录 缓冲区溢出攻击 缓冲区溢出攻击实例 字符串的安全输入方法​编辑 防止缓冲区溢出的两个要点 缓冲区溢出攻击 网络黑客常针对系统和程序自身存在的漏洞&#xff0c;编写相应的攻击程序  对缓冲区溢出漏洞的攻击 —— 最常见  几乎占到了网络攻击次数的一半以上…

Android (已解决)Gradle 编译失败 Unsupported class file major version 61

文章目录 一、报错原因二、解决方法 一、报错原因 新版本的 Android Studio 默认使用的是 Java 17 LTS&#xff0c;而这个历史项目的 Gradle 版本很低&#xff0c;不支持高版本的 Java。 具体原因&#xff1a;Java 17 (major version 61) 编译的 class 文件&#xff0c;如果在…

逆向学习汇编篇:指令的操作

本节课在线学习视频&#xff08;网盘地址&#xff0c;保存后即可免费观看&#xff09;&#xff1a; ​​https://pan.quark.cn/s/660c759dea95​​ 在逆向工程中&#xff0c;深入理解汇编语言的指令操作是至关重要的。汇编指令是计算机硬件与软件之间的桥梁&#xff0c;它们直…

DevEco Studio有时会多出来.js和.map文件,导致项目不能运行

1、问题 在使用DevEco的时候有时候会出现啥都没干&#xff0c;但是在项目的目录下会自动生成和文件同名的.js和.js.map文件&#xff0c;至于为什么会生成目前我也不知道&#xff0c;如果想要更深了解可以到论坛讨论&#xff1a;华为开发者论坛。生成.js和.js.map文件优…

Terraform基础概念一

Terraform基础概念一 1.Infrastructure-as-Code(IaC)概念1.1 IaC优势1.2 IaC工具1.3 IaC的两种方式 2.Terraform基础概念2.1 Terraform工作原理2.2 Terraform 工作流 3.总结 1.Infrastructure-as-Code(IaC)概念 基础设施即代码&#xff08;Infrastructure-as-Code&#xff0c;…

SVN 的忽略(Ignore)和递归(Recursively)以及忽略部分

SVN中忽略大家经常用到&#xff0c;但总是似懂非懂&#xff0c;下面就详细展开说明一下忽略如何设置。 两个忽略 通常设置忽略都是文件夹和里面的文件都忽略&#xff0c;通常只需要鼠标右键点击忽略就可以了&#xff0c;如图&#xff1a; 第一个忽略用的最多&#xff0c;就是…

关于GPIO的上拉、下拉,无上下拉

1.GPIO_PULLUP&#xff08;上拉&#xff09; 作用和原理 作用&#xff1a;上拉模式会在GPIO引脚和电源电压&#xff08;Vcc&#xff09;之间连接一个内部上拉电阻。原理&#xff1a;当引脚配置为输入模式时&#xff0c;如果引脚没有连接到其他外部电路&#xff0c;内部上拉电…

排序算法(C语言版)

前言 排序作为生产环境中常见的需求之一&#xff0c;对整个产品有举足轻重的影响&#xff0c;可以说使用一个合适的排序算法是业务逻辑中比较重要的一部分。今天我们就来介绍常见的排序算法以及实现 排序 所谓排序无非就是按照特定的规则对一组数据就行顺序化。 常见的排序有…

Spring项目报错解读与全部报错详解

你好,我是Qiuner. 为帮助别人少走弯路和记录自己编程学习过程而写博客 这是我的 github https://github.com/Qiuner ⭐️ ​ gitee https://gitee.com/Qiuner &#x1f339; 如果本篇文章帮到了你 不妨点个赞吧~ 我会很高兴的 &#x1f604; (^ ~ ^) 想看更多 那就点个关注吧 我…

图像大模型中的注意力和因果掩码

AIM — 图像领域中 LLM 的对应物。尽管 iGPT 已经存在 2 年多了&#xff0c;但自回归尚未得到充分探索。在本文中&#xff0c;作者表明&#xff0c;当使用 AIM 对网络进行预训练时&#xff0c;一组图像数据集上的下游任务的平均准确率会随着数据和参数的增加而线性增加。 要运…

uniApp获取实时定位

通过你获取的key放到项目manifest.json里面&#xff0c;对应填写你所需要的key值&#xff0c;还有高德用户名 用户名&#xff1a; key值的位置&#xff1a; 代码&#xff1a; html: <view class"intList pdNone"><view class"label">详细地…