React 相关知识点

Edited on 2025-01-06 Waline:

React 基础知识
1. React的核心概念是什么？
  1. 组件（Components）
  2. JSX（JavaScript XML）
  3. 虚拟 DOM（Virtual DOM）
  4. 单向数据流（One-way Data Flow）
  5. 状态（State）
  6. 属性（Props）
  7. 生命周期方法（Lifecycle Methods）
  8. Hooks
2. 什么是 JSX？与普通的 JavaScript 不同？
  - JSX 是一种强大的语法工具，让你可以在 JavaScript 中直接编写类似 HTML 的代码。与普通 JavaScript 相比，JSX 提高了代码的可读性和维护性，特别适合用于定义复杂的用户界面结构。
  - 在 JSX 中，嵌入的表达式会自动进行转义处理，防止跨站脚本攻击（XSS）。

组件和生命周期

useEffect是什么，他有什么作用？
useEffect 是 React 中的一个 Hook，用于在函数组件中执行副作用（side effects），副作用包括数据获取、订阅、手动更改 DOM，以及其他无法在纯函数中完成的操作

默认情况下，useEffect 在每次渲染后运行
如果传递一个依赖数组，useEffect 只会在数组中的某个依赖项发生变化时执行
可以在 useEffect 中返回一个函数,这个函数会在组件卸载时、或在执行下一次副作用之前被调用,这里在执行下一次副作用前被调用很关键，不太好理解

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

function ResourceLoader({ resource }) {
    const [data, setData] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            const response = await fetch(`https://api.example.com/${resource}`);
            const result = await response.json();
            setData(result);
        };

        fetchData();

        // 清理函数：在依赖项更新时重置数据
        return () => {
            setData(null);
            console.log('Previous data cleared');
        };
    }, [resource]); // 当 `resource` 改变时，清理上一次的数据并重新加载

    return <div>Data: {JSON.stringify(data)}</div>;
}

在这个例子中，每次 resource 改变时，useEffect 中的清理函数会先被调用，清除上一次的 data，然后再次发起新的数据请求。

如何使用 useEffect 模拟生命周期方法？

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

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

    useEffect(() => {
        // 相当于 componentDidMount
        console.log('Component mounted');
        // 相当于 componentDidUpdate
        console.log(`Component updated: count is ${count}`);
        // 卸载时的清理函数
        return () => {
            // 相当于 componentWillUnmount
            console.log('Component will unmount');
        };
    }, [count]); // count 作为依赖项，只要 count 变化，useEffect 就会执行。
}

useLayoutEffect 与 useEffect 的区别?
- useEffect:
  - useEffect 是异步执行的，它会在浏览器绘制完成之后触发，因此它不会阻塞页面的渲染。
  - 常用于执行副作用，如数据获取、订阅事件、修改 DOM 等。
- useLayoutEffect:
  - useLayoutEffect 是同步执行的，在 DOM 更新后、浏览器绘制之前触发。因此它适合需要直接读取或修改 DOM 布局的操作。
  - 例如，你需要在浏览器绘制前测量 DOM 元素的大小或位置，或者强制同步地执行一些 DOM 操作。

使用场景
1. 测量 DOM 元素：如果你需要在组件渲染后立即测量 DOM 元素的尺寸或位置，并在测量结果的基础上进行一些操作，比如调整布局，那么 useLayoutEffect 是理想的选择。
2. 强制 DOM 更新：当需要立即更新 DOM，而不是等待浏览器绘制后再进行更新时，useLayoutEffect 可以确保 DOM 的变更在绘制之前完成。
3. 与动画相关的操作：在动画开始前设置 DOM 状态以避免闪烁或抖动。

React Hooks
1. 什么是 React Hooks？它们为何被引入？
  1. 简化组件逻辑：
    - 在类组件中，状态管理和生命周期方法往往分散在不同的部分，导致逻辑难以组织和维护。Hooks 允许将相关逻辑更紧密地组合在一起，即使它们涉及到状态或副作用。
    - 例如，处理状态变化和副作用的逻辑可以在同一个 useEffect 中完成，而不是分散在 componentDidMount、componentDidUpdate 和 componentWillUnmount 之中。
  2. 避免类组件的复杂性：
    - 类组件有时候会引入一些复杂性，特别是对初学者来说。你需要了解 this 的用法、生命周期方法的顺序、继承等。
    - Hooks让你通过函数的方式处理组件逻辑，避免了使用类的许多复杂性。
  3. 复用状态逻辑：在类组件中，复用状态逻辑通常需要使用高阶组件（HOC）或渲染属性（render props），这些模式可能会导致组件嵌套过深，代码难以理解。
    - Hooks 提供了一种新的状态逻辑复用方式。通过创建自定义 Hooks，可以提取和共享逻辑，而不会改变组件的结构。
  4. 更好的代码组织：
    - Hooks 使得在一个函数组件中更自然地组合状态、事件处理、数据获取等逻辑，不必分散在多个生命周期方法中。
    - 例如，通过 useState 和 useEffect，你可以将状态管理和副作用处理逻辑整合在一起，使代码更直观。
  5. 向后兼容：
    - Hooks 与现有的类组件完全兼容，开发者可以逐步引入 Hooks 而不必完全重写现有的代码库。
2. 常见的 React Hooks 有哪些？它们的用途是什么？
  1. useState,useEffect,useContext,useReducer,useRef,useMemo,useCallback,useLayoutEffect,useImperativeHandle,
3. 如何自定义 Hook？有什么场景需要自定义 Hook？
高级主题
什么是 Context API？如何使用它？
如何处理 React 中的性能问题？
什么是 React 的高阶组件 (Higher-Order Components)？
什么是 Render Props 模式？与高阶组件相比有哪些优缺点？
状态管理
如何在 React 中进行全局状态管理？
Redux 和 Context API 的区别是什么？
什么是 Redux Saga 或 Redux Thunk？它们的区别是什么？
路由和异步操作
如何在 React 中进行路由管理？
如何在 React 中处理异步数据？
架构与设计
1. 如何设计一个可复用的 React 组件？
2. 如何处理组件之间的通信？
3. 如何在 React 中处理表单和表单验证？
4. 如何管理大型 React 应用中的组件结构？
5. 如何处理 React 应用中的依赖注入？
React 中的性能问题
1. React 中的 Reconciliation 过程是怎样的？
2. React 组件的 key 属性在列表渲染中有何作用？
3. React 中的性能优化有哪些策略？
4. 什么是虚拟 DOM？它如何提高性能？
5. 如何优化 React 应用的加载性能？
6. 如何优化 React 中的大量列表渲染？
7. 如何使用 React Profiler 工具进行性能调优？
8. 如何处理 React 中的慢渲染问题？
  讨论如何优化组件结构，减少不必要的渲染，使用 memoization 技术，以及如何处理大规模数据渲染。
React 实践问题
1. 如何处理 React 中的错误边界？
2. 如何在 React 应用中实现国际化 (i18n)？
3. React 18 中有哪些新的特性？
4. 如何处理 React 中的访问控制 (access control)？
5. React Fiber 是什么？它如何改进 React 的性能？
6. 什么是 Suspense 和 Concurrent Mode？它们如何改善用户体验？
7. 如何在 React 中实现 SSR（服务端渲染）？
8. 如何在 React 中实现 CSS 作用域？
9. 什么是 React Portals？它的应用场景有哪些
10. 如何在 React 中处理长时间运行的异步任务？
11. 如何在 React 中处理路由切换时的数据预加载？
12. 如何在 React 应用中处理环境配置和敏感信息？
  1. dotenv工具加载配置
13. 如何在 React 项目中实施模块热替换（HMR）
14. 如何在 React 中实现实时数据更新？
  1. 长轮讯：保持连接直到有新数据可用，减少网络流量和负载和服务器负载，但存在通信延迟
  2. webSockets: 提供全双工通信，适用于低延迟和高频率的更新的应用，但实现较为复杂
  3. SSE（Server-Sent Events）:单向通信，适用于实时更新客户端而无需客户端发送的数据场景
  4. WebTransport: 基于HTTP/3和QUIC协议，提供高效的数据传输，但支撑尚不广泛
  5. WebRTC：支持浏览器和移动应用点对点通信，适用于流媒体音频，视频和数据交换，主要用于客户端间的交互