【前端】深入浅出的React.js详解

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发并维护。随着 React 的不断演进，官方文档也在不断更新和完善。本文将详细解读最新的 React 官方文档，涵盖核心概念、新特性、最佳实践等内容，帮助开发者更好地理解和使用 React。
在这里插入图片描述

1. React 核心概念
1.1 组件

组件是 React 应用的基本构建块。组件可以是类组件或函数组件，每个组件负责渲染一部分用户界面。

1.1.1 函数组件

函数组件是最简单的组件形式，接受输入（props）并返回 JSX。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}
1.1.2 类组件

类组件是通过继承 React.Component 类来定义的，可以包含状态和生命周期方法。

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}
1.2 JSX

JSX 是一种在 JavaScript 中编写类似 HTML 代码的语法扩展。React 使用 JSX 来描述 UI 的结构。

const element = <h1>Hello, world!</h1>;
1.3 Props

Props 是组件之间传递数据的方式。父组件通过 props 将数据传递给子组件。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
1.4 State

State 是组件内部的数据存储，用于跟踪组件的状态变化。状态的变化会触发组件的重新渲染。

1.4.1 类组件中的状态

在类组件中，状态通过 state 属性来管理。

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState(prevState => ({ count: prevState.count + 1 }));
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}
1.4.2 函数组件中的状态

在函数组件中，使用 useState 钩子来管理状态。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}
2. 新特性
2.1 Concurrent Mode

Concurrent Mode 是 React 的一个实验性功能，旨在提高应用的响应性和性能。Concurrent Mode 允许 React 在后台执行工作，并在必要时中断和恢复这些工作。

2.1.1 Suspense

Suspense 是 Concurrent Mode 的一个重要特性，用于处理异步数据加载。通过 Suspense 组件，可以在数据加载完成之前显示一个加载指示器。

import React, { Suspense } from 'react';
import { fetchData } from './api';

function DataFetcher() {
  const data = useDataLoader();

  return <p>Data: {data}</p>;
}

function App() {
  return (
    <Suspense fallback={<p>Loading...</p>}>
      <DataFetcher />
    </Suspense>
  );
}

function useDataLoader() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetchData().then(data => setData(data));
  }, []);

  if (!data) {
    throw new Promise(resolve => setTimeout(resolve, 1000));
  }

  return data;
}
2.2 Hooks

Hooks 是 React 16.8 引入的新特性，允许在函数组件中使用状态和其他 React 特性。

2.2.1 useState

useState 钩子用于在函数组件中添加状态。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}
2.2.2 useEffect

useEffect 钩子用于在函数组件中执行副作用操作，如发起网络请求、设置定时器等。

import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []);

  return (
    <div>
      {data ? (
        <p>Data: {data}</p>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}
2.2.3 useContext

useContext 钩子用于在函数组件中使用 Context。

import React, { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button style={{ background: theme }}>Button</button>;
}

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <ThemedButton />
    </ThemeContext.Provider>
  );
}
3. 生命周期方法

生命周期方法是类组件中的一系列方法，用于在组件的不同阶段执行特定的操作。函数组件中使用钩子来实现类似的功能。

3.1 类组件中的生命周期方法
3.1.1 componentDidMount

在组件挂载后立即调用，通常用于发起网络请求或设置定时器。

class DataFetcher extends React.Component {
  state = {
    data: null
  };

  componentDidMount() {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => this.setState({ data }));
  }

  render() {
    return (
      <div>
        {this.state.data ? (
          <p>Data: {this.state.data}</p>
        ) : (
          <p>Loading...</p>
        )}
      </div>
    );
  }
}
3.1.2 componentDidUpdate

在组件更新后立即调用，可以用于比较新旧状态或属性，执行相应的操作。

class DataFetcher extends React.Component {
  state = {
    data: null,
    id: 1
  };

  componentDidUpdate(prevProps, prevState) {
    if (prevState.id !== this.state.id) {
      fetch(`https://api.example.com/data/${this.state.id}`)
        .then(response => response.json())
        .then(data => this.setState({ data }));
    }
  }

  changeId = () => {
    this.setState(prevState => ({ id: prevState.id + 1 }));
  };

  render() {
    return (
      <div>
        {this.state.data ? (
          <p>Data: {this.state.data}</p>
        ) : (
          <p>Loading...</p>
        )}
        <button onClick={this.changeId}>Change ID</button>
      </div>
    );
  }
}
3.1.3 componentWillUnmount

在组件卸载前调用，通常用于清理定时器或取消网络请求。

class Timer extends React.Component {
  state = {
    seconds: 0
  };

  interval = null;

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState(prevState => ({ seconds: prevState.seconds + 1 }));
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return <p>Seconds: {this.state.seconds}</p>;
  }
}
3.2 函数组件中的生命周期方法
3.2.1 useEffect

useEffect 钩子用于在函数组件中执行副作用操作，如发起网络请求、设置定时器等。

3.2.1.1 模拟 componentDidMount

在组件挂载后执行操作：

import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => setData(data));
  }, []); // 空数组表示只在组件挂载时执行一次

  return (
    <div>
      {data ? (
        <p>Data: {data}</p>
      ) : (
        <p>Loading...</p>
      )}
    </div>
  );
}
3.2.1.2 模拟 componentDidUpdate

在组件更新后执行操作：

import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);
  const [id, setId] = useState(1);

  useEffect(() => {
    fetch(`https://api.example.com/data/${id}`)
      .then(response => response.json())
      .then(data => setData(data));
  }, [id]); // 依赖数组包含 id，表示当 id 变化时重新执行

  const changeId = () => {
    setId(id + 1);
  };

  return (
    <div>
      {data ? (
        <p>Data: {data}</p>
      ) : (
        <p>Loading...</p>
      )}
      <button onClick={changeId}>Change ID</button>
    </div>
  );
}
3.2.1.3 模拟 componentWillUnmount

在组件卸载前执行清理操作：

import React, { useState, useEffect } from 'react';

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds(prevSeconds => prevSeconds + 1);
    }, 1000);

    return () => clearInterval(interval); // 清理定时器
  }, []); // 空数组表示只在组件挂载时执行一次

  return <p>Seconds: {seconds}</p>;
}
4. 最佳实践
4.1 代码分割和懒加载

通过代码分割和懒加载，可以优化应用的初始加载时间和性能。

import React, { Suspense, lazy } from 'react';

const OtherComponent = lazy(() => import('./OtherComponent'));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}
4.2 避免不必要的渲染

通过 React.memo 和 PureComponent，可以避免不必要的组件重新渲染。

4.2.1 React.memo

React.memo 是一个高阶组件，用于优化函数组件的性能。

import React from 'react';

const MyComponent = React.memo(function MyComponent(props) {
  /* 只在 props 发生变化时重新渲染 */
  return <div>{props.value}</div>;
});
4.2.2 PureComponent

PureComponent 是一个基类，用于优化类组件的性能。

import React from 'react';

class MyComponent extends React.PureComponent {
  render() {
    /* 只在 props 或 state 发生变化时重新渲染 */
    return <div>{this.props.value}</div>;
  }
}
4.3 使用 useMemo 和 useCallback

useMemo 和 useCallback 钩子可以用于优化性能，避免不必要的计算和函数创建。

4.3.1 useMemo

useMemo 用于缓存计算结果，避免不必要的计算。

import React, { useMemo } from 'react';

function MyComponent({ list }) {
  const sortedList = useMemo(() => list.sort(), [list]);

  return <div>{sortedList.join(', ')}</div>;
}
4.3.2 useCallback

useCallback 用于缓存函数，避免不必要的函数创建。

import React, { useCallback } from 'react';

function MyComponent({ onIncrement }) {
  const handleIncrement = useCallback(() => {
    onIncrement();
  }, [onIncrement]);

  return <button onClick={handleIncrement}>Increment</button>;
}
4.4 错误边界

错误边界是一种 React 组件，可以捕获并处理其子组件树中抛出的 JavaScript 错误。

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children;
  }
}

function App() {
  return (
    <ErrorBoundary>
      <MyWidget />
    </ErrorBoundary>
  );
}
5. 示例代码

以下是一些综合示例，展示了如何在 React 中使用不同的特性和最佳实践。

5.1 类组件示例
class DataFetcher extends React.Component {
  state = {
    data: null,
    id: 1
  };

  componentDidMount() {
    this.fetchData();
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.id !== this.state.id) {
      this.fetchData();
    }
  }

  componentWillUnmount() {
    this.abortController.abort();
  }

  fetchData = () => {
    this.abortController = new AbortController();
    fetch(`https://api.example.com/data/${this.state.id}`, { signal: this.abortController.signal })
      .then(response => response.json())
      .then(data => this.setState({ data }))
      .catch(error => console.error('Fetch error:', error));
  };

  changeId = () => {
    this.setState(prevState => ({ id: prevState.id + 1 }));
  };

  render() {
    return (
      <div>
        {this.state.data ? (
          <p>Data: {this.state.data}</p>
        ) : (
          <p>Loading...</p>
        )}
        <button onClick={this.changeId}>Change ID</button>
      </div>
    );
  }
}
5.2 函数组件示例
import React, { useState, useEffect, useCallback } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);
  const [id, setId] = useState(1);

  useEffect(() => {
    const abortController = new AbortController();

    fetch(`https://api.example.com/data/${id}`, { signal: abortController.signal })
      .then(response => response.json())
      .then(data => setData(data))
      .catch(error => console.error('Fetch error:', error));

    return () => abortController.abort(); // 清理请求
  }, [id]);

  const changeId = useCallback(() => {
    setId(id + 1);
  }, [id]);

  return (
    <div>
      {data ? (
        <p>Data: {data}</p>
      ) : (
        <p>Loading...</p>
      )}
      <button onClick={changeId}>Change ID</button>
    </div>
  );
}
6. 总结

React 是一个强大的库，用于构建用户界面。通过理解核心概念、新特性和最佳实践，开发者可以更高效地使用 React 构建高性能和响应式的应用。本文详细解读了最新的 React 官方文档，涵盖了组件、JSX、Props、State、生命周期方法、Hooks、Concurrent Mode 等内容，并提供了示例代码和最佳实践。

附录

  • React 官方文档：React 文档
  • React Hooks 文档：React Hooks
  • MDN Web 文档：React 简介

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

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

相关文章

Rust开发一个命令行工具（一，简单版持续更新）

Rust开发一个命令行工具（一，简单版持续更新）

依赖的包 cargo add clap --features derive clap命令行参数解析 项目目录 代码 main.rs mod utils;use clap::Parser; use utils::{editor::open_in_vscode,fs_tools::{file_exists, get_file, is_dir, list_dir, read_file}, }; /// 在文件中搜索模式并显示包含它的行。…
阅读更多...
Xcode 16 使用 pod 命令报错解决方案

Xcode 16 使用 pod 命令报错解决方案

原文请点击这个跳转 一、问题现象&#xff1a; 有人会遇到 Xcode 升级到 16 后&#xff0c;新建应用然后使用 pod init 命令会报错如下&#xff1a; Stack Ruby : ruby 3.3.5 (2024-09-03 revision ef084cc8f4) [x86_64-darwin23]RubyGems : 3.5.22Host : macOS 15.0 (24A335…
阅读更多...
Linux 6.13 将提供对一系列 Pre-M1 苹果设备的基本支持

Linux 6.13 将提供对一系列 Pre-M1 苹果设备的基本支持

虽然不像苹果 M3/M4 设备支持上游主线 Linux 内核那样令人兴奋&#xff0c;但对于那些拥有一些较旧的苹果&#xff08;M1 之前&#xff09;设备的用户来说&#xff0c;即将发布的 Linux 6.13 内核将支持一些较旧的 SoC 和板卡。 即将到来的 Linux 6.13 合并窗口将支持大量旧版…
阅读更多...
【蓝桥等考C++真题】蓝桥杯等级考试C++组第13级L13真题原题(含答案)-最大的数

【蓝桥等考C++真题】蓝桥杯等级考试C++组第13级L13真题原题(含答案)-最大的数

CL13 最大的数(20 分) 输入一个有 n 个无重复元素的整数数组 a&#xff0c;输出数组中最大的数。提示&#xff1a;如使用排序库函数 sort()&#xff0c;需要包含头文件#include 。输入&#xff1a; 第一行是一个正整数 n(2<n<20)&#xff1b; 第二行包含 n 个不重复的整…
阅读更多...
vue elementui el-dropdown-item设置@click无效的解决方案

vue elementui el-dropdown-item设置@click无效的解决方案

如图&#xff0c;直接在el-dropdown-item上面设置click&#xff0c;相应的method并没有被触发&#xff0c;查找资料发现需要在它的上级 el-dropdown 处使用 command 方法触发。 【template】 <el-dropdown placement"bottom-end" command"handleCommand&quo…
阅读更多...
flinkOnYarn并配置prometheus+grafana监控告警

flinkOnYarn并配置prometheus+grafana监控告警

flinkOnYarn并配置prometheusgrafana监控告警 一、相关服务版本&#xff1a; flink版本&#xff1a;1.17.2 pushgateway版本&#xff1a;1.10.0 prometheus版本&#xff1a;3.0.0 grafana-v11.3.0参考了网上的多个文档以及学习某硅谷的视频&#xff0c;总结了一下文档&#x…
阅读更多...
Rocky、Almalinux、CentOS、Ubuntu和Debian系统初始化脚本v9版

Rocky、Almalinux、CentOS、Ubuntu和Debian系统初始化脚本v9版

Rocky、Almalinux、CentOS、Ubuntu和Debian系统初始化脚本 Shell脚本源码地址&#xff1a; Gitee&#xff1a;https://gitee.com/raymond9/shell Github&#xff1a;https://github.com/raymond999999/shell脚本可以去上面的Gitee或Github代码仓库拉取。 支持的功能和系统&am…
阅读更多...
一文1800字使用Jmeter进行http接口性能测试！

一文1800字使用Jmeter进行http接口性能测试！

接口测试是测试系统组件间接口的一种测试。接口测试主要用于检测外部系统与系统之间以及内部各个子系统之间的交互点。测试的重点是要检查数据的交换&#xff0c;传递和控制管理过程&#xff0c;以及系统间的相互逻辑依赖关系等。 为什么要做接口测试&#xff1f; 越底层发现b…
阅读更多...
当使用key-value方式进行参数传递时，若key对应的是一个对象或数组结构，如何利用API Post工具进行模拟操作。

当使用key-value方式进行参数传递时，若key对应的是一个对象或数组结构，如何利用API Post工具进行模拟操作。

1. 后端服务代码如下 RequestMapping("/handle11")public Person handle11(Person person){System.out.println(person);return person;} 2. 后端入参结构 person是一个对象&#xff0c;对象结构如下&#xff1a; public class Person {private String username …
阅读更多...
Pytorch学习--神经网络--完整的模型验证套路

Pytorch学习--神经网络--完整的模型验证套路

一、选取的图片 全部代码依托于该博客 二、代码&#xff08;调用训练好的模型&#xff09; import torch import torchvision from PIL import Image from model import *img_path "dog.png" image Image.open(img_path)print(image.size)transform torchvisi…
阅读更多...
PMP--一、二、三模--分类--变更

PMP--一、二、三模--分类--变更

文章目录 技巧考试中的三大项目流程一 、变更流程 高频考点分析&#xff08;一、过程&#xff1b;二、人员&#xff09;一、过程&#xff1a;1.1 变更管理&#xff1a;1.1.1 瀑布型变更&#xff08;一次交付、尽量限制、确定性需求 &#xff1e;风险储备&#xff09;1.1.2 敏捷…
阅读更多...
c语言选择排序

c语言选择排序

选择排序思想&#xff1a; 反复地从未排序部分选择最小&#xff08;或最大&#xff09;的元素&#xff0c;将其放到已排序部分的末尾&#xff1b; 首先用一个变量min来保存数组第一个元素的下标&#xff0c;然后用这个下标访问这个元素&#xff0c;将这个元素与它后面的元素相…
阅读更多...
基于SpringBoot的“原创歌曲分享平台”的设计与实现（源码+数据库+文档+PPT)

基于SpringBoot的“原创歌曲分享平台”的设计与实现（源码+数据库+文档+PPT)

基于SpringBoot的“原创歌曲分享平台”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 平台功能结构图 平台首页界面图 用户注册界面…
阅读更多...
JMeter项目实战

JMeter项目实战

目录 一、流程&#xff1a; 1.接口测试流程&#xff1a; 2.测试数据准备&#xff1a; 3.接口功能测试&#xff1a; 4.自动化测试流程&#xff1a; 5.情景压力测试分析&#xff1a; 6.生成图形化测试报告&#xff1a; 一、流程&#xff1a; 1.接口测试流程&#xff1a; …
阅读更多...
杨中科 .Net Core 笔记 DI 依赖注入2

杨中科 .Net Core 笔记 DI 依赖注入2

ServiceCollection services new ServiceCollection();//定义一个承放服务的集合 services.AddScoped<iGetRole, GetRole>();using (ServiceProvider serviceProvider services.BuildServiceProvider()) {var list serviceProvider.GetServices(typeof(iGetRole));//获…
阅读更多...
DAY6 线程

DAY6 线程

作业1&#xff1a; 多线程实现文件拷贝&#xff0c;线程1拷贝一半&#xff0c;线程2拷贝另一半&#xff0c;主线程回收子线程资源。 代码&#xff1a; #include <myhead.h> sem_t sem1; void *copy1()//子线程1函数 拷贝前一半内容 {int fd1open("./1.txt",O…
阅读更多...
Window.history API学习笔记

Window.history API学习笔记

Window.history API学习笔记 在现代前端开发中&#xff0c;单页应用&#xff08;SPA&#xff09;的流行让我们对于页面的浏览历史管理需求愈加明显。window.history API作为浏览器提供的原生API&#xff0c;能够帮助开发者更加细致地控制用户的导航体验。本文将介绍window.his…
阅读更多...
Hbase集群搭建

Hbase集群搭建

1. 环境 三台节点hadoop 集群zookeeper 集群hbase 1.1环境准备 使用前文hdfs三台节点 1.11 zookeeper搭建 下载 wget https://dlcdn.apache.org/zookeeper/zookeeper-3.8.4/apache-zookeeper-3.8.4-bin.tar.gz解压 tar -zxvf apache-zookeeper-3.8.4-bin.tar.gz zookee…
阅读更多...
物联网（RFID）全景：被装信息化监控应用与挑战

物联网（RFID）全景：被装信息化监控应用与挑战

一、被装物联网信息化建设的动因 信息化改革在20世纪80年代中期启航&#xff0c;旨在提升被装保障的效率。随着时间的推移&#xff0c;硬件的广泛运用和软件的快速迭代&#xff0c;装备业务在规划、制造、分发以及战时支援等核心环节&#xff0c;已经与信息系统深度融合&#x…
阅读更多...
2024 年 10 月公链行业研报：比特币引领市场，Layer 2 竞争加剧

2024 年 10 月公链行业研报：比特币引领市场，Layer 2 竞争加剧

作者&#xff1a;Stella L (stellafootprint.network) 数据来源&#xff1a;Footprint Analytics 公链研究页面 在中本聪于 2008 年 10 月 31 日发布比特币白皮书整整 16 年后&#xff0c;比特币再次展现了其对金融世界的革命性影响。2024 年 10 月&#xff0c;在机构投资者…
阅读更多...
最新文章

Copyright @ 2022~2023