React 面试题及答案

如果你喜欢这个项目，请点击 ⭐。非常欢迎提交 Pull Requests。关注我 @SudheerJonna 获取技术更新。

在浏览器中练习 280 多个 JavaScript 编码面试题。由前 FAANG 面试官打造。无 AI 生成的冗余内容。无虚假评价。立即尝试 GreatFrontEnd → 💡

我推荐这门 React 课程，助你成为 React 领域的顶尖 10% 人才；还有这门 编码面试训练营，帮你在编码面试中脱颖而出并成功获得工作机会。

注意： 本仓库专门针对 ReactJS。核心 JavaScript 问题请查看 JavaScript Interview Questions，数据结构与算法相关问题请查看 Data Structures and Algorithms。

目录

目录

核心 React

1. 什么是 React？

   React（又称 React.js 或 ReactJS）是一个开源的前端 JavaScript 库，用于基于组件构建用户界面。它用于处理 Web 和移动应用程序的视图层，允许开发人员创建可重用的 UI 组件并高效管理这些组件的状态。

   React 由 Facebook（现为 Meta）的软件工程师 Jordan Walke 创建。它于 2011 年首次部署在 Facebook 的动态消息上，2012 年部署在 Instagram 上。该库于 2013 年 5 月开源，此后成为构建现代用户界面最受欢迎的 JavaScript 库之一。

   ⬆ 返回顶部

2. React 的发展历史是怎样的？

   ReactJS 的历史始于 2010 年 XHP 的创建。XHP 是一个 PHP 扩展，它改进了该语言的语法，使 XML 文档片段成为有效的 PHP 表达式，其主要目的是用于创建自定义和可重用的 HTML 元素。

   这个扩展的主要原则是使前端代码更易于理解，并帮助避免跨站脚本攻击。该项目通过清理用户提交的恶意内容成功地起到了防范作用。

   但是 XHP 存在一个不同的问题，即动态 Web 应用程序需要多次往返服务器，而 XHP 并没有解决这个问题。此外，应用程序中即使有很小的变化，整个 UI 也会重新渲染。后来，Jordan 受 XHP 的启发，创建了 React 的最初原型，名为 FaxJ。最终，经过一段时间后，React 作为一个新的库被引入到 JavaScript 世界中。

   查看深入解答

   React 的演变有着超过十年的迷人历史：

   2010-2011 年：起源

   • 旅程始于 XHP，这是 Facebook 开发的一个 PHP 扩展，允许在 PHP 代码中使用 HTML 组件
   • XHP 提高了前端代码的可读性，并有助于防止跨站脚本（XSS）攻击
   • 然而，XHP 在动态 Web 应用程序方面存在局限性，需要频繁的服务器往返，并且对于小的更改也需要完全重新渲染 UI

   2011-2012 年：早期开发

   • Jordan Walke 创建了第一个原型，名为 FaxJS（后来更名为 React），其灵感来自 XHP 的组件模型
   • 关键创新在于将 XHP 的组件模型引入 JavaScript，并进行了性能改进
   • React 引入了虚拟 DOM 概念，以解决整页重新渲染的性能问题
   • 2011 年首次在 Facebook 的动态消息内部部署，2012 年在 Instagram 部署

   2013 年：公开发布

   • React 于 2013 年 5 月在 JSConf US 上正式开源
   • 最初的公众反响褒贬不一，一些开发人员对 JSX 语法以及将标记与 JavaScript 混合的方法持怀疑态度

   2014-2015 年：日益普及

   • React Native 于 2015 年宣布，将 React 的范式扩展到移动应用开发
   • 生态系统开始随着 Redux 等状态管理工具的出现而发展
   • Facebook 之外的公司开始在生产应用中采用 React

   2016-2018 年：成熟

   • React 16（“Fiber”）于 2017 年发布，对核心架构进行了彻底重写
   • 引入了错误边界、 portals 和改进的服务器端渲染等新功能
   • React 16.3 引入了 Context API，用于更轻松的状态管理

   2019 年至今：现代 React

   • React Hooks 于 React 16.8（2019 年 2 月）中引入，彻底改变了函数组件中的状态管理
   • React 17（2020 年 10 月）专注于使 React 升级更容易
   • React 18（2022 年 3 月）引入了并发渲染和自动批处理
   • React 继续通过服务器组件、新的 React 编译器（React Forget）和其他性能改进不断发展

   注意： React 的语法扩展 JSX 确实受到了 XHP 在代码中嵌入类 XML 语法方法的启发。

   ⬆ 返回顶部

3. React 的主要特性是什么？

   React 提供了一系列强大的特性，使其成为构建用户界面最受欢迎的 JavaScript 库之一：

   核心特性：

   • 基于组件的架构：React 应用程序使用组件构建——组件是独立、可重用的代码片段，通过 render 函数返回 HTML。这种模块化方法使代码组织、可重用性和维护性更好。

   • 虚拟 DOM：React 创建内存中的数据结构缓存，计算结果差异，并高效地仅更新浏览器 DOM 中已更改的部分。与直接 DOM 操作相比，这种方法显著提高了性能。

   • JSX（JavaScript XML）：一种语法扩展，允许在 JavaScript 中编写类 HTML 代码。JSX 使代码更具可读性和表达性，同时提供 JavaScript 的全部功能。

   • 单向数据流：React 遵循单向数据绑定模型，数据从父组件流向子组件。这使代码更可预测且更易于调试。

   • 声明式 UI：React 允许你描述给定状态下 UI 应该是什么样子，当底层数据变化时，它会处理 DOM 更新。

   高级特性：

   • React Hooks：在 React 16.8 中引入，Hooks 允许在函数组件中使用状态和其他 React 功能，而无需编写类。

   • Context API：提供了一种在组件之间共享值的方式，无需通过组件树的每个级别显式传递 props。

   • 错误边界：能够捕获其子组件树中任何位置的 JavaScript 错误，并显示备用 UI，而不是崩溃。

   • 服务器端渲染（SSR）：允许在服务器上渲染 React 组件，然后再将 HTML 发送到客户端，从而提高性能和 SEO。

   • 并发模式：一组新功能（开发中），帮助 React 应用保持响应性，并优雅地适应用户的设备能力和网络速度。

   • React 服务器组件：一项新功能，允许组件完全在服务器上渲染，减少捆绑包大小并提高性能。

   • Suspense：允许组件在渲染前“等待”某些内容的功能，支持代码分割和更清晰的数据获取代码。

   这些特性共同使 React 强大到足以构建从小部件到复杂、大规模 Web 应用程序的各种项目。

   ⬆ 返回顶部

4. 什么是 JSX？

   JSX 代表 JavaScript XML，它是 ECMAScript 的一种类 XML 语法扩展。基本上，它只是为 React.createElement(type, props, ...children) 函数提供语法糖，为我们提供 JavaScript 的表达能力以及类 HTML 的模板语法。

   在下面的示例中，<h1> 标签内的文本作为 JavaScript 函数返回到 render 函数。

   export default function App() {
     return <h1 className="greeting">{"Hello, this is a JSX Code!"}</h1>;
   }
   

   如果你不使用 JSX 语法，那么相应的 JavaScript 代码应如下编写：

   import { createElement } from "react";
   
   export default function App() {
     return createElement(
       "h1",
       { className: "greeting" },
       "Hello, this is a JSX Code!"
     );
   }
   

   查看类组件形式

   class App extends React.Component {
     render() {
       return <h1 className="greeting">{"Hello, this is a JSX Code!"}</h1>;
     }
   }
   

   注意： JSX 比 HTML 更严格。

   ⬆ 返回顶部

5. Element 和 Component 有什么区别？

   Element（元素）：

   • React Element 是一个普通的 JavaScript 对象，它描述了你希望在 UI 上看到的内容。它表示特定时间点的 DOM 节点或组件。

   • 元素是不可变的：一旦创建，就不能更改它们的属性。相反，你可以创建新的元素来反映更新。

   • 元素可以通过它们的 props 嵌套在其他元素中。

   • 创建元素是一个快速、轻量级的操作——它不会直接创建任何实际的 DOM 节点或将任何内容渲染到屏幕上。

     示例（不使用 JSX）：

     const element = React.createElement("button", { id: "login-btn" }, "Login");
     

     等效的 JSX 语法：

     <button id="login-btn">Login</button>
     

     React.createElement 返回的对象：

     {
       type: 'button',
       props: {
         id: 'login-btn',
         children: 'Login'
       }
     }
     

     然后元素被传递给 React DOM 渲染器（例如 ReactDOM.render()），后者将它们转换为实际的 DOM 节点。

     ---

   Component（组件）：

   • Component 是一个函数或类，它返回一个元素（或元素树）来描述 UI 的一部分。组件可以接受输入（称为 props）并管理自己的状态（对于类组件或使用 Hooks 的函数组件）。

   • 组件允许你将 UI 拆分为独立、可重用的部分，每个部分都是隔离且可组合的。

   • 你可以使用函数或类来定义组件：

     示例（带 JSX 的函数组件）：

     const Button = ({ handleLogin }) => (
       <button id="login-btn" onClick={handleLogin}>
         Login
       </button>
     );
     

     当 JSX 被编译时，它会转换为 React.createElement 调用树：

     const Button = ({ handleLogin }) =>
       React.createElement(
         "button",
         { id: "login-btn", onClick: handleLogin },
         "Login"
       );
     

     ---

   总结：

   • Elements 是 React 中最小的构建块——描述你想要看到的内容的对象。
   • Components 是返回元素的函数或类，它们封装了 UI 部分的逻辑、结构和行为。

   可以将 elements 视为创建 UI 的指令，而 components 则是结合了逻辑和结构来生成这些指令的可重用蓝图。

   ⬆ 返回顶部

6. 如何在 React 中创建组件？

   组件是在 React 中创建用户界面（UI）的构建块。有两种可能的方式来创建组件。

   1. 函数组件： 这是创建组件最简单的方式。它们是纯 JavaScript 函数，接受 props 对象作为唯一的参数，并返回 React 元素以渲染输出：

      function Greeting({ message }) {
        return <h1>{`Hello, ${message}`}</h1>;
      }
      

   2. 类组件： 你也可以使用 ES6 类来定义组件。上面的函数组件可以写成类组件：

      class Greeting extends React.Component {
        render() {
          return <h1>{`Hello, ${this.props.message}`}</h1>;
        }
      }
      

   ⬆ 返回顶部

7. 什么时候使用类组件而不是函数组件？

   在 Hooks 出现之后（即 React 16.8 及以后版本），在 React 中总是建议优先使用函数组件而不是类组件。因为你可以在函数组件中使用状态、生命周期方法和其他以前仅在类组件中可用的功能。

   但即使如此，仍有两个理由使用类组件而不是函数组件。

   1. 如果你需要某个 React 功能，而其对应的函数组件等效实现尚未出现，例如错误边界。
   2. 在旧版本中，如果组件需要 状态或生命周期方法，那么你需要使用类组件。

   因此，这个问题的总结如下：

   使用函数组件：

   • 如果你不需要状态或生命周期方法，并且你的组件纯粹是展示性的。
   • 为了简洁性、可读性和现代代码实践，特别是结合使用 React Hooks 进行状态和副作用管理时。

   使用类组件：

   • 如果你需要管理状态或使用生命周期方法。
   • 在需要向后兼容或与旧代码集成的场景中。

   注意： 你也可以使用可重用的第三方 react error boundary 组件，而无需编写任何类。也就是说，不需要为错误边界使用类组件。

   上述库中错误边界的用法非常简单。

   使用 react-error-boundary 时的注意事项： ErrorBoundary 是一个客户端组件。你只能向它传递可序列化的 props，或者在具有 "use client"; 指令的文件中使用它。

   "use client";
   
   import { ErrorBoundary } from "react-error-boundary";
   
   <ErrorBoundary fallback={<div>Something went wrong</div>}>
     <ExampleApplication />
   </ErrorBoundary>;
   

   ⬆ 返回顶部

8. 什么是纯组件（Pure Components）？

   纯组件是对于相同的状态和 props 会渲染相同输出的组件。在函数组件中，你可以通过使用记忆化的 React.memo() API 包装组件来实现这些纯组件。此 API 通过使用浅层比较来比较先前的 props 和新的 props，从而防止不必要的重新渲染。因此，它有助于性能优化。

   但同时，它不会比较先前的状态和当前的状态，因为当你再次设置相同的状态时，函数组件本身默认会防止不必要的渲染。

   记忆化组件的语法表示如下：

   const MemoizedComponent = memo(SomeComponent, arePropsEqual?);
   

   下面是子组件（即 EmployeeProfile）如何防止父组件（即 EmployeeRegForm）传递相同 props 时的重新渲染的示例。

   import { memo, useState } from "react";
   
   const EmployeeProfile = memo(function EmployeeProfile({ name, email }) {
     return (
       <>
         <p>Name:{name}</p>
         <p>Email: {email}</p>
       </>
     );
   });
   export default function EmployeeRegForm() {
     const [name, setName] = useState("");
     const [email, setEmail] = useState("");
     return (
       <>
         <label>
           Name:{" "}
           <input value={name} onChange={(e) => setName(e.target.value)} />
         </label>
         <label>
           Email:{" "}
           <input value={email} onChange={(e) => setEmail(e.target.value)} />
         </label>
         <hr />
         <EmployeeProfile name={name} />
       </>
     );
   }
   

   在上面的代码中，email prop 没有传递给子组件。因此，email prop 的变化不会导致重新渲染。

   在类组件中，继承 React.PureComponent 而不是 React.Component 的组件成为纯组件。当 props 或 state 发生变化时，PureComponent 将通过调用 shouldComponentUpdate() 生命周期方法对 props 和 state 进行浅层比较。

   注意： React.memo() 是一个高阶组件。

   ⬆ 返回顶部

9. React 中的 state 是什么？

   组件的 State 是一个对象，它保存了一些可能在组件生命周期内发生变化的信息。重要的一点是，每当 state 对象发生变化时，组件就会重新渲染。始终建议使我们的 state 尽可能简单，并尽量减少有状态组件的数量。

   

   让我们以一个带有 message state 的 User 组件为例。这里，useState Hook 用于向 User 组件添加 state，它返回一个数组，其中包含当前 state 和更新它的函数。

   import { useState } from "react";
   
   function User() {
     const [message, setMessage] = useState("Welcome to React world");
   
     return (
       <div>
         <h1>{message}</h1>
       </div>
     );
   }
   

   每当 React 调用你的组件或访问 useState Hook 时，它都会为该特定渲染提供一个 state 的快照。

   查看类组件形式

   import React from "react";
   class User extends React.Component {
     constructor(props) {
       super(props);
   
       this.state = {
         message: "Welcome to React world",
       };
     }
   
     render() {
       return (
         <div>
           <h1>{this.state.message}</h1>
         </div>
       );
     }
   }
   

   State 类似于 props，但它是私有的，完全由组件控制，即，直到所有者组件决定传递它，它才对任何其他组件可访问。

   ⬆ 返回顶部

10. React 中的 props 是什么？

    Props 是组件的输入。它们是单个值或包含一组值的对象，在创建组件时传递给组件，类似于 HTML 标签属性。在这里，数据从父组件传递到子组件。

    React 中 props 的主要目的是提供以下组件功能：

    1. 向组件传递自定义数据。
    2. 触发状态变化。
    3. 在组件的 render() 方法内部通过 this.props.reactProp 使用。

    例如，让我们创建一个带有 reactProp 属性的元素：

    <Element reactProp={"1"} />
    

    这个 reactProp（或任何你想出的名称）属性名随后成为附加到 React 原生 props 对象的属性，该对象最初存在于使用 React 库创建的所有组件上。

    props.reactProp;
    

    例如，函数组件中 props 的用法如下所示：

    import React from "react";
    import ReactDOM from "react-dom";
    
    const ChildComponent = (props) => {
      return (
        <div>
          <p>{props.name}</p>
          <p>{props.age}</p>
          <p>{props.gender}</p>
        </div>
      );
    };
    
    const ParentComponent = () => {
      return (
        <div>
          <ChildComponent name="John" age="30" gender="male" />
          <ChildComponent name="Mary" age="25" geneder="female" />
        </div>
      );
    };
    

可以使用 ES6（ECMAScript 2015）中的解构特性直接访问 props 对象中的属性。当未指定 prop 值时，也可以回退到默认值。上面的子组件可以简化如下。

const ChildComponent = ({ name, age, gender = "male" }) => {
  return (
    <div>
      <p>{name}</p>
      <p>{age}</p>
      <p>{gender}</p>
    </div>
  );
};

注意： 如果你传入 null 或 0 值，将不会使用默认值。也就是说，只有当未传入 prop 值或传入了 undefined 值时，才会使用默认值。

import React from "react";
import ReactDOM from "react-dom";

class ChildComponent extends React.Component {
  render() {
    return (
      <div>
        <p>{this.props.name}</p>
        <p>{this.props.age}</p>
        <p>{this.props.gender}</p>
      </div>
    );
  }
}

class ParentComponent extends React.Component {
  render() {
    return (
      <div>
        <ChildComponent name="John" age="30" gender="male" />
        <ChildComponent name="Mary" age="25" gender="female" />
      </div>
    );
  }
}

⬆ Back to Top

11. state 和 props 有什么区别？

    在 React 中，state 和 props 都是普通的 JavaScript 对象，但它们的用途和行为各不相同：

    State

    • 定义：
      State 是组件内部管理的数据结构。它表示在组件生命周期内可能发生变化的信息。
    • 可变性：
      State 是可变的，这意味着可以使用 setter 函数（类组件中的 setState 或函数组件中 useState 返回的更新函数）来修改它。
    • 作用域：
      State 是定义它的组件所私有的。只有该组件可以修改自己的 state。
    • 用途：
      State 通常用于需要响应用户操作、网络响应或其他动态事件而变化的数据。
    • 重新渲染：
      更新 state 会触发组件及其子组件的重新渲染。

    Props

    • 定义：
      Props（“properties” 的缩写）是组件的输入，由其父组件提供。
    • 可变性：
      Props 是只读的。组件不能修改自己的 props；从组件的角度来看，它们是不可变的。
    • 作用域：
      Props 用于在组件树中向下传递数据和事件处理函数，使父组件能够配置或与子组件通信。
    • 用途：
      Props 通常用于使组件可重用和可配置。它们允许同一个组件使用不同的数据或行为进行渲染。
    • 类比：
      可以将 props 看作函数的参数，而 state 则类似于函数内部声明的变量。

    总结表格

    特性	State	Props
    管理方	组件自身	父组件
    可变性	是	否（只读）
    作用域	组件内部	从父组件传递到子组件
    用途	管理动态数据和 UI 变化	配置和自定义组件
    更新方式	使用 setState/useState	组件自身无法更新

    ---

    ⬆ Back to Top

12. HTML 和 React 事件处理有什么区别？

    以下是 HTML 和 React 事件处理之间的一些主要区别：

    1. 在 HTML 中，事件名称通常按照约定使用小写：

       <button onclick="activateLasers()"></button>
       

       而在 React 中，事件名称遵循驼峰式命名约定：

       <button onClick={activateLasers}>
       

    2. 在 HTML 中，可以返回 false 来阻止默认行为：

       <a
         href="#"
         onclick='console.log("链接被点击。"); return false;'
       />
       

       而在 React 中，必须显式调用 preventDefault()：

       function handleClick(event) {
         event.preventDefault();
         console.log("链接被点击。");
       }
       

    3. 在 HTML 中，需要通过添加 () 来调用函数。 而在 React 中，不应在函数名后添加 ()。（例如，参考第一点中的 "activateLasers" 函数）

    ⬆ Back to Top

13. React 中的合成事件是什么？

    SyntheticEvent 是浏览器原生事件的跨浏览器包装器。它的 API 与浏览器原生事件相同，包括 stopPropagation() 和 preventDefault()，不同的是这些事件在所有浏览器中的工作方式都一致。可以通过 nativeEvent 属性从合成事件中直接访问原生事件。

    让我们以一个具有获取所有原生事件属性功能的 BookStore 标题搜索组件为例：

    function BookStore() {
      function handleTitleChange(e) {
        console.log("新标题是：", e.target.value);
        console.log('合成事件：', e); // React 合成事件
        console.log('原生事件：', e.nativeEvent); // 浏览器原生事件
        e.stopPropagation();
        e.preventDefault();
      }
    
      return <input name="title" onChange={handleTitleChange} />;
    }
    

    常见的合成事件列表包括：

    • onClick
    • onChange
    • onSubmit
    • onKeyDown、onKeyUp
    • onFocus、onBlur
    • onMouseEnter、onMouseLeave
    • onTouchStart、onTouchEnd

    ⬆ Back to Top

14. 什么是内联条件表达式？

    你可以使用 JS（以及 React 中的 JSX）中可用的 if 语句或三元表达式来有条件地执行或渲染表达式。除了这些方法，你还可以通过将任何表达式用花括号包裹，然后跟上 JS 逻辑运算符 &&，将其嵌入到 JSX 中。这有助于在单行内有条件地渲染元素，并且常用于简洁的逻辑，尤其是在 JSX 渲染中。

    <h1>Hello!</h1>;
    {
      messages.length > 0 && !isLogin ? (
        <h2>你有 {messages.length} 条未读消息。</h2>
      ) : (
        <h2>你没有未读消息。</h2>
      );
    }
    

    ⬆ Back to Top

15. 什么是“key” prop？在元素数组中使用它有什么好处？

    key 是在映射数组以渲染数据时应该包含的一个特殊属性。Key prop 帮助 React 识别哪些项目已更改、已添加或已删除。

    键在其兄弟元素中应该是唯一的。大多数情况下，我们使用数据中的 ID 作为 key：

    const todoItems = todos.map((todo) => <li key={todo.id}>{todo.text}</li>);
    

    当没有用于渲染项目的稳定 ID 时，你可以将项目的 index 作为 key 作为最后的手段：

    const todoItems = todos.map((todo, index) => (
      <li key={index}>{todo.text}</li>
    ));
    

    key 的好处：

    • 使 React 能够高效地更新和重新渲染组件。
    • 通过在可能时重用组件来防止不必要的重新渲染。
    • 帮助正确维护列表项的内部状态。

    注意：

    1. 如果项目的顺序可能改变，不建议使用 indexes 作为 keys。这可能会对性能产生负面影响，并可能导致组件状态出现问题。
    2. 如果你将列表项提取为单独的组件，那么应将 keys 应用于列表组件，而不是 li 标签。
    3. 如果列表项上没有 key prop，控制台会显示警告消息。
    4. key 属性接受字符串或数字，并在内部将其转换为字符串类型。
    5. 不要动态生成 key，例如 key={Math.random()}。因为在重新渲染之间，键将永远不匹配，并且每次都会创建 DOM。

    ⬆ Back to Top

16. 什么是虚拟 DOM（Virtual DOM）？

    虚拟 DOM（VDOM）是一种轻量级的、内存中的 真实 DOM 表示，被 React 等库用于优化 UI 渲染。UI 的表示保存在内存中，并与“真实”DOM 同步。这是在调用 render 函数和在屏幕上显示元素之间发生的一个步骤。整个过程称为 协调（reconciliation）。

    ⬆ Back to Top

17. 虚拟 DOM 是如何工作的？

    虚拟 DOM 的工作分为五个简单步骤。

    1. 初始渲染
    当 UI 组件首次渲染时，它会返回 JSX。React 使用此结构创建一个虚拟 DOM 树，这是实际 DOM 的轻量级副本。然后，这个虚拟 DOM 用于在浏览器中构建和渲染真实 DOM。

    2. 状态或属性变化
    当组件的 state 或 props 发生变化时，React 会创建一个反映更新后 UI 的新虚拟 DOM。但是，它不会立即更新真实 DOM；相反，它在内存中工作，为高效更新做准备。

    

    3. 差异算法（Diffing Algorithm）
    然后，React 使用称为差异比较（diffing）的过程将新的虚拟 DOM 与之前的虚拟 DOM 进行比较。它确定两个版本之间发生了什么变化，并识别所需的最小更新集。

    

    4. 协调（Reconciliation）
    根据差异比较的结果，React 决定应该更新真实 DOM 的哪些部分。它避免重新渲染整个 DOM，而是只更新实际发生变化的元素。

    

    5. 高效的 DOM 更新
    整个过程——使用虚拟 DOM、差异比较和选择性更新——使得 UI 渲染比直接操作真实 DOM 更快、更高效。

    ⬆ Back to Top

18. 影子 DOM（Shadow DOM）和虚拟 DOM（Virtual DOM）有什么区别？

    影子 DOM 是一种浏览器技术，主要用于 Web 组件 中的变量和 CSS 作用域隔离。虚拟 DOM 是 JavaScript 库在浏览器 API 之上实现的一个概念。

    下面以表格形式展示主要区别：

    特性	影子 DOM	虚拟 DOM
    目的	Web 组件的封装	高效的 UI 渲染
    管理方	浏览器	JS 框架（如 React）
    DOM 类型	真实 DOM 的一部分（作用域隔离）	内存中的表示
    封装性	是	否
    使用场景	Web 组件、作用域样式	UI 差异比较和最小 DOM 更新

    ⬆ Back to Top

19. 什么是 React Fiber？

    React Fiber 是 React 中的新协调引擎，在 React 16 中引入。它是对 React 核心渲染和更新 UI 算法（旧的基于栈的算法）的完全重写。Fiber 增强了 React 处理异步渲染、优先级更新（为不同类型的更新分配优先级）和中断（暂停、中止或重用工作的能力）渲染工作的能力，从而实现更流畅、更响应的用户界面。

    ⬆ Back to Top

20. React Fiber 的主要目标是什么？

    React Fiber 的目标是提高其在动画、布局和手势等领域的适用性。其核心特性是增量渲染：能够将渲染工作拆分为多个块，并在多个帧中分散进行。

    其主要目标包括：

    • 增量渲染 – 将工作分解为块，以实现更平滑的更新。
    • 可中断渲染 – 暂停和恢复渲染以保持 UI 的响应性。
    • 优先级排序 – 在低优先级更新之前处理高优先级更新（例如动画）。
    • 并发支持 – 允许同时处理多个 UI 版本。
    • 更好的错误处理 – 支持组件级别的错误边界。
    • Suspense 支持 – 允许在渲染前等待异步数据。
    • 改进的开发工具 – 实现更好的调试和性能跟踪。

    ⬆ Back to Top

21. 什么是受控组件？

    受控组件是一个 React 组件，它完全使用 React 的内部状态机制管理表单元素的状态（例如 <input>、<textarea> 或 <select> 等元素）。也就是说，该组件不管理自己的内部状态——相反，React 充当表单数据的单一数据源。

    受控组件的实现步骤如下：

    1. 在函数组件中使用 useState hooks 初始化状态，或在类组件的构造函数中初始化状态。
    2. 将表单元素的值设置为相应的状态变量。
    3. 创建一个事件处理函数（onChange），通过 useState 的更新函数或类组件的 setState 来处理用户输入的变化。
    4. 将上述事件处理函数附加到表单元素的 change 或 click 事件上

    注意： 每次输入值变化时，React 都会重新渲染组件。

例如，名称输入字段通过 handleChange 事件处理函数更新用户名，如下所示：

   import React, { useState } from "react";

   function UserProfile() {
     const [username, setUsername] = useState("");

     const handleChange = (e) => {
       setUsername(e.target.value);
     };

     return (
       <form>
         <label>
           Name:
           <input type="text" value={username} onChange={handleChange} />
         </label>
       </form>
     );
   }

在这些组件中，DOM 并不存储实际数据，而是由 React 来管理数据。

优势：

• 易于实现验证、条件格式化或实时反馈。
  • 完全控制表单数据。
  • 数据集中在组件的 state 中，因此更易于测试和调试。

⬆ 返回顶部

22. 什么是非受控组件？

    非受控组件是指那些（如 <input>、<textarea> 或 <select> 等）通过 DOM 内部管理自身状态，而非通过 React state 管理状态的表单元素。 当你需要获取其当前值时，可以使用 ref 查询 DOM。这有点类似于传统的 HTML 方式。

    实现非受控组件需要以下步骤：

    1. 在函数组件中使用 useRef React Hook 创建一个 ref，或在类组件中使用 React.createRef() 创建 ref。
    2. 将此 ref 附加到表单元素上。
    3. 可以在事件处理函数中，或在类组件的 componentDidMount 生命周期方法中，通过 ref 直接访问表单元素的值。

    在下面的 UserProfile 组件中，username 输入框通过 ref 进行访问。

    import React, { useRef } from "react";
    
    function UserProfile() {
      const usernameRef = useRef(null);
    
      const handleSubmit = (event) => {
        event.preventDefault();
        console.log("The submitted username is: " + usernameRef.current.value);
      };
    
      return (
        <form onSubmit={handleSubmit}>
          <label>
            Username:
            <input type="text" ref={usernameRef} />
          </label>
          <button type="submit">Submit</button>
        </form>
      );
    }
    

    注意： 在这里，DOM 负责管理值。React 仅在需要时（通过 ref）访问该值。

    优势：

    • 代码量更少 — 无需使用 useState 和 onChange。
    • 适用于快速搭建表单或与非 React 代码集成的场景。
    • 在非常大型的表单中，性能会略好一些（重新渲染次数更少）。

    在大多数情况下，建议使用受控组件来实现表单。在受控组件中，表单数据由 React 组件处理。另一种选择是非受控组件，其中表单数据由 DOM 本身处理。

    查看类组件示例

    class UserProfile extends React.Component {
      constructor(props) {
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.input = React.createRef();
      }
    
      handleSubmit(event) {
        alert("A name was submitted: " + this.input.current.value);
        event.preventDefault();
      }
    
      render() {
        return (
          <form onSubmit={this.handleSubmit}>
            <label>
              {"Name:"}
              <input type="text" ref={this.input} />
            </label>
            <input type="submit" value="Submit" />
          </form>
        );
      }
    }
    

⬆ 返回顶部

23. createElement 和 cloneElement 有什么区别？

    React.createElement 和 React.cloneElement 都用于处理 React 元素，但它们的用途不同。

    createElement：

    从头创建一个新的 React 元素。JSX 元素会被转译为 React.createElement() 函数，以创建用于 UI 对象表示的 React 元素。 语法：

    React.createElement(type, props, ...children)
    

    示例：

    React.createElement('button', { className: 'btn' }, 'Click Me')
    

    cloneElement：

    cloneElement 方法用于克隆现有的 React 元素，并可选择性地添加或覆盖属性。

    语法：

    React.cloneElement(element, newProps, ...children)
    

    示例：

    const button = <button className="btn">Click Me</button>;
    const cloned = React.cloneElement(button, { className: 'btn-primary' });
    // 结果：<button className="btn-primary">Click Me</button>
    

    ⬆ 返回顶部

24. React 中的“状态提升”是什么？

    当多个组件需要共享相同的变化数据时，建议将共享状态“提升”到它们最近的共同祖先组件。也就是说，如果两个子组件从其父组件共享相同的数据，那么应将状态移至父组件，而不是在两个子组件中都维护本地状态。

    ⬆ 返回顶部

25. 什么是高阶组件？

    高阶组件（HOC）是一个接收组件并返回一个具有额外属性、行为或数据的新增强组件的函数。它是一种基于 React 组合特性的设计模式，允许在不修改组件内部的情况下跨多个组件重用逻辑。

    我们认为 HOC 是纯组件，因为它们不会修改或复制原始组件的行为——它们只是包装原始组件、增强它，并传递必要的属性。被包装的组件保持解耦且可重用。

    const EnhancedComponent = higherOrderComponent(WrappedComponent);
    

    让我们以 React 中的 withAuth 高阶组件（HOC）为例。这个 HOC 将检查用户是否已认证，如果已认证则渲染被包装的组件，如果未认证则重定向（或显示消息）。

    withAuth HOC 示例：

    import React from 'react';
    import { Navigate } from 'react-router-dom'; // 用于重定向（假设使用 React Router v6）
    
    const isAuthenticated = () => {
      // 例如，检查 localStorage 或上下文中的有效令牌
      return !!localStorage.getItem('authToken');
    };
    
    function withAuth(WrappedComponent) {
      return function AuthenticatedComponent(props) {
        if (!isAuthenticated()) {
          // 用户未认证，重定向到登录页面
          return <Navigate to="/login" replace />;
        }
    
        // 用户已认证，渲染被包装的组件
        return <WrappedComponent {...props} />;
      };
    }
    
    export default withAuth;
    

    用法

    import React from 'react';
    import withAuth from './withAuth';
    
    function Dashboard() {
      return <h1>欢迎来到仪表盘！</h1>;
    }
    
    // 用 withAuth HOC 包装 Dashboard
    export default withAuth(Dashboard);
    

    HOC 可用于许多场景：

    1. 代码重用、逻辑和引导抽象（例如，数据获取、权限控制、主题设置）。
    2. 渲染劫持（例如，条件渲染或布局更改）。
    3. 状态抽象和操作（例如，处理表单逻辑）。
    4. 属性操作（例如，注入额外属性或过滤属性）。

    React 生态系统中 HOC 的一些实际例子：

    1. react-redux 中的 connect()
    2. React Router v5 中的 withRouter()
    3. react-i18next 中的 withTranslation()
    4. Apollo client 中的 withApollo()
    5. Formik 库中的 withFormik
    6. styled components 中的 withTheme

    ⬆ 返回顶部

26. 什么是 children 属性？

    children 属性是 React 中的一个特殊属性，用于在组件的开始和结束标签之间传递元素。它常用于布局和包装组件。

    children 属性的简单用法如下：

    function MyDiv({ children }){
        return (
          <div>
            {children}
          </div>;
        );
    }
    
    export default function Greeting() {
      return (
        <MyDiv>
          <span>{"Hello"}</span>
          <span>{"World"}</span>
        </MyDiv>
      );
    }
    

    这里，<MyDiv>...</MyDiv> 内部的所有内容都作为 children 传递给自定义 div 组件。

    children 可以是文本、JSX 元素、片段、数组和函数（用于高级用例，如渲染属性）。

    查看类组件用法

    const MyDiv = React.createClass({
      render: function () {
        return <div>{this.props.children}</div>;
      },
    });
    
    ReactDOM.render(
      <MyDiv>
        <span>{"Hello"}</span>
        <span>{"World"}</span>
      </MyDiv>,
      node
    );
    

    注意： 旧版 React API 中有几个方法可用于处理此属性。这些方法包括 React.Children.map、React.Children.forEach、React.Children.count、React.Children.only、React.Children.toArray。

    ⬆ 返回顶部

27. 如何在 React 中写注释？

    React/JSX 中的注释类似于 JavaScript 的多行注释，但需要用花括号包裹。

    单行注释：

    <div>
      {/* 单行注释（在原生 JavaScript 中，单行注释用双斜杠 // 表示） */}
      {`Welcome ${user}, let's play React`}
    </div>
    

    多行注释：

    <div>
      {/* 多行注释用于
       多行内容 */}
      {`Welcome ${user}, let's play React`}
    </div>
    

    你可以在 JS 逻辑、钩子和函数中使用 // 和 /* */。

    ⬆ 返回顶部

28. 什么是协调（Reconciliation）？

    协调是 React 更新浏览器 DOM 并使 React 运行更快的过程。React 使用差异算法，使组件更新具有可预测性且更快。当组件有更新时，React 会首先计算真实 DOM和 DOM 副本（虚拟 DOM）之间的差异。 React 存储浏览器 DOM 的一个副本，称为虚拟 DOM。当我们进行更改或添加数据时，React 会创建一个新的虚拟 DOM 并将其与之前的虚拟 DOM 进行比较。这种比较由差异算法完成。 现在 React 会将虚拟 DOM 与真实 DOM 进行比较。它找出已更改的节点，并仅更新真实 DOM 中已更改的节点，其余节点保持不变。这个过程称为协调。

    ⬆ 返回顶部

29. lazy 函数支持命名导出吗？

    不，目前 React.lazy 函数仅支持默认导出。如果你想导入命名导出的模块，可以创建一个中间模块，将其重新导出为默认导出。这也确保了树摇（tree shaking）能够正常工作，不会引入未使用的组件。 让我们以一个导出多个命名组件的组件文件为例：

    // MoreComponents.js
    export const SomeComponent = /* ... */;
    export const UnusedComponent = /* ... */;
    

    然后在中间文件 IntermediateComponent.js 中重新导出 MoreComponents.js 的组件：

    // IntermediateComponent.js
    export { SomeComponent as default } from "./MoreComponents.js";
    

    现在你可以使用 lazy 函数导入该模块，如下所示：

    import React, { lazy } from "react";
    const SomeComponent = lazy(() => import("./IntermediateComponent.js"));
    

    ⬆ 返回顶部

30. React 为什么使用 className 而不是 class 属性？

    React 使用 className 而不是 class，是因为与 JavaScript 中的 class 关键字存在命名冲突。

    1. class 是 JavaScript 中的保留关键字 在 JavaScript 中，class 用于定义 ES6 类：

       class Person {
         constructor(name) {
           this.name = name;
         }
       }
       

       如果你尝试将 class 用作变量名或属性名，会抛出语法错误。由于 JSX 本质上是带有类 XML 语法的 JavaScript，直接在 JSX 中使用 class 会导致解析器出错。

    2. JSX 是 JavaScript

       当你编写如下 JSX 时：

       <div class="btn">Click</div>
       

       它会被编译为：

       React.createElement('div', { class: 'btn' }, 'Click');
       

       但是在对象字面量上下文中，class 是无效的（因为它与 JS 关键字冲突），因此 React 改用 className。

       <div className="btn">Click</div>
       

       这会被编译为：

       React.createElement('div', { className: 'btn' }, 'Click');
       

       React 随后会在最终的 HTML DOM 中将 className 转换为 class。

    3. 与 DOM API 保持一致 在原生 JavaScript 中，你使用以下方式操作元素的类：

       element.className = 'my-class';
       

       React 遵循此约定，与 DOM API 的属性名称保持一致，而不是 HTML 的属性名称。

    ⬆ 返回顶部

31. 什么是片段（Fragments）？

    在 React 中，组件返回多个元素是一种常见的模式或做法。片段允许你将子元素列表分组，而无需向 DOM 添加额外的节点。 你需要使用 <Fragment> 或更简短的空标签语法 (<></>)。

    以下是如何在 Story 组件中使用片段的示例。

    function Story({ title, description, date }) {
      return (
        <Fragment>
          <h2>{title}</h2>
          <p>{description}</p>
          <p>{date}</p>
        </Fragment>
      );
    }
    

    也可以在循环中渲染片段列表，并必须提供 key 属性。

    function StoryBook() {
      return stories.map((story) => (
        <Fragment key={story.id}>
          <h2>{story.title}</h2>
          <p>{story.description}</p>
          <p>{story.date}</p>
        </Fragment>
      ));
    }
    

    通常，除非需要 key 属性，否则你不需要使用 <Fragment>。更简短的语法用法如下：

    function Story({ title, description, date }) {
      return (
        <>
          <h2>{title}</h2>
          <p>{description}</p>
          <p>{date}</p>
        </>
      );
    }
    

    ⬆ 返回顶部

32. 为什么片段比容器 div 更好？

    以下是倾向于使用片段而非容器 DOM 元素的原因列表：

    1. 片段不会创建额外的 DOM 节点，因此速度更快，内存占用更少。这在非常大且深的树结构上才有实际好处。
    2. 某些 CSS 机制（如 Flexbox 和 CSS Grid）具有特殊的父子关系，在中间添加 div 会难以保持所需的布局。
    3. DOM 检查器的杂乱程度更低。

    ⬆ 返回顶部

33. React 中的门户（Portals）是什么？

    门户（Portal）是 React 的一项功能，它允许将子元素渲染到存在于父组件 DOM 层次结构之外的 DOM 节点中，同时仍然保留 React 组件层次结构。门户有助于避免 CSS 堆叠问题——例如，position: fixed 的元素在具有 transform 的父元素内部可能无法按预期工作。门户通过将内容（如模态框或工具提示）渲染到此类受限 DOM 上下文之外来解决此问题。

    ReactDOM.createPortal(child, container);
    

    • child：任何有效的 React 节点（例如，JSX、字符串、片段）。
    • container：一个真实的 DOM 节点（例如，document.getElementById('modal-root')）。

    即使内容在 DOM 的其他位置渲染，它在 React 中仍然表现得像一个普通的子组件。它可以访问上下文、状态和事件处理。

    示例：模态框

    function Modal({ children }) {
      return ReactDOM.createPortal(
        <div className="modal">{children}</div>,
        document.body)
      );
    }
    

    上面的代码会将模态框内容渲染到 HTML 中的 body 元素内，而不是组件通常所在的位置。

    ⬆ 返回顶部

34. 什么是无状态组件？

    如果组件的行为与其状态无关，则它可以是无状态组件。你可以使用函数或类来创建无状态组件。但除非你需要在组件中使用生命周期钩子，否则应该选择函数组件。如果你决定在这里使用函数组件，会有很多好处：它们易于编写、理解和测试，速度稍快，并且你可以完全避免使用 this 关键字。

    ⬆ 返回顶部

35. 什么是有状态组件？

    如果组件的行为依赖于组件的状态，则它可以被称为有状态组件。这些有状态组件要么是使用钩子的函数组件，要么是类组件。

    让我们以一个函数式有状态组件为例，它基于点击事件更新状态：

    import React, {useState} from 'react';
    
    const App = (props) => {
    const [count, setCount] = useState(0);
    const handleIncrement = () => {
      setCount(count + 1);
    }
    
    return (
      <>
        <button onClick={handleIncrement}>Increment</button>
        <span>Counter: {count}</span>
      </>
      )
    }
    

    查看类组件

    等效的类有状态组件，其状态在 `constructor` 中初始化。

    class App extends Component {
      constructor(props) {
        super(props);
        this.state = { count: 0 };
        this.handleIncrement = this.handleIncrement.bind(this);
      }
    
      handleIncrement() {
        this.setState({ count: this.state.count + 1 });
      }
    
      render() {
        return (
          <>
            <button onClick={this.handleIncrement}>Increment</button>
            <span>Count: {this.state.count}</span>
          </>
        );
      }
    }
    

    ⬆ 返回顶部

36. 如何在 React 中对属性（props）进行验证？

    当应用程序在开发模式下运行时，React 会自动检查我们在组件上设置的所有属性，以确保它们具有正确的类型。如果类型不正确，React 会在控制台中生成警告消息。由于性能影响，它在生产模式下是禁用的。必需的属性用 isRequired 定义。

    预定义的属性类型集：

    1. PropTypes.number
    2. PropTypes.string
    3. PropTypes.array
    4. PropTypes.object
    5. PropTypes.func
    6. PropTypes.node
    7. PropTypes.element
    8. PropTypes.bool
    9. PropTypes.symbol
    10. PropTypes.any

    我们可以为 User 组件定义 propTypes 如下：

    import React from "react";
    import PropTypes from "prop-types";
    
    class User extends React.Component {
      static propTypes = {
        name: PropTypes.string.isRequired,
        age: PropTypes.number.isRequired,
      };
    
      render() {
        return (
          <>
            <h1>{`Welcome, ${this.props.name}`}</h1>
            <h2>{`Age, ${this.props.age}`}</h2>
          </>
        );
      }
    }
    

    注意： 在 React v15.5 中，PropTypes 已从 React.PropTypes 移至 prop-types 库。

    现代推荐： 虽然 PropTypes 仍然受支持，但TypeScript 现在是 React 应用程序中类型检查的行业标准。考虑使用 TypeScript 以获得更好的类型安全性、IDE 支持和编译时错误检测。

    等效的函数组件

    import React from "react";
    import PropTypes from "prop-types";
    
    function User({ name, age }) {
      return (
        <>
          <h1>{`Welcome, ${name}`}</h1>
          <h2>{`Age, ${age}`}</h2>
        </>
      );
    }
    
    User.propTypes = {
      name: PropTypes.string.isRequired,
      age: PropTypes.number.isRequired,
    };
    

    现代 TypeScript 版本

    import React from "react";
    
    interface UserProps {
      name: string;
      age: number;
    }
    
    function User({ name, age }: UserProps) {
      return (
        <>
          <h1>{`Welcome, ${name}`}</h1>
          <h2>{`Age, ${age}`}</h2>
        </>
      );
    }
    

    ⬆ 返回顶部

37. React 的优点是什么？

    以下是 React 的主要优点列表：

    1. 通过虚拟 DOM 提高应用程序性能。
    2. JSX 使代码易于阅读和编写。
    3. 它可以在客户端和服务器端（SSR）渲染。
    4. 易于与其他框架（Angular、Backbone）集成，因为它只是一个视图库。
    5. 易于使用 Jest 等工具编写单元测试和集成测试。

    ⬆ 返回顶部

38. React 的局限性是什么？

    除了优点之外，React 也有一些局限性：

    1. React 只是一个视图库，不是一个完整的框架。
    2. 对于刚接触 Web 开发的初学者来说有一定的学习曲线。
    3. 将 React 集成到传统的 MVC 框架中需要一些额外的配置。
    4. 内联模板和 JSX 增加了代码的复杂性。
    5. 过多的小组件可能导致过度工程化或样板代码。

    ⬆ 返回顶部

39. 静态类型检查的推荐方法有哪些？

    现代推荐（2026）： TypeScript 是 React 应用程序中类型检查的行业标准。

    虽然 PropTypes（自 React v15.5 起，React.PropTypes 已移至 prop-types 包）仍可用于运行时类型检查，但它们有明显的局限性：

    • 仅在运行时检查类型
    • 无编译时错误
    • IDE 自动完成支持有限
    • 对复杂类型无推断能力

    TypeScript 现在是推荐的方法，因为它提供：

    • 编译时类型检查
    • 出色的 IDE 支持（带有 IntelliSense）
    • 类型推断和泛型
    • 更好的重构能力
    • 不断增长的生态系统和社区支持

    注意： Flow（Facebook 的类型检查器）的采用率一直在下降，在新项目中很少使用。

    TypeScript 示例：

    interface UserProps {
      name: string;
      age: number;
      isActive?: boolean;
    }
    
    function User({ name, age, isActive = true }: UserProps) {
      return <div>{name} - {age}</div>;
    }
    

    ⬆ 返回顶部

40. react-dom 包的用途是什么？

    react-dom 包提供了特定于 DOM 的方法，可用于应用程序的顶层。大多数组件不需要使用此模块。该包的一些方法包括：

    1. render()
    2. hydrate()
    3. unmountComponentAtNode()
    4. findDOMNode()
    5. createPortal()

    ⬆ 返回顶部

41. 什么是 ReactDOMServer？

ReactDOMServer 对象能让你将组件渲染为静态标记（通常用于 node 服务器）。该对象主要用于服务器端渲染（SSR）。以下方法可同时在服务器和浏览器环境中使用：

1. renderToString()
2. renderToStaticMarkup()

例如，你通常会运行一个基于 Node 的 Web 服务器，如 Express、Hapi 或 Koa，然后调用 renderToString 将根组件渲染为字符串，再将其作为响应发送。

// using Express
import { renderToString } from "react-dom/server";
import MyPage from "./MyPage";

app.get("/", (req, res) => {
  res.write(
    "<!DOCTYPE html><html><head><title>My Page</title></head><body>"
  );
  res.write('<div id="content">');
  res.write(renderToString(<MyPage />));
  res.write("</div></body></html>");
  res.end();
});

⬆ Back to Top

42. 如何在 React 中使用 innerHTML？

dangerouslySetInnerHTML 属性是 React 中用于替代浏览器 DOM 中 innerHTML 的方案。和 innerHTML 一样，使用此属性存在跨站脚本（XSS）攻击的风险。你只需传递一个以 __html 为键、HTML 文本为值的对象即可。

在以下示例中，MyComponent 使用 dangerouslySetInnerHTML 属性来设置 HTML 标记：

function createMarkup() {
  return { __html: "First · Second" };
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

⬆ Back to Top

43. 如何在 React 中使用样式？

style 属性接受一个具有小驼峰命名（camelCased）属性的 JavaScript 对象，而非 CSS 字符串。这与 DOM 样式的 JavaScript 属性访问方式一致，更高效，且能防止 XSS 安全漏洞。

const divStyle = {
  color: "blue",
  backgroundImage: "url(" + imgUrl + ")",
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

样式键采用小驼峰命名，以与 JavaScript 中访问 DOM 节点属性的方式保持一致（例如 node.style.backgroundImage）。

⬆ Back to Top

44. React 中的事件有何不同？

在 React 元素中处理事件存在一些语法差异：

1. React 事件处理函数采用小驼峰命名（camelCase），而非全小写。
2. 在 JSX 中，你传递一个函数作为事件处理程序，而非字符串。

⬆ Back to Top

45. 使用索引作为 key 有什么影响？

key 应该是稳定的、可预测的和唯一的，这样 React 才能跟踪元素。

在下面的代码片段中，每个元素的 key 基于其排列顺序，而非与其所表示的数据相关联。这限制了 React 可进行的优化，并可能在应用中产生令人困惑的 bug。

{
  todos.map((todo, index) => <Todo {...todo} key={index} />);
}

如果你使用元素数据作为唯一 key（假设 todo.id 对于此列表是唯一且稳定的），React 将能够在不需要过多重新评估元素的情况下对其进行重新排序。

{
  todos.map((todo) => <Todo {...todo} key={todo.id} />);
}

注意： 如果你根本不指定 key 属性，React 在遍历数据数组时会将索引用作 key 的值。

⬆ Back to Top

46. 如何有条件地渲染组件？

在某些情况下，你希望根据某些状态渲染不同的组件。JSX 不会渲染 false 或 undefined，因此你可以使用条件短路运算，仅当特定条件为 true 时才渲染组件的特定部分。

const MyComponent = ({ name, address }) => (
  <div>
    <h2>{name}</h2>
    {address && <p>{address}</p>}
  </div>
);

如果你需要 if-else 条件，可以使用三元运算符。

const MyComponent = ({ name, address }) => (
  <div>
    <h2>{name}</h2>
    {address ? <p>{address}</p> : <p>{"Address is not available"}</p>}
  </div>
);

⬆ Back to Top

47. 为什么在 DOM 元素上展开 props 时需要小心？

当我们展开 props 时，可能会添加未知的 HTML 属性，这是一种不良实践。相反，我们可以使用带有 ...rest 运算符的 prop 解构，这样只会添加所需的 props。

例如：

const ComponentA = () => (
  <ComponentB isDisplay={true} className={"componentStyle"} />
);

const ComponentB = ({ isDisplay, ...domProps }) => (
  <div {...domProps}>{"ComponentB"}</div>
);

⬆ Back to Top

48. 如何记忆化（memoize）一个组件？

有一些记忆化库可用于函数组件。

例如，moize 库可以在另一个组件中记忆化组件。

import moize from "moize";
import Component from "./components/Component"; // 此模块导出一个非记忆化的组件

const MemoizedFoo = moize.react(Component);

const Consumer = () => {
  <div>
    {"I will memoize the following entry:"}
    <MemoizedFoo />
  </div>;
};

更新： 从 React v16.6.0 开始，我们有了 React.memo。它提供了一个高阶组件，该组件会记忆化组件，除非 props 发生变化。要使用它，只需在使用组件之前用 React.memo 包装它。

const MemoComponent = React.memo(function MemoComponent(props) {
  /* 使用 props 进行渲染 */
});
或者;
export default React.memo(MyFunctionComponent);

⬆ Back to Top

49. 如何实现服务器端渲染（SSR）？

React 已经具备在 Node 服务器上进行渲染的能力。有一个特殊版本的 DOM 渲染器可用，它遵循与客户端相同的模式。

import ReactDOMServer from "react-dom/server";
import App from "./App";

ReactDOMServer.renderToString(<App />);

此方法会将常规 HTML 输出为字符串，然后可以将其作为服务器响应的一部分放置在页面主体中。在客户端，React 会检测到预渲染的内容，并无缝地从停止的地方继续执行。

⬆ Back to Top

50. 如何在 React 中启用生产模式？

你应该使用 Webpack 的 DefinePlugin 方法将 NODE_ENV 设置为 production，这样可以去除诸如 propType 验证和额外警告之类的内容。除此之外，如果你对代码进行压缩（例如，使用 Uglify 的死代码消除功能来去除仅开发环境的代码和注释），将会显著减小你的 bundle 大小。

⬆ Back to Top

51. Hooks 是否取代了 render props 和高阶组件？

render props 和高阶组件都只渲染单个子组件，但在大多数情况下，Hooks 通过减少组件树中的嵌套，提供了一种更简单的方式来实现相同的功能。

⬆ Back to Top

52. 什么是切换组件（switching component）？

切换组件是一个可以渲染多个组件中的一个的组件。我们需要使用对象将 prop 值映射到组件。

例如，一个根据 page prop 显示不同页面的切换组件：

import HomePage from "./HomePage";
import AboutPage from "./AboutPage";
import ServicesPage from "./ServicesPage";
import ContactPage from "./ContactPage";

const PAGES = {
  home: HomePage,
  about: AboutPage,
  services: ServicesPage,
  contact: ContactPage,
};

const Page = (props) => {
  const Handler = PAGES[props.page] || ContactPage;

  return <Handler {...props} />;
};

// PAGES 对象的键可以用在 propTypes 中，以捕获开发时错误。
Page.propTypes = {
  page: PropTypes.oneOf(Object.keys(PAGES)).isRequired,
};

⬆ Back to Top

54. React 支持哪些指针事件（Pointer Events）？

指针事件提供了一种统一的方式来处理所有输入事件。在过去，我们只有鼠标和相应的事件监听器来处理它们，但现在我们有许多与鼠标无关的设备，例如带有触摸表面的手机或手写笔。需要记住的是，这些事件仅在支持指针事件规范的浏览器中有效。

以下事件类型现在在React DOM中可用：

1. onPointerDown
2. onPointerMove
3. onPointerUp
4. onPointerCancel
5. onGotPointerCapture
6. onLostPointerCapture
7. onPointerEnter
8. onPointerLeave
9. onPointerOver
10. onPointerOut

⬆ Back to Top

55. 为什么组件名称应该以大写字母开头？

如果你使用 JSX 渲染组件，该组件的名称必须以大写字母开头，否则 React 会将其视为未识别的标签并抛出错误。此约定是因为只有 HTML 元素和 SVG 标签可以以小写字母开头。

function SomeComponent {
  // 代码写在这里
}

你可以定义名称以小写字母开头的函数组件，但在导入时它应该有一个大写字母。这里小写是可以的：

function myComponent {
  render() {
    return <div />;
  }
}

export default myComponent;

而在另一个文件中导入时，它应该以大写字母开头：

import MyComponent from "./myComponent";

⬆ Back to Top

56. React v16 是否支持自定义 DOM 属性？

注意： 此问题引用的是 React v16，该版本已过时。以下信息适用于 React 16+，包括当前版本（React 18/19）。

是的。从 React 16 开始，React 不再忽略未知的 DOM 属性。如果你在 JSX 中编写了一个 React 无法识别的属性，React 会将其传递到 DOM 中。

例如，让我们看一下下面的属性：

<div mycustomattribute={"something"} />

在 React 15 及更早版本中，这将渲染一个空的 div：

<div />

在 React 16 及更高版本（包括 React 18/19）中，任何未知的属性都将出现在 DOM 中：

<div mycustomattribute="something" />

这对于提供特定于浏览器的非标准属性、尝试新的 DOM API 以及与有特定要求的第三方库集成非常有用。

⬆ Back to Top

57. 如何在 JSX 中进行循环？

你可以简单地使用 Array.prototype.map 和 ES6箭头函数语法。

例如，将对象数组 items 映射为组件数组：

<tbody>
  {items.map((item) => (
    <SomeComponent key={item.id} name={item.name} />
  ))}
</tbody>

但是你不能使用 for 循环：

<tbody>
  for (let i = 0; i < items.length; i++) {
    <SomeComponent key={items[i].id} name={items[i].name} />
  }
</tbody>

这是因为 JSX 标签会被 transpile 为函数调用，而你不能在表达式内部使用语句。这可能会随着 do 表达式（目前是 stage 1 提案）的出现而改变。

⬆ Back to Top

58. 如何在属性引号中访问 props？

React（或 JSX）不支持在属性值内部进行变量插值。下面的表示方式将无法工作：

<img className="image" src="images/{this.props.image}" />

但是你可以将任何 JS 表达式放在花括号中作为整个属性值。因此下面的表达式可以工作：

<img className="image" src={"images/" + this.props.image} />

使用模板字符串也可以：

<img className="image" src={`images/${this.props.image}`} />

⬆ Back to Top

59. 什么是 React proptype array with shape？

如果你想将一个具有特定形状的对象数组传递给组件，那么可以将 React.PropTypes.shape() 作为参数传递给 React.PropTypes.arrayOf()。

ReactComponent.propTypes = {
  arrayWithShape: React.PropTypes.arrayOf(
    React.PropTypes.shape({
      color: React.PropTypes.string.isRequired,
      fontSize: React.PropTypes.number.isRequired,
    })
  ).isRequired,
};

⬆ Back to Top

60. 如何有条件地应用 class 属性？

你不应该在引号内使用花括号，因为它会被计算为字符串。

<div className="btn-panel {this.props.visible ? 'show' : 'hidden'}">

相反，你需要将花括号移到外面（不要忘记在类名之间包含空格）：

<div className={'btn-panel ' + (this.props.visible ? 'show' : 'hidden')}>

模板字符串也可以：

<div className={`btn-panel ${this.props.visible ? 'show' : 'hidden'}`}>

⬆ Back to Top

61. React 和 ReactDOM 有什么区别？

react 包包含 React.createElement()、React.Component、React.Children 以及其他与元素和组件类相关的辅助函数。你可以将这些视为构建组件所需的同构或通用辅助工具。react-dom 包包含 ReactDOM.render()，而在 react-dom/server 中，我们有 ReactDOMServer.renderToString() 和 ReactDOMServer.renderToStaticMarkup() 支持服务器端渲染。

⬆ Back to Top

62. 为什么 ReactDOM 与 React 分离？

React 团队致力于将所有与 DOM 相关的功能提取到一个名为ReactDOM的单独库中。React v0.14 是第一个拆分这些库的版本。通过查看一些包，如 react-native、react-art、react-canvas 和 react-three，我们可以清楚地看到 React 的美妙和本质与浏览器或 DOM 无关。

为了构建更多 React 可以渲染到的环境，React 团队计划将主要的 React 包拆分为两个：react 和 react-dom。这为编写可在 React Web 版本和 React Native 之间共享的组件铺平了道路。

⬆ Back to Top

63. 如何使用 React 的 label 元素？

如果你尝试使用标准的 for 属性渲染一个绑定到文本输入框的 <label> 元素，那么生成的 HTML 会缺少该属性，并向控制台打印一个警告。

<label for={'user'}>{'User'}</label>
<input type={'text'} id={'user'} />

由于 for 是 JavaScript 中的保留关键字，因此请改用 htmlFor。

<label htmlFor={'user'}>{'User'}</label>
<input type={'text'} id={'user'} />

⬆ Back to Top

64. 如何组合多个内联样式对象？

在常规 React 中，你可以使用展开运算符：

<button style={{ ...styles.panel.button, ...styles.panel.submitButton }}>
  {"Submit"}
</button>

如果你使用 React Native，那么可以使用数组表示法：

<button style={[styles.panel.button, styles.panel.submitButton]}>
  {"Submit"}
</button>

⬆ Back to Top

65. 如何在浏览器调整大小时重新渲染视图？

你可以使用 useState hook 来管理宽度和高度状态变量，并使用 useEffect hook 来添加和移除 resize 事件监听器。传递给 useEffect 的 [] 依赖数组确保该 effect 只运行一次（在挂载时），而不是在每次重新渲染时都运行。

import React, { useState, useEffect } from "react";
function WindowDimensions() {
  const [dimensions, setDimensions] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    function handleResize() {
      setDimensions({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    }
    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return (
    <span>
      {dimensions.width} x {dimensions.height}
    </span>
  );
}

class WindowDimensions extends React.Component {
  constructor(props) {
    super(props);
    this.updateDimensions = this.updateDimensions.bind(this);
  }

  componentWillMount() {
    this.updateDimensions();
  }

  componentDidMount() {
    window.addEventListener("resize", this.updateDimensions);
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.updateDimensions);
  }

  updateDimensions() {
    this.setState({
      width: window.innerWidth,
      height: window.innerHeight,
    });
  }

  render() {
    return (
      <span>
        {this.state.width} x {this.state.height}
      </span>
    );
  }
}

66. 如何在 React 中格式化打印 JSON？

我们可以使用 <pre> 标签，这样 JSON.stringify() 的格式就会被保留：

const data = { name: "John", age: 42 };

function User {
    return <pre>{JSON.stringify(data, null, 2)}</pre>;
}

const container = createRoot(document.getElementById("container"));

container.render(<User />);

  <details><summary><b>类组件示例</b></summary>
  <p>

```jsx harmony
const data = { name: "John", age: 42 };

class User extends React.Component {
  render() {
    return <pre>{JSON.stringify(data, null, 2)}</pre>;
  }
}

React.render(<User />, document.getElementById("container"));
```

  </p>
  </details>

⬆ Back to Top

67. 为什么不能在 React 中更新 props？

React 的设计理念是 props 应该是不可变的（只读）并且是自顶向下的。这意味着父组件可以向子组件发送任何 prop 值，但子组件不能修改接收到的 props。

⬆ Back to Top

68. 如何在页面加载时聚焦输入元素？

    对于函数组件，你需要使用 useEffect 钩子在页面加载时设置输入字段的焦点。

    import React, { useEffect, useRef } from "react";
    
    const App = () => {
      const inputElRef = useRef(null);
    
      useEffect(() => {
        inputElRef.current.focus();
      }, []);
    
      return (
        <div>
          <input defaultValue={"不会聚焦"} />
          <input ref={inputElRef} defaultValue={"会聚焦"} />
        </div>
      );
    };
    
    ReactDOM.render(<App />, document.getElementById("app"));
    

    查看类组件方式

    你可以通过为 `input` 元素创建 _ref_ 并在 `componentDidMount()` 中使用它来实现：

    class App extends React.Component {
      componentDidMount() {
        this.nameInput.focus();
      }
    
      render() {
        return (
          <div>
            <input defaultValue={"不会聚焦"} />
            <input
              ref={(input) => (this.nameInput = input)}
              defaultValue={"会聚焦"}
            />
          </div>
        );
      }
    }
    
    ReactDOM.render(<App />, document.getElementById("app"));
    

⬆ 返回顶部

69. 如何在浏览器运行时查找 React 的版本？

    你可以使用 React.version 来获取版本。

    const REACT_VERSION = React.version;
    
    ReactDOM.render(
      <div>{`React 版本: ${REACT_VERSION}`}</div>,
      document.getElementById("app")
    );
    

⬆ 返回顶部

70. 如何为 React Router 添加 Google Analytics？

    在 history 对象上添加一个监听器来记录每个页面浏览：

    history.listen(function (location) {
      window.ga("set", "page", location.pathname + location.search);
      window.ga("send", "pageview", location.pathname + location.search);
    });
    

⬆ 返回顶部

71. 如何在 React 的内联样式中添加浏览器厂商前缀？

    React 不会 自动应用 浏览器厂商前缀。你需要手动添加厂商前缀。

    <div
      style={{
        transform: "rotate(90deg)",
        WebkitTransform: "rotate(90deg)", // 注意这里的大写 'W'
        msTransform: "rotate(90deg)", // 'ms' 是唯一小写的厂商前缀
      }}
    />
    

⬆ 返回顶部

72. 如何使用 React 和 ES6 导入和导出组件？

    你应该使用默认导出组件

    import User from "user";
    
    export default function MyProfile {
        return <User type="customer">//...</User>;
    }
    

    查看类组件方式

    ```jsx harmony import React from "react"; import User from "user";

    export default class MyProfile extends React.Component { render() { return //...; } }

    </p>
    </details>
    
    使用导出说明符时，MyProfile 将成为模块的成员并导出，在其他组件中导入时无需指定名称。
    

⬆ 返回顶部

73. React 组件命名有哪些例外情况？

    组件名称应以大写字母开头，但此约定有一些例外。带有点（属性访问器）的小写标签名仍被视为有效的组件名称。 例如，下面的标签可以编译为有效的组件：

         render() {
              return (
                <obj.component/> // `React.createElement(obj.component)`
              )
        }
    

    ⬆ 返回顶部

74. 是否可以在纯 React 中使用 async/await？

    是的，你可以在纯 React 中使用 async/await，只要你的 JavaScript 环境支持 ES2017+。如今大多数现代浏览器和构建工具都支持 ES2017+ 版本。如果你使用 Create React App、Next.js、Remix 或任何现代 React 配置，async/await 通过 Babel 开箱即用地支持。

    使用示例

    import { useEffect, useState } from 'react';
    
    function UserProfile() {
      const [user, setUser] = useState(null);
    
      useEffect(() => {
        const fetchUser = async () => {
          const response = await fetch('/api/user');
          const data = await response.json();
          setUser(data);
        };
    
        fetchUser();
      }, []);
    
      return user ? <div>你好，{user.name}</div> : <div>加载中...</div>;
    }
    

    但是，如果你不使用像 Webpack 或 Babel 这样的打包工具，你将需要 Babel 和 transform-async-to-generator 插件。不过，React Native 附带了 Babel 和一组转换工具。

⬆ 返回顶部

75. React 常见的文件夹结构有哪些？

    React 项目文件结构有两种常见做法。

    1. 按功能或路由分组：

    一种常见的项目结构方式是将 CSS、JS 和测试文件放在一起，按功能或路由分组。

    common/
    ├─ Avatar.js
    ├─ Avatar.css
    ├─ APIUtils.js
    └─ APIUtils.test.js
    feed/
    ├─ index.js
    ├─ Feed.js
    ├─ Feed.css
    ├─ FeedStory.js
    ├─ FeedStory.test.js
    └─ FeedAPI.js
    profile/
    ├─ index.js
    ├─ Profile.js
    ├─ ProfileHeader.js
    ├─ ProfileHeader.css
    └─ ProfileAPI.js
    

    2. 按文件类型分组：

    另一种流行的项目结构方式是将相似的文件分组在一起。

    api/
    ├─ APIUtils.js
    ├─ APIUtils.test.js
    ├─ ProfileAPI.js
    └─ UserAPI.js
    components/
    ├─ Avatar.js
    ├─ Avatar.css
    ├─ Feed.js
    ├─ Feed.css
    ├─ FeedStory.js
    ├─ FeedStory.test.js
    ├─ Profile.js
    ├─ ProfileHeader.js
    └─ ProfileHeader.css
    

⬆ 返回顶部

76. 有哪些流行的动画包？

    React Transition Group 和 React Motion 是 React 生态系统中流行的动画包。

⬆ 返回顶部

77. 样式模块的好处是什么？

    建议避免在组件中硬编码样式值。任何可能在不同 UI 组件中使用的值都应提取到它们自己的模块中。

    例如，这些样式可以提取到一个单独的组件中：

    export const colors = {
      white,
      black,
      blue,
    };
    
    export const space = [0, 8, 16, 32, 64];
    

    然后在其他组件中单独导入：

    import { space, colors } from "./styles";
    

⬆ 返回顶部

78. 有哪些流行的 React 专用代码检查工具？

    ESLint 是一个流行的 JavaScript 代码检查工具。有一些可用的插件可以分析特定的代码风格。React 中最常见的一种是名为 eslint-plugin-react 的 npm 包。默认情况下，它会检查许多最佳实践，规则涵盖从迭代器中的键到完整的 prop 类型集等内容。

    另一个流行的插件是 eslint-plugin-jsx-a11y，它将帮助修复可访问性方面的常见问题。由于 JSX 提供的语法与常规 HTML 略有不同，例如 alt 文本和 tabindex 的问题，常规插件将无法检测到。

⬆ 返回顶部

React Router

⬆ 返回顶部

79. 什么是 React Router？

    React Router 是一个构建在 React 之上的强大路由库，它能帮助你极其快速地为应用添加新的屏幕和流程，同时保持 URL 与页面上显示的内容同步。

⬆ 返回顶部

80. React Router 与 history 库有何不同？

    React Router 是 history 库的一个封装，它通过其 browser 和 hash histories 处理与浏览器 window.history 的交互。它还提供了 memory history，这在没有全局 history 的环境中非常有用，例如移动应用开发（React Native）和使用 Node 进行的单元测试。

⬆ 返回顶部

81. React Router v6 的 <Router> 组件有哪些？

    React Router v6 提供以下 4 个 <Router> 组件：

    1. <BrowserRouter>：对标准 Web 应用使用 HTML5 history API。
    2. <HashRouter>：对静态服务器使用基于哈希的路由。
    3. <MemoryRouter>：对测试和非浏览器环境使用内存中的路由。
    4. <StaticRouter>：为服务器端渲染（SSR）提供静态路由。

    上述组件将创建 browser、hash、memory 和 static history 实例。React Router v6 通过 router 对象的上下文，使与你的路由器关联的 history 实例的属性和方法可用。

⬆ 返回顶部

82. history 的 push() 和 replace() 方法的作用是什么？

    history 实例有两个用于导航的方法。

    1. push()
    2. replace()

    如果你把 history 看作是一个已访问位置的数组，push() 会向数组添加一个新位置，而 replace() 会用新位置替换数组中的当前位置。

⬆ 返回顶部

83. 如何在 React Router v4 中进行编程式导航？

    有三种不同的方法可以在组件内实现编程式路由/导航。

    1. 使用 withRouter() 高阶函数：

       withRouter() 高阶函数会将 history 对象作为组件的 prop 注入。该对象提供 push() 和 replace() 方法，以避免使用 context。

       import { withRouter } from "react-router-dom"; // 这也适用于 'react-router-native'
       
       const Button = withRouter(({ history }) => (
         <button
           type="button"
           onClick={() => {
             history.push("/new-location");
           }}
         >
           {"点击我！"}
         </button>
       ));
       

    2. 使用 <Route> 组件和 render props 模式：

       <Route> 组件传递与 withRouter() 相同的 props，因此你可以通过 history prop 访问 history 方法。

       import { Route } from "react-router-dom";
       
       const Button = () => (
         <Route
           render={({ history }) => (
             <button
               type="button"
               onClick={() => {
                 history.push("/new-location");
               }}
             >
               {"点击我！"}
             </button>
           )}
         />
       );
       

    3. 使用 context：

       此选项不推荐，且被视为不稳定的 API。

       const Button = (props, context) => (
         <button
           type="button"
           onClick={() => {
             context.history.push("/new-location");
           }}
         >
           {"点击我！"}
         </button>
       );
       
       Button.contextTypes = {
         history: React.PropTypes.shape({
           push: React.PropTypes.func.isRequired,
         }),
       };
       

⬆ 返回顶部

84. 如何在 React Router v4 中获取查询参数？

    React Router v4 中移除了解析查询字符串的功能，因为多年来一直有用户请求支持不同的实现方式。因此，用户可以自行选择喜欢的实现方式。推荐的方法是使用 query strings 库。

    const queryString = require("query-string");
    const parsed = queryString.parse(props.location.search);
    

    如果你想要原生的方法，也可以使用 URLSearchParams：

    const params = new URLSearchParams(props.location.search);
    const foo = params.get("name");
    

    你应该为 IE11 使用一个 polyfill。

⬆ 返回顶部

85. 为什么会收到“Router may have only one child element”警告？

    你必须将你的 Route 包裹在 <Switch> 块中，因为 <Switch> 的独特之处在于它只渲染一个匹配的路由。

    首先，你需要将 Switch 添加到导入中：

    import { Switch, Router, Route } from "react-router";
    

    然后在 <Switch> 块中定义路由：

    <Router>
      <Switch>
        <Route {/* ... */} />
        <Route {/* ... */} />
      </Switch>
    </Router>
    

⬆ 返回顶部

86. 如何在 React Router v4 中向 history.push 方法传递参数？

    导航时，你可以向 history 对象传递 props：

    this.props.history.push({
      pathname: "/template",
      search: "?name=sudheer",
      state: { detail: response.data },
    });
    

    search 属性用于在 push() 方法中传递查询参数。

⬆ 返回顶部

87. 如何实现 默认 页面或 NotFound 页面？

    <Switch> 会渲染第一个匹配的子 <Route>。没有 path 的 <Route> 总是会匹配。因此，你只需像下面这样去掉 path 属性即可

    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/user" component={User} />
      <Route component={NotFound} />
    </Switch>
    

⬆ 返回顶部

88. 如何在 React Router v4 中获取 history？

    以下是在 React Router v4 中获取 history 对象的步骤列表，

    1. 创建一个导出 history 对象的模块，并在整个项目中导入此模块。

       例如，创建 history.js 文件：

       import { createBrowserHistory } from "history";
       
       export default createBrowserHistory({
         /* 如果需要，在此处传递配置对象 */
       });
       

    2. 你应该使用 <Router> 组件而不是内置的路由器。在 index.js 文件中导入上面的 history.js：

       import { Router } from "react-router-dom";
       import history from "./history";
       import App from "./App";
       
       ReactDOM.render(
         <Router history={history}>
           <App />
         </Router>,
         holder
       );
       

    3. 你也可以使用 history 对象的 push 方法，类似于内置的 history 对象：

       // some-other-file.js
       import history from "./history";
       
       history.push("/go-here");
       

⬆ 返回顶部

89. 如何在登录后执行自动重定向？

    react-router 包在 React Router 中提供了 <Redirect> 组件。渲染 <Redirect> 将导航到新位置。与服务器端重定向类似，新位置将覆盖历史堆栈中的当前位置。

    import { Redirect } from "react-router";
    
    export default function Login {
        if (this.state.isLoggedIn === true) {
          return <Redirect to="/your/redirect/page" />;
        } else {
          return <div>{"请登录"}</div>;
        }
    }
    

    查看类组件

    import React, { Component } from "react";
    import { Redirect } from "react-router";
    
    export default class LoginComponent extends Component {
      render() {
        if (this.state.isLoggedIn === true) {
          return <Redirect to="/your/redirect/page" />;
        } else {
          return <div>{"请登录"}</div>;
        }
      }
    }
    

⬆ 返回顶部

React 国际化

90. 什么是 React Intl？

    React Intl 库通过现成的组件和 API，让 React 中的国际化变得简单直观，能够处理从字符串、日期、数字格式化到复数形式等各种需求。React Intl 是 FormatJS 的一部分，它通过自身的组件和 API 提供与 React 的绑定。

⬆ 返回顶部

91. React Intl 的主要特性是什么？

    React Intl 的主要特性如下：

    1. 显示带分隔符的数字。
    2. 正确显示日期和时间。
    3. 显示相对于“现在”的日期。
    4. 对字符串中的标签进行复数化处理。
    5. 支持 150 多种语言。
    6. 可在浏览器和 Node 环境中运行。
    7. 基于标准构建。

⬆ 返回顶部

92. React Intl 有哪两种格式化方式？

    该库提供了两种格式化字符串、数字和日期的方式：

    1. 使用 React 组件：

       <FormattedMessage
         id={"account"}
         defaultMessage={"The amount is less than minimum balance."}
       />
       

    2. 使用 API：

       const messages = defineMessages({
         accountMessage: {
           id: "account",
           defaultMessage: "The amount is less than minimum balance.",
         },
       });
       
       formatMessage(messages.accountMessage);
       

⬆ 返回顶部

93. 如何在 React Intl 中使用 <FormattedMessage> 作为占位符？

    react-intl 中的 <Formatted... /> 组件返回的是元素，而非纯文本，因此不能直接用于占位符、替代文本等场景。这种情况下，你应该使用更底层的 API formatMessage()。你可以通过 injectIntl() 高阶组件将 intl 对象注入到组件中，然后使用该对象上的 formatMessage() 方法来格式化消息。

    import React from "react";
    import { injectIntl, intlShape } from "react-intl";
    
    const MyComponent = ({ intl }) => {
      const placeholder = intl.formatMessage({ id: "messageId" });
      return <input placeholder={placeholder} />;
    };
    
    MyComponent.propTypes = {
      intl: intlShape.isRequired,
    };
    
    export default injectIntl(MyComponent);
    

⬆ 返回顶部

94. 如何使用 React Intl 获取当前语言环境？

    你可以在应用的任何组件中使用 injectIntl() 来获取当前语言环境：

    import { injectIntl, intlShape } from "react-intl";
    
    const MyComponent = ({ intl }) => (
      <div>{`当前语言环境是 ${intl.locale}`}</div>
    );
    
    MyComponent.propTypes = {
      intl: intlShape.isRequired,
    };
    
    export default injectIntl(MyComponent);
    

⬆ 返回顶部

95. 如何使用 React Intl 格式化日期？

    injectIntl() 高阶组件会让你通过组件的 props 访问到 formatDate() 方法。FormattedDate 实例内部会使用此方法，它返回格式化日期的字符串表示。

    import { injectIntl, intlShape } from "react-intl";
    
    const stringDate = this.props.intl.formatDate(date, {
      year: "numeric",
      month: "numeric",
      day: "numeric",
    });
    
    const MyComponent = ({ intl }) => (
      <div>{`格式化后的日期是 ${stringDate}`}</div>
    );
    
    MyComponent.propTypes = {
      intl: intlShape.isRequired,
    };
    
    export default injectIntl(MyComponent);
    

    ⬆ 返回顶部

React 测试

96. React 测试中的浅层渲染器（Shallow Renderer）是什么？

    浅层渲染（Shallow rendering） 在 React 中编写单元测试用例时非常有用。它允许你 只渲染组件的一层深度，并断言其 render 方法返回内容的相关事实，而无需担心子组件的行为——子组件不会被实例化或渲染。

    例如，如果你有以下组件：

    function MyComponent() {
      return (
        <div>
          <span className={"heading"}>{"Title"}</span>
          <span className={"description"}>{"Description"}</span>
        </div>
      );
    }
    

    那么你可以按如下方式进行断言：

    import ShallowRenderer from "react-test-renderer/shallow";
    
    // 在你的测试中
    const renderer = new ShallowRenderer();
    renderer.render(<MyComponent />);
    
    const result = renderer.getRenderOutput();
    
    expect(result.type).toBe("div");
    expect(result.props.children).toEqual([
      <span className={"heading"}>{"Title"}</span>,
      <span className={"description"}>{"Description"}</span>,
    ]);
    

⬆ Back to Top

97. React 中的 TestRenderer 包是什么？

    该包提供了一个渲染器，可用于将组件渲染为纯 JavaScript 对象，而不依赖于 DOM 或原生移动环境。这个包可以轻松获取由 ReactDOM 或 React Native 渲染的平台视图层次结构（类似于 DOM 树）的快照，而无需使用浏览器或 jsdom。

    import TestRenderer from "react-test-renderer";
    
    const Link = ({ page, children }) => <a href={page}>{children}</a>;
    
    const testRenderer = TestRenderer.create(
      <Link page={"https://www.facebook.com/"}>{"Facebook"}</Link>
    );
    
    console.log(testRenderer.toJSON());
    // {
    //   type: 'a',
    //   props: { href: 'https://www.facebook.com/' },
    //   children: [ 'Facebook' ]
    // }
    

⬆ Back to Top

98. ReactTestUtils 包的用途是什么？

    ReactTestUtils 包含在 with-addons 包中，允许你针对模拟的 DOM 执行操作，以达到单元测试的目的。

⬆ Back to Top

99. 什么是 Jest？

    Jest 是 Facebook 基于 Jasmine 创建的 JavaScript 单元测试框架，它提供了自动化的模拟创建和 jsdom 环境。它常被用于测试组件。

⬆ Back to Top

100. Jest 相比 Jasmine 有哪些优势？

     与 Jasmine 相比，Jest 有几个优势：

     • 自动查找源代码中要执行的测试。
     • 运行测试时自动模拟依赖项。
     • 允许你同步测试异步代码。
     • 通过 jsdom 提供假的 DOM 实现来运行测试，因此你的测试可以在命令行中执行。
     • 并行运行测试进程，以便测试更快完成。

⬆ Back to Top

101. 给出一个简单的 Jest 测试用例示例

     让我们为 sum.js 文件中一个加法函数编写测试：

     const sum = (a, b) => a + b;
     
     export default sum;
     

     创建一个名为 sum.test.js 的文件，其中包含实际测试：

     import sum from "./sum";
     
     test("adds 1 + 2 to equal 3", () => {
       expect(sum(1, 2)).toBe(3);
     });
     

     然后在你的 package.json 中添加以下部分：

     {
       "scripts": {
         "test": "jest"
       }
     }
     

     最后，运行 yarn test 或 npm test，Jest 将输出结果：

     $ yarn test
     PASS ./sum.test.js
     ✓ adds 1 + 2 to equal 3 (2ms)
     

⬆ Back to Top

React Redux

⬆ 返回顶部

102. 什么是 flux？

     Flux 是 Facebook 设计的一种应用架构（并非框架或库），用于管理 React 应用中的数据流。它作为传统MVC（模型-视图-控制器） 模式的替代方案而创建，强调单向数据流，使状态变化更可预测且更易于调试。

     Flux 通过组织数据在应用中的流动方式来补充 React，尤其适用于大型或复杂项目。

     Flux 的核心概念

     Flux 运行时使用四个关键组件，每个组件都有特定的职责：

     • Actions（动作）
       • 描述发生了什么的普通 JavaScript 对象或函数（例如，用户交互或 API 响应）。
       • 示例：{ type: 'ADD_TODO', payload: 'Buy milk' }
     • Dispatcher（调度器）
       • 接收动作并将其分发到相应存储的中央枢纽。
       • 一个 Flux 应用中只有一个调度器。
     • Stores（存储）
       • 保存应用状态和业务逻辑。
       • 响应来自调度器的动作并相应地更新自身。
       • 它们触发变更事件，视图可以监听这些事件。
     • Views（视图，即 React 组件）
       • 订阅存储，并在数据变化时重新渲染。
       • 它们也可以触发新的动作（例如，在用户输入时）。

     调度器、存储和视图组件之间的工作流程以及各自不同的输入和输出如下：

     

⬆ 返回顶部

103. 什么是 Redux？

     Redux 是一个用于 JavaScript 应用的可预测状态容器，最常与 React 一起使用。它帮助你在单一数据源中管理和集中应用的状态，使调试、测试和维护变得更加容易——尤其是在大型或复杂应用中。Redux 核心是一个很小的库（压缩后约 2.5kB），且没有依赖项。

⬆ 返回顶部

104. Redux 的核心原则是什么？

     Redux 遵循三个基本原则：

     1. 单一数据源： 整个应用的状态存储在单个 store 中的对象树里。单一状态树使跟踪状态随时间的变化、调试或检查应用变得更加容易。

     const store = createStore(reducer);
     

     2. 状态是只读的： 改变状态的唯一方法是触发一个 action，一个描述发生了什么的对象。这确保视图或网络回调都不会直接写入状态。

     const action = { type: 'INCREMENT' };
     store.dispatch(action);
     

     3. 使用纯函数（Reducers）进行修改： 为了指定 action 如何转换状态树，你需要编写 reducers。Reducers 只是纯函数，它接收先前的状态和一个 action 作为参数，并返回下一个状态。

     function counter(state = 0, action) {
       switch (action.type) {
         case 'INCREMENT':
           return state + 1;
         case 'DECREMENT':
           return state - 1;
         default:
           return state;
       }
     }
     

⬆ 返回顶部

105. 与 Flux 相比，Redux 有哪些缺点？

     虽然 Redux 提供了强大且可预测的状态管理解决方案，但与 Flux 相比，它也存在一些权衡。这些包括：

     1. 不可变性至关重要
        Redux 对状态更新强制执行严格的不可变模型，这与 Flux 更为宽松的方式不同。这意味着你必须避免直接修改状态。许多与 Redux 相关的库都假设状态是不可变的，因此你的团队在编写纯更新逻辑时必须非常谨慎。你可以使用 redux-immutable-state-invariant、Immer 或 Immutable.js 等工具来帮助实施这一实践，尤其是在开发过程中。
     2. 需谨慎选择补充包
        Redux 设计上更精简，并提供了诸如中间件和 store 增强器等扩展点。这催生了庞大的生态系统，但也意味着你必须深思熟虑地选择和配置额外的包来实现撤销/重做、持久化或表单处理等功能——这些是 Flux 明确不包含但在较小规模项目中可能更容易管理的方面。
     3. 静态类型集成有限
        虽然 Flux 通过 Flow 等工具对静态类型检查有成熟的支持，但 Redux 的类型集成相对不够顺畅。尽管 TypeScript 现在常与 Redux 一起使用，但早期对 Flow 的支持有限，且为实现静态类型安全需要更多的样板代码。这可能会影响那些在大型代码库中严重依赖类型系统的团队。

⬆ 返回顶部

106. mapStateToProps() 和 mapDispatchToProps() 之间有什么区别？

     mapStateToProps() 是一个工具函数，帮助你的组件获取更新后的状态（该状态由其他组件更新）：

     const mapStateToProps = (state) => {
       return {
         todos: getVisibleTodos(state.todos, state.visibilityFilter),
       };
     };
     

     mapDispatchToProps() 是一个工具函数，帮助你的组件触发 action 事件（派发可能导致应用状态改变的 action）：

     const mapDispatchToProps = (dispatch) => {
       return {
         onTodoClick: (id) => {
           dispatch(toggleTodo(id));
         },
       };
     };
     

     建议始终对 mapDispatchToProps 使用“对象简写”形式。

     Redux 会将其包装在另一个类似 (...args) => dispatch(onTodoClick(...args)) 的函数中，并将这个包装函数作为 prop 传递给你的组件。

     const mapDispatchToProps = {
       onTodoClick,
     };
     

⬆ 返回顶部

107. 可以在 reducer 中派发 action 吗？

     在 reducer 内部派发 action 是一种反模式。你的 reducer 应该是无副作用的，仅仅消化 action 的 payload 并返回一个新的状态对象。在 reducer 中添加监听器和派发 action 可能会导致链式 action 和其他副作用。

⬆ 返回顶部

108. 如何在组件外部访问 Redux store？

     你只需要从使用 createStore() 创建 store 的模块中导出 store。此外，不应将其污染到全局 window 对象。

     store = createStore(myReducer);
     
     export default store;
     

⬆ 返回顶部

109. MVW 模式有哪些缺点？

     1. DOM 操作非常昂贵，这导致应用运行缓慢且效率低下。
     2. 由于循环依赖，在模型和视图周围创建了复杂的模型。
     3. 协作应用（如 Google Docs）中会发生大量数据更改。
     4. 如果不添加大量额外代码，就无法轻松地进行撤销（回到过去）操作。

⬆ 返回顶部

110. Redux 和 RxJS 之间有什么相似之处吗？

     这些库用途迥异，但存在一些模糊的相似之处。

     Redux 是一个用于管理整个应用状态的工具。它通常用作 UI 的架构。可以把它看作是（Angular 的）一半的替代方案。RxJS 是一个响应式编程库。它通常用作在 JavaScript 中完成异步任务的工具。可以把它看作是 Promises 的替代方案。Redux 使用响应式范式，因为 Store 是响应式的。Store 从远处观察 action，并自行改变。RxJS 也使用响应式范式，但它不是一种架构，而是提供了基本的构建块（Observables）来实现这种模式。

⬆ 返回顶部

111. 如何在 Redux 中重置状态？

     你需要在应用中编写一个根 reducer，它将 action 的处理委托给由 combineReducers() 生成的 reducer。

     例如，假设我们希望 rootReducer() 在收到 USER_LOGOUT action 后返回初始状态。我们知道，当 reducers 被调用时，如果第一个参数为 undefined，无论 action 是什么，它都应该返回初始状态。

     const appReducer = combineReducers({
       /* 你的应用的顶层 reducers */
     });
     
     const rootReducer = (state, action) => {
       if (action.type === "USER_LOGOUT") {
         state = undefined;
       }
     
       return appReducer(state, action);
     };
     

     如果使用 redux-persist，你可能还需要清理存储。redux-persist 会在存储引擎中保存一份你的状态副本。首先，你需要导入适当的存储引擎，然后在将状态设置为 undefined 之前解析状态，并清理每个存储状态键。

     const appReducer = combineReducers({
       /* 你的应用的顶层 reducers */
     });
     
     const rootReducer = (state, action) => {
       if (action.type === "USER_LOGOUT") {
         Object.keys(state).forEach((key) => {
           storage.removeItem(`persist:${key}`);
         });
     
         state = undefined;
       }
     
       return appReducer(state, action);
     };
     

⬆ 返回顶部

112. React context 和 React Redux 之间有什么区别？

     你可以直接在应用中使用Context，它非常适合将数据传递给深层嵌套的组件，这也是它设计的初衷。

     而Redux 功能更强大，提供了许多 Context API 所不具备的特性。此外，React Redux 内部使用 context，但它不会在公共 API 中暴露这一事实。

⬆ 返回顶部

113. 为什么 Redux 的状态函数被称为 reducers？

     Reducers 总是返回状态的累积结果（基于所有先前的和当前的 action）。因此，它们起到了状态“减速器”的作用。每次调用 Redux reducer 时，都会将 state 和 action 作为参数传递。然后，这个 state 会根据 action 被“缩减”（或累积），并返回下一个 state。你可以对一系列 action 和一个初始的 store 状态执行“缩减”操作，以得到最终的状态。

⬆ 返回顶部

114. 如何在 Redux 中进行 AJAX 请求？

     你可以使用 redux-thunk 中间件，它允许你定义异步 action。

     让我们以使用 fetch API 获取特定账户信息的 AJAX 调用为例：

     export function fetchAccount(id) {
       return (dispatch) => {
         dispatch(setLoadingAccountState()); // 显示加载指示器
         fetch(`/account/${id}`, (response) => {
           dispatch(doneFetchingAccount()); // 隐藏加载指示器
           if (response.status === 200) {
             dispatch(setAccount(response.json)); // 使用普通函数设置接收到的状态
           } else {
             dispatch(someError);
           }
         });
       };
     }
     
     function setAccount(data) {
       return { type: "SET_Account", data: data };
     }
     

⬆ 返回顶部

115. 我应该将所有组件的状态都保存在 Redux store 中吗？

     将数据保存在 Redux store 中，而将与 UI 相关的状态保留在组件内部。

⬆ 返回顶部

116. 访问 Redux store 的正确方式是什么？

     在组件中访问 store 的最佳方式是使用 connect() 函数，它会创建一个新的组件来包装你现有的组件。这种模式称为高阶组件，通常是在 React 中扩展组件功能的首选方式。这允许你将 state 和 action 创建器映射到组件，并在 store 更新时自动将它们传入。

     让我们以使用 connect 的 <FilterLink> 组件为例：

     import { connect } from "react-redux";
     import { setVisibilityFilter } from "../actions";
     import Link from "../components/Link";
     
     const mapStateToProps = (state, ownProps) => ({
       active: ownProps.filter === state.visibilityFilter,
     });
     
     const mapDispatchToProps = (dispatch, ownProps) => ({
       onClick: () => dispatch(setVisibilityFilter(ownProps.filter)),
     });
     
     const FilterLink = connect(mapStateToProps, mapDispatchToProps)(Link);
     
     export default FilterLink;
     

     由于 connect() 有不少性能优化，而且通常不太可能导致 bug，Redux 开发者几乎总是推荐使用 connect()，而不是直接访问 store（使用 context API）。

     function MyComponent {
       someMethod() {
         doSomethingWith(this.context.store);
       }
     }
     

⬆ 返回顶部

117. React Redux 中的 component 和 container 有什么区别？

     Component（组件） 是描述应用展示部分的类组件或函数组件。

     Container（容器） 是连接到 Redux store 的组件的非正式术语。容器订阅 Redux 状态更新并派发 action，它们通常不渲染 DOM 元素；而是将渲染委托给展示性子组件。

⬆ 返回顶部

118. Redux 中 constants（常量）的作用是什么？

     常量允许你在使用 IDE 时轻松找到项目中特定功能的所有用法。它还可以防止你因拼写错误而引入低级错误——在这种情况下，你会立即得到一个 ReferenceError。

     通常我们会将它们保存在单个文件中（constants.js 或 actionTypes.js）。

     export const ADD_TODO = "ADD_TODO";
     export const DELETE_TODO = "DELETE_TODO";
     export const EDIT_TODO = "EDIT_TODO";
     export const COMPLETE_TODO = "COMPLETE_TODO";
     export const COMPLETE_ALL = "COMPLETE_ALL";
     export const CLEAR_COMPLETED = "CLEAR_COMPLETED";
     

     在 Redux 中，你会在两个地方使用它们：

     1. 创建 action 时：

        以 actions.js 为例：

        import { ADD_TODO } from "./actionTypes";
        
        export function addTodo(text) {
          return { type: ADD_TODO, text };
        }
        

     2. 在 reducers 中：

        创建 reducer.js：

        import { ADD_TODO } from "./actionTypes";
        
        export default (state = [], action) => {
          switch (action.type) {
            case ADD_TODO:
              return [
                ...state,
                {
                  text: action.text,
                  completed: false,
                },
              ];
            default:
              return state;
          }
        };
        

⬆ 返回顶部

119. 编写 mapDispatchToProps() 的不同方式有哪些？

     有几种方法可以将action creators 绑定到 mapDispatchToProps() 中的 dispatch()。

     以下是可能的选项：

     const mapDispatchToProps = (dispatch) => ({
       action: () => dispatch(action()),
     });
     

     const mapDispatchToProps = (dispatch) => ({
       action: bindActionCreators(action, dispatch),
     });
     

     const mapDispatchToProps = { action };
     

     第三种选项只是第一种的简写形式。

⬆ 返回顶部

120. mapStateToProps() 和 mapDispatchToProps() 中的 ownProps 参数有什么用？

     如果指定了 ownProps 参数，React Redux 会将传递给组件的 props 传入你的 connect 函数。因此，如果你使用一个已连接的组件：

     import ConnectedComponent from "./containers/ConnectedComponent";
     
     <ConnectedComponent user={"john"} />;
     

     你的 mapStateToProps() 和 mapDispatchToProps() 函数内部的 ownProps 将是一个对象：

     {
       user: "john";
     }
     

     你可以使用这个对象来决定从这些函数返回什么。

⬆ 返回顶部

121. Redux 顶级目录应该如何组织？

     大多数应用程序有以下几个顶级目录：

     1. Components（组件）：用于无状态组件，它们不感知 Redux。
     2. Containers（容器）：用于有状态组件，它们连接到 Redux。
     3. Actions（动作）：用于所有 action 创建器，文件名对应应用的某个部分。
     4. Reducers（减速器）：用于所有 reducers，文件名对应状态的键。
     5. Store：用于 store 的初始化。

     这种结构适用于中小型应用。

⬆ 返回顶部

122. 什么是 redux-saga？

     redux-saga 是一个旨在使 React/Redux 应用中的副作用（如数据获取等异步操作以及访问浏览器缓存等非纯操作）变得更容易处理和更好管理的库。

     它可以通过 NPM 安装：

     $ npm install --save redux-saga
     

⬆ 返回顶部

123. redux-saga 的核心思想是什么？

     Saga（传奇） 就像应用中的一个单独线程，专门负责处理副作用。redux-saga 是一个 redux 中间件，这意味着这个线程可以通过正常的 Redux action 从主应用程序启动、暂停和取消，它可以访问完整的 Redux 应用状态，也可以派发 Redux action。

⬆ 返回顶部

124. redux-saga 中的 call() 和 put() 有什么区别？

     call() 和 put() 都是 effect 创建函数。call() 函数用于创建 effect 描述，指示中间件调用 promise。put() 函数创建一个 effect，指示中间件向 store 派发一个 action。

     让我们以获取特定用户数据为例，看看这些 effects 是如何工作的。

     function* fetchUserSaga(action) {
       // `call` 函数接受剩余参数，这些参数将被传递给 `api.fetchUser` 函数。
       // 指示中间件调用 promise，其解析后的值将被赋给 `userData` 变量
       const userData = yield call(api.fetchUser, action.userId);
     
       // 指示中间件派发相应的 action。
       yield put({
         type: "FETCH_USER_SUCCESS",
         userData,
       });
     }
     

⬆ 返回顶部

125. 什么是 Redux Thunk？

     Redux Thunk 中间件允许你编写返回函数而不是 action 的 action 创建器。Thunk 可用于延迟 action 的派发，或者仅在满足特定条件时才派发。这个内部函数接收 store 的 dispatch() 和 getState() 方法作为参数。

⬆ 返回顶部

126. redux-saga 和 redux-thunk 有什么区别？

     Redux Thunk 和 Redux Saga 都用于处理副作用。在大多数情况下，Thunk 使用 Promise 来处理副作用，而 Saga 则使用 Generator。Thunk 易于使用，且 Promise 为许多开发者所熟悉；Saga/Generator 功能更强大，但需要学习相关知识。不过这两种中间件可以共存，因此你可以先使用 Thunk，在需要时再引入 Saga。

⬆ Back to Top

127. 什么是 Redux DevTools？

     Redux DevTools 是一个用于 Redux 的实时编辑时间旅行环境，具有热重载、操作重放和可自定义 UI 等功能。如果你不想费心安装 Redux DevTools 并将其集成到项目中，可以考虑使用适用于 Chrome 和 Firefox 的 Redux DevTools 扩展。

⬆ Back to Top

128. Redux DevTools 有哪些功能？

     Redux DevTools 的主要功能如下：

     1. 允许你检查每个状态和操作的负载。
     2. 允许你通过 取消 操作回到过去。
     3. 如果你更改了 reducer 代码，每个 暂存 的操作都将被重新计算。
     4. 如果 reducer 抛出错误，你将看到错误发生在哪个操作期间以及具体错误信息。
     5. 使用 persistState() 存储增强器，你可以在页面重新加载时保留调试会话。

⬆ Back to Top

129. 什么是 Redux 选择器（selectors）？为什么要使用它们？

     选择器 是将 Redux 状态作为参数并返回要传递给组件的数据的函数。

     例如，从状态中获取用户详细信息：

     const getUserData = (state) => state.user.data;
     

     这些选择器有两个主要好处：

     1. 选择器可以计算派生数据，使 Redux 能够存储尽可能少的状态。
     2. 除非其参数之一发生变化，否则选择器不会重新计算。

⬆ Back to Top

130. 什么是 Redux Form？

     Redux Form 与 React 和 Redux 配合使用，使 React 中的表单能够使用 Redux 存储其所有状态。Redux Form 可以与原始 HTML5 输入一起使用，但它也能很好地与 Material UI、React Widgets 和 React Bootstrap 等常见 UI 框架配合。

⬆ Back to Top

131. Redux Form 的主要功能是什么？

     Redux Form 的主要功能包括：

     1. 通过 Redux 存储实现字段值持久化。
     2. 验证（同步/异步）和提交。
     3. 字段值的格式化、解析和规范化。

⬆ Back to Top

132. 如何向 Redux 添加多个中间件？

     你可以使用 applyMiddleware()。

     例如，你可以将 redux-thunk 和 logger 作为参数传递给 applyMiddleware()：

     import { createStore, applyMiddleware } from "redux";
     const createStoreWithMiddleware = applyMiddleware(
       ReduxThunk,
       logger
     )(createStore);
     

⬆ Back to Top

133. 如何在 Redux 中设置初始状态？

     你需要将初始状态作为第二个参数传递给 createStore：

     const rootReducer = combineReducers({
       todos: todos,
       visibilityFilter: visibilityFilter,
     });
     
     const initialState = {
       todos: [{ id: 123, name: "example", completed: false }],
     };
     
     const store = createStore(rootReducer, initialState);
     

⬆ Back to Top

134. Relay 与 Redux 有何不同？

     Relay 与 Redux 的相似之处在于它们都使用单一存储。主要区别在于，Relay 仅管理源自服务器的状态，并且所有对状态的访问都通过 GraphQL 查询（用于读取数据）和变更（用于更改数据）进行。Relay 会为你缓存数据并优化数据获取，只获取已更改的数据，不多获取其他内容。

135. Redux 中的 action 是什么？

     Action 是普通的 JavaScript 对象或信息载体，用于将数据从应用程序发送到存储。它们是存储的唯一信息来源。Action 必须具有一个 type 属性，用于指示正在执行的操作类型。

     例如，以下是一个表示添加新待办事项的 action：

     {
       type: ADD_TODO,
       text: 'Add todo item'
     }
     

⬆ Back to Top

React Native

⬆ 返回顶部

136. React Native 和 React 有什么区别？

     React 是一个 JavaScript 库，支持前端 Web 开发并可在服务器端运行，用于构建用户界面和 Web 应用程序。

     React Native 是一个移动框架，它会编译为原生应用组件，让你能够使用 JavaScript 构建原生移动应用（iOS、Android 和 Windows），你可以使用 React 来构建组件，并且它在底层实现了 React。

⬆ 返回顶部

137. 如何测试 React Native 应用？

     React Native 只能在 iOS 和 Android 等移动模拟器中进行测试。你可以使用 Expo 应用（https://expo.io）在移动设备上运行应用，它通过二维码进行同步，此时你的移动设备和电脑需要处于同一无线网络。

⬆ 返回顶部

138. 如何在 React Native 中进行日志记录？

     你可以使用 console.log、console.warn 等方法。从 React Native v0.29 开始，你只需运行以下命令即可在控制台中查看日志：

     $ react-native log-ios
     $ react-native log-android
     

⬆ 返回顶部

139. 如何调试 React Native 应用？

     按照以下步骤调试 React Native 应用：

     1. 在 iOS 模拟器中运行你的应用。
     2. 按下 Command + D，此时会打开一个网页 http://localhost:8081/debugger-ui。
     3. 启用“Pause On Caught Exceptions”（在捕获到异常时暂停）以获得更好的调试体验。
     4. 按下 Command + Option + I 打开 Chrome 开发者工具，或者通过“View”（视图）->“Developer”（开发者）->“Developer Tools”（开发者工具）打开。
     5. 现在你应该能够像平常一样进行调试了。

React 支持的库与集成

⬆ 返回顶部

140. 什么是 reselect？它是如何工作的？

     Reselect 是一个（用于 Redux 的）选择器库，它运用了 记忆化 的概念。它最初是为了从类 Redux 应用的状态中计算派生数据而编写的，但它并不绑定于任何架构或库。

     Reselect 会保留上次调用的输入/输出副本，并且只有当其中一个输入发生变化时才会重新计算结果。如果连续两次提供相同的输入，Reselect 会返回缓存的输出。它的记忆化和缓存是完全可自定义的。

⬆ 返回顶部

141. 什么是 Flow？

     Flow 是一个 静态类型检查器，旨在发现 JavaScript 中的类型错误。Flow 类型能够表达比传统类型系统更细粒度的区分。例如，与大多数类型系统不同，Flow 可以帮助你捕获涉及 null 的错误。

⬆ 返回顶部

142. Flow 和 PropTypes 有什么区别？

     Flow 是一个 静态分析工具（静态检查器），它使用该语言的超集，允许你为所有代码添加类型注解，并在编译时捕获一整类错误。

     PropTypes 是一个 基本类型检查器（运行时检查器），它是 React 的附加功能。它只能检查传递给特定组件的 props 的类型。如果你希望为整个项目进行更灵活的类型检查，Flow/TypeScript 是合适的选择。

⬆ 返回顶部

143. 如何在 React 中使用 Font Awesome 图标？

     按照以下步骤在 React 中引入 Font Awesome：

     1. 安装 font-awesome：

        $ npm install --save font-awesome
        

     2. 在你的 index.js 文件中导入 font-awesome：

        import "font-awesome/css/font-awesome.min.css";
        

     3. 在 className 中添加 Font Awesome 类：

        function MyComponent {
          return <div><i className={'fa fa-spinner'} /></div>
        }
        

⬆ 返回顶部

144. 什么是 React Dev Tools？

     React Developer Tools 允许你检查组件层次结构，包括组件的 props 和 state。它既可以作为浏览器扩展（适用于 Chrome 和 Firefox），也可以作为独立应用（适用于其他环境，包括 Safari、IE 和 React Native）。

     官方扩展适用于不同的浏览器或环境：

     1. Chrome 扩展
     2. Firefox 扩展
     3. 独立应用（Safari、React Native 等）

⬆ 返回顶部

145. 为什么 DevTools 在 Chrome 中无法加载本地文件？

     如果你在浏览器中打开本地 HTML 文件（file://...），则必须先打开“Chrome 扩展程序”并勾选“允许访问文件 URL”。

⬆ 返回顶部

146. 如何在 React 中使用 Polymer？

     要在 React 中使用 Polymer，需要按照以下步骤操作：

     1. 创建一个 Polymer 元素：

        <link
          rel="import"
          href="../../bower_components/polymer/polymer.html"
        />;
        Polymer({
          is: "calendar-element",
          ready: function () {
            this.textContent = "I am a calendar";
          },
        });
        

     2. 通过在 HTML 文档中导入来创建 Polymer 组件 HTML 标签，例如，在 React 应用的 index.html 中导入：

        <link
          rel="import"
          href="./src/polymer-components/calendar-element.html"
        />
        

     3. 在 JSX 文件中使用该元素：

        export default function MyComponent {
          return <calendar-element />;
        }
        

⬆ 返回顶部

147. React 相比 Vue.js 有哪些优势？

     React 相比 Vue.js 具有以下优势：

     1. 在大型应用开发中提供更大的灵活性。
     2. 更容易测试。
     3. 适合创建移动应用。
     4. 可获取的信息和解决方案更多。

注意： 以上优势列表纯属个人观点，可能因专业经验而异，但它们可作为基本参考依据。

⬆ 返回顶部

148. React 和 Angular 有什么区别？

     让我们通过表格形式看看 React 和 Angular 的区别。

     React	Angular
     React 是一个库，仅包含视图层	Angular 是一个框架，具有完整的 MVC 功能
     React 处理服务器端渲染	AngularJS 仅在客户端渲染，但 Angular 2 及以上版本支持服务器端渲染
     React 使用 JSX，看起来像 JS 中的 HTML，可能会造成混淆	Angular 采用模板化的 HTML 方法，使代码更简洁易懂
     React Native 是 React 的一种类型，用于构建移动应用，速度更快且更稳定	Ionic 作为 Angular 的移动原生应用，相对不够稳定且速度较慢
     在 React 中，数据仅单向流动，因此调试更容易	在 Angular 中，数据双向流动，即子组件和父组件之间存在双向数据绑定，因此调试往往比较困难

注意： 以上区别列表纯属个人观点，可能因专业经验而异，但它们可作为基本参考依据。

⬆ 返回顶部

149. 为什么 React 选项卡在 DevTools 中不显示？

     页面加载时，React DevTools 会设置一个名为 __REACT_DEVTOOLS_GLOBAL_HOOK__ 的全局变量，然后 React 在初始化期间会与此钩子进行通信。如果网站未使用 React，或者 React 无法与 DevTools 通信，那么该选项卡就不会显示。

⬆ 返回顶部

150. 什么是 Styled Components？

     styled-components 是一个用于为 React 应用设置样式的 JavaScript 库。它消除了样式和组件之间的映射关系，让你能够编写用 JavaScript 增强的实际 CSS。

⬆ 返回顶部

151. 给出一个 Styled Components 的示例？

     让我们创建具有特定样式的 <Title> 和 <Wrapper> 组件。

     import React from "react";
     import styled from "styled-components";
     
     // 创建一个 <Title> 组件，它渲染一个 <h1>，居中显示、红色、大小为 1.5em
     const Title = styled.h1`
       font-size: 1.5em;
       text-align: center;
       color: palevioletred;
     `;
     
     // 创建一个 <Wrapper> 组件，它渲染一个 <section>，带有一些内边距和木瓜奶色背景
     const Wrapper = styled.section`
       padding: 4em;
       background: papayawhip;
     `;
     

     现在，Title 和 Wrapper 这两个变量是组件，你可以像渲染其他任何 React 组件一样渲染它们。

     <Wrapper>
       <Title>{"让我们开始使用第一个 styled component！"}</Title>
     </Wrapper>
     

⬆ 返回顶部

152. 什么是 Relay？

     Relay 是一个 JavaScript 框架，用于为使用 React 视图层的 Web 应用程序提供数据层和客户端 - 服务器通信。

⬆ 返回顶部

其他

153. Reselect 库的主要特性是什么？

     让我们看看 Reselect 库的主要特性：

     1. 选择器可以计算派生数据，使 Redux 能够存储尽可能精简的状态。
     2. 选择器具有高效性。只有当选择器的某个参数发生变化时，它才会重新计算。
     3. 选择器具有可组合性。它们可以作为其他选择器的输入。

154. 请给出 Reselect 的使用示例？

     让我们通过 Reselect 的简化用法来计算发货订单的各种金额：

     import { createSelector } from "reselect";
     
     const shopItemsSelector = (state) => state.shop.items;
     const taxPercentSelector = (state) => state.shop.taxPercent;
     
     const subtotalSelector = createSelector(shopItemsSelector, (items) =>
       items.reduce((acc, item) => acc + item.value, 0)
     );
     
     const taxSelector = createSelector(
       subtotalSelector,
       taxPercentSelector,
       (subtotal, taxPercent) => subtotal * (taxPercent / 100)
     );
     
     export const totalSelector = createSelector(
       subtotalSelector,
       taxSelector,
       (subtotal, tax) => ({ total: subtotal + tax })
     );
     
     let exampleState = {
       shop: {
         taxPercent: 8,
         items: [
           { name: "apple", value: 1.2 },
           { name: "orange", value: 0.95 },
         ],
       },
     };
     
     console.log(subtotalSelector(exampleState)); // 2.15
     console.log(taxSelector(exampleState)); // 0.172
     console.log(totalSelector(exampleState)); // { total: 2.322 }
     

⬆ 返回顶部

155. Redux 是否只能与 React 一起使用？

     Redux 可以用作任何 UI 层的数据存储。最常见的用法是与 React 和 React Native 一起使用，但也有适用于 Angular、Angular 2、Vue、Mithril 等的绑定库。Redux 提供了一种订阅机制，可供任何其他代码使用。

⬆ 返回顶部

156. 使用 Redux 是否需要特定的构建工具？

     Redux 最初是用 ES6 编写的，并通过 Webpack 和 Babel 转译为生产环境的 ES5。无论您使用何种 JavaScript 构建流程，都应该能够使用它。Redux 还提供了 UMD 构建版本，可以直接使用，完全不需要任何构建流程。

⬆ 返回顶部

157. Redux Form 的 initialValues 如何从 state 中更新？

     您需要添加 enableReinitialize: true 设置。

     const InitializeFromStateForm = reduxForm({
       form: "initializeFromState",
       enableReinitialize: true,
     })(UserEdit);
     

     如果您的 initialValues 属性得到更新，您的表单也会随之更新。

⬆ 返回顶部

158. React PropTypes 如何允许一个 prop 接受不同的类型？

     您可以使用 PropTypes 的 oneOfType() 方法。

     例如，height 属性可以定义为 string 或 number 类型，如下所示：

     Component.propTypes = {
       size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     };
     

⬆ 返回顶部

159. 我可以将 SVG 文件作为 React 组件导入吗？

     您可以直接将 SVG 作为组件导入，而不是作为文件加载。此功能在 react-scripts@2.0.0 及更高版本中可用。

     import { ReactComponent as Logo } from "./logo.svg";
     
     const App = () => (
       <div>
         {/* Logo 是一个实际的 React 组件 */}
         <Logo />
       </div>
     );
     

     注意：不要忘记 import 语句中的花括号。

⬆ 返回顶部

160. React 中的渲染劫持（render hijacking）是什么？

     渲染劫持的概念是指能够从另一个组件控制某个组件的输出。这意味着您通过将组件包装到高阶组件（Higher-Order Component）中来装饰它。通过包装，您可以注入额外的 props 或进行其他更改，从而可能改变渲染逻辑。它实际上并不启用“劫持”，而是通过使用 HOC 使您的组件表现出不同的行为。

⬆ 返回顶部

161. 如何向 React 组件传递数字？

     我们可以使用花括号 {} 将 numbers 作为 props 传递给 React 组件，而 strings 则使用双引号 "" 或单引号 ''

     import React from "react";
     
     const ChildComponent = ({ name, age }) => {
       return (
         <>
           我的名字是 {name}，年龄是 {age}
         </>
       );
     };
     
     const ParentComponent = () => {
       return (
         <>
           <ChildComponent name="Chetan" age={30} />
         </>
       );
     };
     
     export default ParentComponent;
     

⬆ 返回顶部

162. 我需要将所有状态都放入 Redux 吗？我应该使用 React 的内部状态吗？

     这取决于开发者的决定，即确定应用程序由哪些类型的状态组成，以及每部分状态应该存放在哪里是开发者的职责。有些用户喜欢将每一个数据都保存在 Redux 中，以便始终维护应用程序的完全可序列化和可控版本。另一些用户则喜欢将非关键或 UI 状态（例如“此下拉菜单当前是否打开”）保存在组件的内部状态中。

     以下是一些经验法则，用于确定哪些类型的数据应该放入 Redux：

     1. 应用程序的其他部分是否关心此数据？
     2. 您是否需要能够基于此原始数据创建进一步的派生数据？
     3. 相同的数据是否用于驱动多个组件？
     4. 能够将此状态恢复到特定时间点（即时间旅行调试）对您有价值吗？
     5. 您是否想要缓存数据（即，如果状态中已有数据，则使用它而不是重新请求）？

⬆ 返回顶部

163. React 中 registerServiceWorker 的目的是什么？

     React 默认会为您创建一个无需任何配置的 service worker。Service worker 是一个 Web API，它帮助您缓存资源和其他文件，这样当用户处于离线状态或网络缓慢时，他/她仍然可以在屏幕上看到结果。因此，它帮助您构建更好的用户体验，这是您现在应该了解的关于 service worker 的全部内容。它全部是关于为您的网站添加离线功能。

     import React from "react";
     import ReactDOM from "react-dom";
     import App from "./App";
     import registerServiceWorker from "./registerServiceWorker";
     
     ReactDOM.render(<App />, document.getElementById("root"));
     registerServiceWorker();
     

⬆ 返回顶部

164. React memo 函数是什么？

     类组件可以通过 PureComponent 或 shouldComponentUpdate 来限制在输入 props 相同时不重新渲染。现在，您可以通过将函数组件包装在 React.memo 中来实现同样的功能。

     const MyComponent = React.memo(function MyComponent(props) {
       /* 仅在 props 变化时重新渲染 */
     });
     

⬆ 返回顶部

165. React lazy 函数是什么？

     React.lazy 函数允许您将动态导入渲染为常规组件。当该组件被渲染时，它将自动加载包含 OtherComponent 的 bundle。这必须返回一个 Promise，该 Promise 解析为一个包含 React 组件默认导出的模块。

     const OtherComponent = React.lazy(() => import("./OtherComponent"));
     
     function MyComponent() {
       return (
         <div>
           <OtherComponent />
         </div>
       );
     }
     

     注意： React.lazy 和 Suspense 目前尚不支持服务器端渲染。如果您想在服务器渲染的应用中进行代码分割，我们仍然推荐使用 React Loadable。

⬆ 返回顶部

166. 如何使用 setState 防止不必要的更新？

     您可以将状态的当前值与现有状态值进行比较，并决定是否重新渲染页面。如果值相同，则需要返回 null 以停止重新渲染，否则返回最新的状态值。

     例如，用户个人资料信息的条件渲染如下：

     getUserProfile = (user) => {
       const latestAddress = user.address;
       this.setState((state) => {
         if (state.address === latestAddress) {
           return null;
         } else {
           return { title: latestAddress };
         }
       });
     };
     

⬆ 返回顶部

167. 如何在 React 16 版本中渲染数组、字符串和数字？

     注意： 此问题引用 React 16。这些特性在当前 React 版本（18/19）中仍然有效。

     数组：从 React 16 开始，您可以通过返回数组或使用 Fragments 来返回多个同级元素，而无需包裹元素。

     数组方式：

     const ReactJSDevs = () => {
       return [
         <li key="1">John</li>,
         <li key="2">Jackie</li>,
         <li key="3">Jordan</li>,
       ];
     };
     

     Fragment 方式（推荐）：

     const ReactJSDevs = () => {
       return (
         <>
           <li>John</li>
           <li>Jackie</li>
           <li>Jordan</li>
         </>
       );
     };
     

     您也可以将此项目数组合并到另一个数组组件中。

     const JSDevs = () => {
       return (
         <ul>
           <li>Brad</li>
           <li>Brodge</li>
           <ReactJSDevs />
           <li>Brandon</li>
         </ul>
       );
     };
     

     字符串和数字： 您也可以从 render 方法返回字符串和数字类型。

     render() {
      return '欢迎来到 ReactJS 问题';
     }
     // 数字
     render() {
      return 2018;
     }
     

⬆ 返回顶部

168. 什么是 Hooks？

     Hooks 是一种特殊的 JavaScript 函数，允许您在不编写类的情况下使用状态和其他 React 特性。此模式作为 React 16.8 中的新功能引入，有助于将有状态逻辑与组件隔离开来。

     让我们看一个 useState Hook 的例子：

     import { useState } from "react";
     
     function Example() {
       // 声明一个新的状态变量，我们将其称为 "count"
       const [count, setCount] = useState(0);
     
       return (
         <>
           <p>您点击了 {count} 次</p>
           <button onClick={() => setCount(count + 1)}>点击我</button>
         </>
       );
     }
     

     注意： Hooks 可以在现有的函数组件内部使用，而无需重写组件。

⬆ 返回顶部

169. 使用 Hooks 需要遵循哪些规则？

     为了使用 Hooks，您需要遵循两条规则：

     1. 只在 React 函数的顶层调用 Hooks：您应该始终在 React 函数的顶层使用 Hooks，在任何提前返回之前。即，您不应该在循环、条件或嵌套函数中调用 Hooks。这将确保 Hooks 在每次组件渲染时都以相同的顺序被调用，并且由于 useState 和 useEffect 的调用，Hooks 的状态在多次重新渲染之间得以保留。

     让我们通过一个例子来看区别： 正确用法：

     function UserProfile() {
      // 正确：Hooks 在顶层调用
      const [name, setName] = useState('John');
      const [country, setCountry] = useState('US');
     
      return (
        <div>
          <h1>姓名：{name}</h1>
          <p>国家：{country}</p>
        </div>
      );
     }
     

     错误用法：

     function UserProfile() {
      const [name, setName] = useState('John');
     
      if (name === 'John') {
        // 错误：useState 在条件语句内部调用
        const [country, setCountry] = useState('US'); 
      }
     
      return (
        <div>
          <h1>姓名：{name}</h1>
          <p>国家：{country}</p> {/* 如果 name 条件不满足，这将抛出错误 */}
        </div>
      );
     }
     

     国家字段的 useState Hook 在 if 块中被有条件地调用。这可能导致不一致的状态行为，并可能导致 Hooks 在每次重新渲染时以不同的顺序被调用。

     2. 只从 React 函数中调用 Hooks：您不应该从常规的 JavaScript 函数或类组件中调用 Hooks。相反，您应该从函数组件或自定义 Hooks 中调用它们。

     让我们通过以下示例找出正确和错误用法的区别：

     正确用法：

     // 示例 1：
     function Counter() {
      // 正确：useState 在函数组件内部使用
      const [count, setCount] = useState(0);
     
      return <div>计数器：{count}</div>;
     }
     // 示例 2：
     function useFetchData(url) {
      const [data, setData] = useState(null);
     
      useEffect(() => {
        fetch(url)
          .then((response) => response.json())
          .then((data) => setData(data));
      }, [url]);
     
      return data;
     }
     
     function UserProfile() {
      // 正确：在此处使用自定义 Hook
      const user = useFetchData('https://some-api.com/user');
     
      return (
        <div>
          <h1>{user ? user.name : '加载个人资料中...'}</h1>
        </div>
      );
     }
     

     错误用法：

      // 示例 1
      function normalFunction() {
        // 错误：不能在普通函数中调用 Hooks
        const [count, setCount] = useState(0); 
      }
     
      // 示例 2
      function fetchData(url) {
        // 错误：Hooks 不能在非 React 函数中使用
        const [data, setData] = useState(null);
     
        useEffect(() => {
          fetch(url)
            .then((response) => response.json())
            .then((data) => setData(data));
        }, [url]);
     
        return data;
      }
     

     在上面的错误用法示例中，useState 和 useEffect 都在非 React 函数（normalFunction 和 fetchData）中使用，这是不允许的。

⬆ 返回顶部

170. 如何确保项目中遵循了 Hooks 规则？

     React 团队发布了一个名为 eslint-plugin-react-hooks 的 ESLint 插件，用于强制执行 Hook 的两条规则。它是 Hooks API 的一部分。您可以使用以下命令将此插件添加到您的项目中：

     npm install eslint-plugin-react-hooks --save-dev
     

     并在您的 ESLint 配置文件中应用以下配置：

     // 您的 ESLint 配置
     {
       "plugins": [
         // ...
         "react-hooks"
       ],
       "rules": {
         // ...
         "react-hooks/rules-of-hooks": "error"
       }
     }
     

     该插件还通过 react-hooks/exhaustive-deps 提供了另一个重要规则。它确保 useEffect、useCallback 和 useMemo Hooks 的依赖项被正确列出，以避免潜在的错误。

     useEffect(() => {
       // 忘记 `message` 将导致不正确的行为
       console.log(message);
     }, []); // 这里 `message` 应该是一个依赖项
     

     推荐的 eslint-config-react-app 预设已经包含了此插件的 Hooks 规则。 例如，linter 强制要求 Hooks 的命名约定。如果您将带有前缀 "use" 的自定义 Hooks 重命名为其他名称，那么 linter 将不再允许您在自定义 Hook 内部调用诸如 useState、useEffect 等内置 Hooks。

     注意： 此插件默认情况下旨在用于 Create React App。

⬆ 返回顶部

171. Flux 和 Redux 之间有什么区别？

     以下是 Flux 和 Redux 之间的主要区别：

     Flux	Redux
     状态是可变的	状态是不可变的
     Store 包含状态和变更逻辑	Store 和变更逻辑是分离的
     可以存在多个 Store	只存在一个 Store
     所有 Store 是相互独立且扁平的	单个 Store 带有层级化的 reducers
     有一个单例 dispatcher	没有 dispatcher 的概念
     React 组件订阅 Store	容器组件使用 connect 函数

⬆ 返回顶部

172. React Router V4 的优点是什么？

     以下是 React Router V4 模块的主要优点：

     1. 在 React Router v4（版本 4）中，API 完全围绕组件。路由器可以被可视化为一个单一的组件（<BrowserRouter>），它包装了特定的子路由器组件（<Route>）。
     2. 您不需要手动设置 history。路由器模块会通过用 <BrowserRouter> 组件包装路由来处理 history。
     3. 通过仅添加特定的路由器模块（Web、core 或 native），减小了应用程序的大小。

⬆ 返回顶部

173. 你能描述一下 componentDidCatch 生命周期方法的签名吗？

     componentDidCatch 生命周期方法在后代组件抛出错误后被调用。该方法接收两个参数：

     1. error: - 被抛出的错误对象
     2. info: - 一个具有 componentStack 键的对象，包含有关哪个组件抛出错误的信息。

     方法结构如下：

     componentDidCatch(error, info);
     

⬆ 返回顶部

174. 在哪些场景下错误边界（error boundaries）不会捕获错误？

     以下是错误边界不起作用的情况：

     1. 事件处理程序内部
     2. 使用 setTimeout 或 requestAnimationFrame 回调的异步代码
     3. 服务器端渲染期间
     4. 当错误在错误边界自身的代码中抛出时

⬆ 返回顶部

175. React 16 中未捕获错误的行为是什么？

     注意： 此行为在 React 16 中引入，并在 React 18/19 中继续存在。

     在 React 16+ 中，任何未被错误边界捕获的错误都将导致整个 React 组件树被卸载。做出此决定的原因是，留下损坏的 UI 比完全移除它更糟糕。例如，对于支付应用来说，显示错误的金额比不显示任何内容更糟糕。

     最佳实践： 始终将您的应用程序或关键部分包装在错误边界中，以防止完全卸载并提供更好的用户体验。

     <ErrorBoundary fallback={<ErrorPage />}>
       <App />
     </ErrorBoundary>
     

⬆ 返回顶部

176. 错误边界的正确放置位置是什么？

     错误边界使用的粒度取决于开发者基于项目需求的决定。您可以采用以下任一方法：
     1. 您可以包装顶级路由组件，为整个应用程序显示通用错误消息。
     2. 您也可以将单个组件包装在错误边界中，以防止它们崩溃应用程序的其余部分。

⬆ 返回顶部

177. 错误边界提供的组件堆栈跟踪有什么好处？

     除了错误消息和 JavaScript 堆栈外，React 16 会利用错误边界概念显示带有文件名和行号的组件堆栈跟踪。

     例如，BuggyCounter 组件会如下显示组件堆栈跟踪：

     

⬆ Back to Top

178. 什么是默认 props？

     defaultProps 可以定义为组件的一个属性，用于为 props 设置默认值。这些默认 props 在未提供 props（即 props 为 undefined）时使用，但不适用于 null 或 0 作为 props 的情况。也就是说，如果你提供了 null 值，它将保持 null；对于 0 也是同样的行为。

     例如，我们为按钮组件创建 color 默认 prop：

     function MyButton {
       // ...
     }
     
     MyButton.defaultProps = {
       color: "red",
     };
     

     如果未提供 props.color，则会将默认值设置为 'red'。即，当你尝试访问 color prop 时，它会使用默认值。

     function MyButton() {
       return <MyButton />; // props.color 将包含 red 值
     }
     

⬆ Back to Top

179. displayName 类属性的作用是什么？

     displayName 字符串用于调试消息。通常，你不需要显式设置它，因为它会从定义组件的函数或类的名称中推断出来。如果你希望为调试目的显示不同的名称，或者在创建高阶组件时，可能需要显式设置它。

     例如，为了便于调试，选择一个能表明它是 withSubscription HOC 结果的 displayName。

     function withSubscription(WrappedComponent) {
       class WithSubscription extends React.Component {
         /* ... */
       }
       WithSubscription.displayName = `WithSubscription(${getDisplayName(
         WrappedComponent
       )})`;
       return WithSubscription;
     }
     function getDisplayName(WrappedComponent) {
       return (
         WrappedComponent.displayName || WrappedComponent.name || "Component"
       );
     }
     

⬆ Back to Top

180. React 应用程序的浏览器支持情况如何？

     React 支持所有主流浏览器，包括 Internet Explorer 9 及更高版本，不过对于较旧的浏览器（如 IE 9 和 IE 10），可能需要一些 polyfill。如果你使用 es5-shim 和 es5-sham polyfill，那么它甚至可以支持那些不支持 ES5 方法的旧浏览器。

⬆ Back to Top

181. 什么是代码分割（code-splitting）？

     代码分割是 Webpack 和 Browserify 等打包工具支持的一项功能，它可以创建多个 bundle，并在运行时动态加载。React 项目通过动态 import() 特性支持代码分割。

     例如，在下面的代码片段中，moduleA.js 及其所有唯一依赖项将被打包成一个单独的 chunk，仅在用户点击“Load”按钮后才加载。

     moduleA.js

     const moduleA = "Hello";
     
     export { moduleA };
     

     App.js

     export default function App {
       function handleClick() {
         import("./moduleA")
           .then(({ moduleA }) => {
             // 使用 moduleA
           })
           .catch((err) => {
             // 处理加载失败
           });
       };
     
      return (
        <div>
          <button onClick={this.handleClick}>Load</button>
        </div>
      );
     }
     

    import React, { Component } from "react";

     class App extends Component {
       handleClick = () => {
         import("./moduleA")
           .then(({ moduleA }) => {
             // Use moduleA
           })
           .catch((err) => {
             // Handle failure
           });
       };

       render() {
         return (
           <div>
             <button onClick={this.handleClick}>Load</button>
           </div>
         );
       }
     }

     export default App;

⬆ Back to Top

182. 什么是带键的片段（Keyed Fragments）？

     使用显式 <React.Fragment> 语法声明的片段可以拥有键（keys）。常见的使用场景是将一个集合映射为片段数组，如下所示：

     function Glossary(props) {
       return (
         <dl>
           {props.items.map((item) => (
             // 如果没有 `key`，React 会触发键警告
             <React.Fragment key={item.id}>
               <dt>{item.term}</dt>
               <dd>{item.description}</dd>
             </React.Fragment>
           ))}
         </dl>
       );
     }
     

     注意： key 是唯一可以传递给 Fragment 的属性。未来可能会支持其他属性，例如事件处理程序。

⬆ Back to Top

183. React 是否支持所有 HTML 属性？

     从 React 16 开始，标准 DOM 属性和自定义 DOM 属性都得到了完全支持。由于 React 组件通常同时接收自定义属性和与 DOM 相关的属性，React 采用了与 DOM API 类似的驼峰式命名（camelCase）约定。

     以下是一些与标准 HTML 属性对应的 props 示例：

     <div tabIndex="-1" />      // 类似于 node.tabIndex DOM API
     <div className="Button" /> // 类似于 node.className DOM API
     <input readOnly={true} />  // 类似于 node.readOnly DOM API
     

     这些 props 的工作方式与相应的 HTML 属性类似，但有一些特殊情况除外。React 也支持所有 SVG 属性。

⬆ Back to Top

184. 组件 props 在什么情况下会默认设为 true？

     如果你不为某个 prop 传递值，它会默认设为 true。这种行为是为了与 HTML 的行为保持一致。

     例如，以下表达式是等效的：

     <MyInput autocomplete />
     
     <MyInput autocomplete={true} />
     

     注意： 不建议使用这种方式，因为它可能会与 ES6 对象的简写语法（例如 {name} 等价于 {name: name}）产生混淆。

⬆ Back to Top

185. 什么是 NextJS 及其主要特性？

     Next.js 是一个流行且轻量级的框架，用于构建基于 React 的静态和服务端渲染应用。它还提供了样式和路由解决方案。以下是 NextJS 提供的主要特性：

     1. 默认支持服务端渲染
     2. 自动代码分割，加快页面加载速度
     3. 简单的客户端路由（基于页面）
     4. 基于 Webpack 的开发环境，支持热模块替换（HMR）
     5. 能够与 Express 或任何其他 Node.js HTTP 服务器集成
     6. 可通过自定义 Babel 和 Webpack 配置进行个性化设置

⬆ Back to Top

186. 如何将事件处理程序传递给组件？

     你可以将事件处理程序和其他函数作为 props 传递给子组件。函数可以按以下方式传递给子组件：

     function Button({ onClick }) {
       return <button onClick={onClick}>Download</button>;
     }
     
     export default function downloadExcel() {
       function handleClick() {
         alert("Downloaded");
       }
     
       return <Button onClick={handleClick}></Button>;
     }
     

⬆ Back to Top

187. 如何防止函数被多次调用？

     如果你使用如 onClick 或 onScroll 之类的事件处理程序，并且希望防止回调函数触发过快，可以限制回调函数的执行频率。这可以通过以下几种方式实现：

     1. 节流（Throttling）： 基于时间频率进行变化。例如，可以使用 lodash 的 _.throttle 函数。
     2. 防抖（Debouncing）： 在一段不活动期后发布变化。例如，可以使用 lodash 的 _.debounce 函数。
     3. RequestAnimationFrame 节流： 基于 requestAnimationFrame 进行变化。例如，可以使用 lodash 的 raf-schd 函数。

⬆ Back to Top

188. JSX 如何防止注入攻击？

     React DOM 会在渲染前转义嵌入在 JSX 中的任何值。因此，它确保你永远无法注入任何未在应用程序中显式编写的内容。所有内容在渲染前都会被转换为字符串。

     例如，你可以像下面这样嵌入用户输入：

     const name = response.potentiallyMaliciousInput;
     const element = <h1>{name}</h1>;
     

     这样可以防止应用程序中的 XSS（跨站脚本）攻击。

⬆ Back to Top

189. 如何更新已渲染的元素？

     你可以通过将新创建的元素传递给 ReactDOM 的 render 方法来更新 UI（由已渲染元素表示）。

     例如，让我们以一个滴答作响的时钟为例，它通过多次调用 render 方法来更新时间：

     function tick() {
       const element = (
         <div>
           <h1>Hello, world!</h1>
           <h2>现在是 {new Date().toLocaleTimeString()}。</h2>
         </div>
       );
       ReactDOM.render(element, document.getElementById("root"));
     }
     
     setInterval(tick, 1000);
     

⬆ Back to Top

190. 为什么说 props 是只读的？

     当你将组件声明为函数或类时，它绝不能修改自己的 props。

     让我们来看下面这个计算本金的函数：

     function capital(amount, interest) {
       return amount + interest;
     }
     

     上面的函数被称为“纯函数”，因为它不会尝试更改输入，并且对于相同的输入总是返回相同的结果。因此，React 有一条规则：“所有 React 组件在使用 props 时都必须像纯函数一样行事。”