从零到一学习React基础与原理

不会写的华崽2023-11-19 5:09

React的基础

JSX简介

概念

JSX是JavaScript的语法扩展，它允许我们在JavaScript代码中写类似HTML的标记。虽然不是必需的，JSX在React开发中广泛使用，因为它使代码更易读和编写。

代码示例

jsx 复制代码 
const element = <h1>Hello, world!</h1>;

组件和Props

组件概念

React应用由多个组件构成，每个组件代表UI的一部分。组件可以是类或函数形式，允许更灵活的代码组织和重用。

Props

Props是组件的输入，类似于函数的参数。它们是不可变的，使得组件更易于预测和调试。

代码示例

jsx 复制代码 
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

State和生命周期

State

State是React组件的状态信息。它允许组件对用户输入或时间流动做出响应，并动态地更新UI。

生命周期

React组件有多个生命周期方法，例如componentDidMount和componentDidUpdate，它们在组件的不同阶段被调用。

代码示例

jsx 复制代码 
class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

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

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

虚拟DOM和实际DOM

什么是虚拟DOM

定义

虚拟DOM（Virtual DOM）是一个轻量级的JavaScript对象，它是实际DOM的一个简化版本。React使用虚拟DOM来优化DOM操作，提高应用性能。

原理

当组件的状态变化时，React首先在虚拟DOM上进行改变，然后比较它与上一次的虚拟DOM的差异，最后只更新实际DOM中有变化的部分。

虚拟DOM如何工作

Diff算法

React使用Diff算法比较前后两个虚拟DOM的差异。这个过程称为"协调"（Reconciliation），能够确保以最小的成本更新DOM。

批量更新

React进行DOM更新时，会累积一批变化，然后一次性执行，这减少了不必要的DOM操作，提高了性能。

与实际DOM的比较

优势

  • 性能提升：减少实际DOM操作次数，提高效率。
  • 声明式编程：开发者只需关注状态管理，无需直接操作DOM。

限制

  • 初始渲染成本：虚拟DOM的创建和维护需要额外的资源。

组件更新与重渲染

组件生命周期详解

挂载阶段

  • constructor: 初始化state，绑定事件处理方法。
  • static getDerivedStateFromProps: 在渲染前更新state以响应props的变化。
  • render: 组件渲染函数。
  • componentDidMount: 组件挂载完成后执行，适合进行API调用、订阅等操作。

更新阶段

  • static getDerivedStateFromProps: 对于更新，同样可以在渲染前调整state。
  • shouldComponentUpdate: 决定是否重新渲染组件，可以用于性能优化。
  • render: 重新渲染。
  • getSnapshotBeforeUpdate: 在DOM更新前捕获一些信息（如滚动位置）。
  • componentDidUpdate: 更新完成后执行，适合执行DOM操作或网络请求。

卸载阶段

  • componentWillUnmount: 清理工作，如取消网络请求、移除订阅等。

高效更新组件

避免不必要的重新渲染

  • 使用shouldComponentUpdate或React.PureComponent减少不必要的渲染。
  • 使用不可变数据结构，以便快速比较状态或属性是否变化。

使用键（Keys）优化列表渲染

  • 在渲染列表时，为每个列表项分配一个唯一的key。这有助于React识别哪些项被更改、添加或删除，从而提高性能。

使用懒加载（Lazy Loading）

  • 使用React.lazy和Suspense对组件进行懒加载，减少初始负载时间。

Hooks简介

useState和useEffect

useState

  • 用途: 允许在函数组件中使用状态。
  • 特点: 返回一个状态值和一个用于更新这个状态值的函数。

代码示例

jsx 复制代码 
function Example() {
  // 声明一个新的状态变量"count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect

  • 用途: 用于在函数组件中执行副作用操作（如数据获取、订阅或手动修改React组件中的DOM）。
  • 替代 : 替代了类组件中的componentDidMount, componentDidUpdate, 和 componentWillUnmount。

代码示例

jsx 复制代码 
function Example() {
  const [count, setCount] = useState(0);

  // 相当于 componentDidMount 和 componentDidUpdate:
  useEffect(() => {
    // 使用浏览器的API更新文档标题
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

自定义Hooks

概念

自定义Hooks允许你提取组件逻辑到可重用的函数中。

使用场景

  • 当你发现一些逻辑在不同组件间重复时，可以将其提取到一个自定义Hook中。

示例

假设我们有多个组件需要使用到窗口的宽度：

jsx 复制代码 
function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => setWidth(window.innerWidth);
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  });

  return width;
}

function MyComponent() {
  const width = useWindowWidth();
  // 使用窗口宽度
}

React Hooks内部机制深度剖析

useState深入

底层实现

  • React维护了一个当前正在渲染的组件的指针。这个指针指向了一个"fiber"，每个fiber代表了一个React组件。
  • 每个fiber节点都有一个对应的hooks链表。当你调用useState，它实际上是在这个链表上添加一个新的hook节点。
  • 这些hook节点存储了状态值和一个更新该状态的分派（dispatch）函数。

更新过程

  • 当setState被调用时，React会将该组件标记为"脏"组件。这意味着在下一次React的渲染周期中，这个组件将被重新渲染。
  • React重新渲染组件时，会按顺序遍历这些hooks，并读取最新的状态。

闭包问题

  • 由于Hooks的闭包特性，每次组件渲染时都会"捕获"当时的状态。这意味着如果不正确使用，可能会导致状态更新时引用了旧的状态值。

useEffect详细原理

执行时机

  • useEffect的执行时机在浏览器完成布局和绘制之后，确保不会阻塞页面的可见更新。

依赖跟踪

  • React通过比较依赖数组中的元素与前一次渲染时的元素来确定是否需要重新执行effect。如果数组中的任何元素发生了变化，effect就会在下一个渲染周期后运行。

清理函数

  • 如果useEffect返回一个函数，React会在执行当前effect之前对上一个effect进行清理。这是管理副作用（如订阅和定时器）的理想方式。

调度优化

  • React对effect的调度进行了优化，以避免不必要的重渲染和性能损耗。例如，在组件卸载时，所有未运行的effects都会被清除。

Hooks与Fiber架构

React的Fiber架构是其对组件渲染和更新的底层重构。Hooks的实现紧密依赖于Fiber架构，尤其是在状态更新和effect的调度方面。Fiber架构使得React可以暂停、中断或重启渲染工作，这对于Hooks的正确执行至关重要。

React Context API 深度解析

Context API概述

用途

  • Context API允许组件树中的数据传递，而不必显式地通过每个层级手动传递props。

Context底层原理

创建Context

  • 使用React.createContext创建一个Context对象。这个对象包含Provider和Consumer组件。

代码示例

jsx 复制代码 
const MyContext = React.createContext(defaultValue);

Provider组件

  • Provider组件允许消费组件订阅context的变化。
  • 当Provider的value属性变化时，所有作为其后代的消费者（consumer）组件都会重新渲染。

消费Context

  • 可以通过Context.Consumer组件或useContext Hook来消费Context。

代码示例

jsx 复制代码 
<MyContext.Provider value={/* 某个值 */}>
  {/* 子组件 */}
</MyContext.Provider>

Context工作流程

  1. Provider更新 : 当Provider的value属性变化时，React会对Provider下的所有消费者进行更新。
  2. Context传递: React利用Fiber树来向下传递Context值，当遇到匹配的Consumer时，将提供对应的值。
  3. 消费者渲染: 消费者组件接收到新的值后会进行重新渲染。

高级使用

跨组件通信

  • Context API常用于实现跨组件通信，如主题设置、用户偏好等。

性能注意事项

  • 频繁变化的Context可能会导致大量的重新渲染。因此，在使用时应当注意其对性能的影响。

代码示例

jsx 复制代码 
function ThemeButton() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}

Context与Fiber架构

  • React的Fiber架构允许Context值在组件树中更高效地传递和更新。Fiber节点存储了对应组件的Context依赖信息，这使得React可以快速确定哪些组件需要在Context值变化时重新渲染。

绝对可以！接下来，我们将深入探讨React性能优化的高级策略，特别关注于底层的实现细节和更复杂的场景。🚀

React性能优化高级策略

使用React.memo优化函数组件

概述

  • React.memo是一个高阶组件，它仅对组件的props进行浅比较，以防止不必要的渲染。

原理

  • 当组件的props没有变化时，React.memo会跳过渲染，从而减少组件树的渲染次数。

代码示例

jsx 复制代码 
const MyComponent = React.memo(function MyComponent(props) {
  /* 渲染组件 */
});

使用useCallback和useMemo避免不必要的计算

useCallback

  • useCallback返回一个记忆化的回调函数，只有在其依赖项发生变化时，才会更新。

useMemo

  • useMemo用于记忆化计算结果，只有当依赖项改变时，才重新计算。

代码示例

jsx 复制代码 
const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

使用懒加载（Lazy Loading）优化大型组件树

React.lazy

  • React.lazy允许你定义一个动态加载的组件。这对于减少应用的初始包大小特别有用。

Suspense

  • Suspense组件让你指定加载指示器（如旋转器），在等待加载的组件显示时展示。

代码示例

jsx 复制代码 
const OtherComponent = React.lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <React.Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </React.Suspense>
  );
}

使用Fiber架构优势进行任务分割

时间切片（Time Slicing）

  • React 16引入的Fiber架构允许React将渲染工作分割成多个小任务，这些任务可以在浏览器的主线程中间隙执行，避免长时间占用主线程。

代码示例

  • 这是一个底层特性，通常不需要开发者直接操作，但了解其原理有助于编写更高效的组件。

使用useReducer优化复杂组件的状态管理

概述

  • 对于具有复杂状态逻辑的组件，使用useReducer可以比useState更加清晰和管理。

代码示例

jsx 复制代码 
function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, {count: 0});
  // ...
}

React高级性能优化技术深度探讨

优化渲染过程中的不可变数据模式

概念

  • 在React中，使用不可变数据可以减少不必要的渲染，因为React的重渲染机制依赖于props和state的浅比较。

实现

  • 使用像Immutable.js这样的库来处理数据，确保当数据变化时，只有真正变化的部分会被更新。

代码示例

jsx 复制代码 
import { Map } from 'immutable';

function MyComponent({ data }) {
  // 使用Immutable.js处理数据
  const newData = data.set('key', 'value');
  // ...
}

利用React的批处理（Batching）特性

原理

  • React默认会批量处理setState调用，以减少不必要的渲染次数。
  • 在事件处理器或生命周期方法中，连续的setState调用会被自动批处理。

深入

  • 在某些情况下（如异步操作），默认的批处理可能不会发生。可以使用ReactDOM.unstable_batchedUpdates显式进行批处理。

代码示例

jsx 复制代码 
import ReactDOM from 'react-dom';

function updateState() {
  ReactDOM.unstable_batchedUpdates(() => {
    setCount(c => c + 1);
    setFlag(f => !f);
  });
}

使用shouldComponentUpdate和React.PureComponent精确控制更新

shouldComponentUpdate

  • 通过定义shouldComponentUpdate方法，可以控制组件是否需要更新。

React.PureComponent

  • React.PureComponent通过浅比较props和state来自动实现shouldComponentUpdate，减少了不必要的渲染。

代码示例

jsx 复制代码 
class MyComponent extends React.PureComponent {
  render() {
    // ...
  }
}

优化大型列表的渲染

虚拟列表（Virtual List）

  • 对于大型列表渲染，使用虚拟列表可以大幅提高性能。这种方法只渲染当前视图中的列表项。

实现

  • 可以使用如react-window或react-virtualized等库来实现虚拟列表。

代码示例

jsx 复制代码 
import { FixedSizeList as List } from 'react-window';

const MyList = ({ data }) => (
  <List
    height={150}
    itemCount={data.length}
    itemSize={35}
    width={300}
  >
    {({ index, style }) => (
      <div style={style}>
        Row {data[index]}
      </div>
    )}
  </List>
);

利用React Fiber架构的并发特性

时间切片

  • React Fiber引入了时间切片（Time Slicing），这意味着React可以将渲染任务分成几个小块进行，避免阻塞主线程。

并发模式（Concurrent Mode）

  • 并发模式是React的一种新模式，它允许React在渲染时更好地利用时间切片和优先级调度。

总结

本文深入探讨了React技术的几个关键方面，特别是那些对于理解和优化React应用至关重要的高级概念和策略。

  1. React Hooks深度解析

    • 我们探讨了useState和useEffect等Hooks的底层工作原理，理解了React是如何通过Fiber节点管理组件状态和副作用的。

  2. React Context API

    • 分析了Context API的内部机制，特别是其在组件树中如何传递和使用数据。

  3. React性能优化策略

    • 深入讨论了多种性能优化技术，包括使用React.memo、useCallback和useMemo来避免不必要的渲染，以及利用React Fiber架构的特性来提高应用性能。

  4. 复杂场景下的应用

    • 探索了如何处理大型列表和复杂状态逻辑，以及如何利用React的并发特性和时间切片技术优化长时间运行的任务。

通过这些深入的探讨，我们不仅加深了对React内部工作机制的理解，也学习了如何在实际开发中应用这些知识来构建更高效、更可维护的Web应用。

相关推荐
昨天；明天。今天。1 分钟前
案例-任务清单
前端·javascript·css
zqx_71 小时前
随记 前端框架React的初步认识
前端·react.js·前端框架
惜.己1 小时前
javaScript基础（8个案例+代码+效果图）
开发语言·前端·javascript·vscode·css3·html5
什么鬼昵称2 小时前
Pikachu-csrf-CSRF(get)
前端·csrf
长天一色2 小时前
【ECMAScript 从入门到进阶教程】第三部分：高级主题（高级函数与范式，元编程，正则表达式，性能优化）
服务器·开发语言·前端·javascript·性能优化·ecmascript
NiNg_1_2342 小时前
npm、yarn、pnpm之间的区别
前端·npm·node.js
秋殇与星河2 小时前
CSS总结
前端·css
BigYe程普3 小时前
我开发了一个出海全栈SaaS工具，还写了一套全栈开发教程
开发语言·前端·chrome·chatgpt·reactjs·个人开发
余生H3 小时前
前端的全栈混合之路Meteor篇：关于前后端分离及与各框架的对比
前端·javascript·node.js·全栈
程序员-珍3 小时前
使用openapi生成前端请求文件报错 ‘Token “Integer“ does not exist.‘
java·前端·spring boot·后端·restful·个人开发
热门推荐
01分享几个惊艳的 Three.js 个人站点02【经验分享】Ubuntu22.04安装微信(linux官方版)032024年高教社杯数学建模国赛C题超详细解题思路分析04组基轨迹建模 GBTM的介绍与实现（Stata 或 R）05安卓系列机型永久去除data分区加密 详细步骤解析06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07CTF网络安全大赛简单的web抓包题目：HEADache08Ubuntu24.04安装中文输入法09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10springer 在线投稿编译踩坑