300+ 个 React 面试问题

今天我从这个很棒的repo中准备了一份很长的 React 面试问题清单。

欲了解更多信息，我开发了一个项目，其中包含 500 多个面向前端开发人员的问题

这里是：https://iq.js.org/

如果您喜欢这篇文章，请添加到书签以供将来使用并关注我：

目录

核心反应

什么是 React？

React 是一个开源前端 JavaScript 库，用于构建用户界面，尤其是单页应用程序。它用于处理 Web 和移动应用程序的视图层。React 由Facebook 软件工程师Jordan Walke创建。React 于 2011 年首次部署在 Facebook 的 News Feed 上，并于 2012 年部署在 Instagram 上。

⬆ 返回顶部

React 的主要特性是什么？

React 的主要特性包括：

• 考虑到 RealDOM 操作成本高昂，它使用VirtualDOM而不是 RealDOM。
• 支持服务器端渲染。
• 遵循单向数据流或数据绑定。
• 使用可重复使用/可组合的UI 组件来开发视图。

⬆ 返回顶部

什么是 JSX？

JSX是 ECMAScript（ JavaScript XML的缩写）的一种类似 XML 的语法扩展。本质上，它只是为函数提供了语法糖React.createElement()，让我们既能拥有 JavaScript 的表达能力，又能拥有类似 HTML 的模板语法。

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

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>{'Welcome to React world!'}</h1>
      </div>
    );
  }
}

⬆ 返回顶部

元素和组件有什么区别？

元素是一个普通的对象，它描述了你希望在屏幕上显示的内容（以 DOM 节点或其他组件的形式）。元素可以在其 props 中包含其他元素。创建 React 元素的成本很低。元素一旦创建，就永远不会改变。

React Element 的对象表示如下：

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

上述React.createElement()函数返回一个对象：

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

最后使用以下命令渲染到 DOM ReactDOM.render()：

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

组件可以用多种不同的方式声明。它可以是一个带有方法的类。或者，在简单的情况下，它可以定义为一个函数。render()无论哪种情况，它都接受 props 作为输入，并返回一个 JSX 树作为输出：

const Button = ({ onLogin }) => (
  <div id={'login-btn'} onClick={onLogin}>
    Login
  </div>
);

然后 JSX 被转换为React.createElement()函数树：

const Button = ({ onLogin }) =>
  React.createElement('div', { id: 'login-btn', onClick: onLogin }, 'Login');

⬆ 返回顶部

如何在 React 中创建组件？

有两种可能的方法可以创建组件。

1. 函数组件：这是创建组件最简单的方法。这些是纯 JavaScript 函数，接受 props 对象作为第一个参数，并返回 React 元素：

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

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

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

⬆ 返回顶部

何时使用类组件而不是函数组件？

如果组件需要状态或生命周期方法，则使用类组件，否则使用函数组件。但是，从 React 16.8 开始，随着 Hooks 的加入，你可以在函数组件中使用状态、生命周期方法和其他仅在类组件中可用的功能。

⬆ 返回顶部

什么是纯组件？

React.PureComponent与 完全相同，React.Component只是它替shouldComponentUpdate()你处理了该方法。当 props 或 state 发生变化时，PureComponent会对 props 和 state 进行浅比较。而ComponentshouldComponentUpdate则不会将当前的 props 和 state 与下一个 props 和 state 进行比较。因此，每次调用时，组件都会默认重新渲染。

⬆ 返回顶部

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>
    );
  }
}

状态类似于道具，但它是私有的并且完全由组件控制。即，除了拥有和设置它的组件之外，任何组件都无法访问它。

⬆ 返回顶部

React 中的 props 是什么?

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

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

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

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

<Element reactProp={'1'} />

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

props.reactProp

⬆ 返回顶部

状态和道具有什么区别？

props和state都是普通的 JavaScript 对象。虽然它们都包含影响渲染输出的信息，但它们在组件中的功能有所不同。props 传递给组件的方式类似于函数参数，而 state 则在组件内部进行管理，类似于函数内声明的变量。

⬆ 返回顶部

为什么我们不应该直接更新状态？

如果您尝试直接更新状态，那么它将不会重新渲染组件。

//Wrong
this.state.message = 'Hello world';

请使用setState()方法。它会安排组件状态对象的更新。当状态发生变化时，组件会通过重新渲染来响应。

//Correct
this.setState({ message: 'Hello World' });

注意：您可以在构造函数中或使用最新的 javascript 的类字段声明语法直接分配给状态对象。

⬆ 返回顶部

回调函数作为的参数的目的是什么setState()？

回调函数在 setState 完成且组件渲染完成后调用。由于setState()是异步操作，因此回调函数可用于任何后续操作。

注意：建议使用生命周期方法而不是此回调函数。

setState({ name: 'John' }, () => console.log('The name has updated and component re-rendered'));

⬆ 返回顶部

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

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

1. 在 HTML 中，事件名称应小写：

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

而在 React 中它遵循camelCase约定：

<button onClick={activateLasers}>

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

<a href="#" onclick='console.log("The link was clicked."); return false;' />

而在 React 中你必须preventDefault()明确调用：

function handleClick(event) {
  event.preventDefault();
  console.log('The link was clicked.');
}

1. 在 HTML 中，您需要通过附加来调用该函数，()而在 React 中，您不应该附加()函数名称。（例如，参考第一点中的“activateLasers”函数）

⬆ 返回顶部

如何在 JSX 回调中绑定方法或事件处理程序？

有 3 种可能的方法可以实现此目的：

1. 构造函数中的绑定：在 JavaScript 类中，方法默认不绑定。同样适用于定义为类方法的 React 事件处理程序。通常我们在构造函数中绑定它们。

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

  handleClick() {
    // ...
  }
}

1. 公共类字段语法：如果您不喜欢使用绑定方法，那么可以使用公共类字段语法来正确绑定回调。

handleClick = () => {
  console.log('this is:', this);
};

<button onClick={this.handleClick}>{'Click me'}</button>

1. 回调中的箭头函数：您可以在回调中直接使用箭头函数。

<button onClick={(event) => this.handleClick(event)}>{'Click me'}</button>

注意：如果将回调作为 prop 传递给子组件，这些组件可能会进行额外的重新渲染。在这种情况下，考虑到性能.bind()，建议使用public class fields 语法。

⬆ 返回顶部

如何将参数传递给事件处理程序或回调？

您可以使用箭头函数来包装事件处理程序并传递参数：

<button onClick={() => this.handleClick(id)} />

这相当于调用.bind：

<button onClick={this.handleClick.bind(this, id)} />

除了这两种方法之外，你还可以将参数传递给定义为箭头函数的函数

<button onClick={this.handleClick(id)} />;
handleClick = (id) => () => {
  console.log('Hello, your ticket number is', id);
};

⬆ 返回顶部

React 中的合成事件是什么？

SyntheticEvent是浏览器原生事件的跨浏览器包装器。它的 API 与浏览器原生事件相同，包括 和stopPropagation()，preventDefault()但事件在所有浏览器中的工作方式相同。

⬆ 返回顶部

什么是内联条件表达式？

您可以使用JS 提供的if 语句或三元表达式来有条件地渲染表达式。除了这些方法之外，您还可以将任何表达式嵌入到 JSX 中，方法是将它们括在花括号中，然后跟上 JS 逻辑运算符&&。

<h1>Hello!</h1>;
{
  messages.length > 0 && !isLogin ? (
    <h2>You have {messages.length} unread messages.</h2>
  ) : (
    <h2>You don't have unread messages.</h2>
  );
}

⬆ 返回顶部

什么是“key”属性以及在元素数组中使用它有什么好处？

Akey是一个特殊的字符串属性，在创建元素数组时应该包含它。Key属性帮助 React 识别哪些元素发生了更改、被添加或被删除。

我们通常使用数据中的 ID 作为密钥：

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

当你没有渲染项目的稳定 ID 时，你可以使用项目索引作为键作为最后的手段：

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

笔记：

1. 如果项的顺序可能会发生变化，则不建议对键使用索引。这可能会对性能产生负面影响，并可能导致组件状态出现问题。
2. 如果您将列表项提取为单独的组件，则在列表组件上应用键而不是li标签。
3. key如果列表项中不存在该道具，控制台中将出现一条警告消息。

⬆ 返回顶部

refs 有什么用？

ref用于返回元素的引用。大多数情况下应该避免使用它们，但是，当你需要直接访问 DOM 元素或组件实例时，它们会很有用。

⬆ 返回顶部

如何创建 refs？

有两种方法

1. 这是最近添加的方法。ref使用方法创建，并通过属性附加到 React 元素上。为了在整个组件中使用 ref，只需在构造函数中将 ref 赋值给实例属性即可。React.createRef()ref

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

1. 无论 React 版本如何，你都可以使用 ref 回调方法。例如，搜索栏组件的 input 元素访问如下：

class SearchBar extends Component {
  constructor(props) {
    super(props);
    this.txtSearch = null;
    this.state = { term: '' };
    this.setInputSearchRef = (e) => {
      this.txtSearch = e;
    };
  }
  onInputChange(event) {
    this.setState({ term: this.txtSearch.value });
  }
  render() {
    return (
      <input
        value={this.state.term}
        onChange={this.onInputChange.bind(this)}
        ref={this.setInputSearchRef}
      />
    );
  }
}

你也可以通过闭包在函数组件中使用ref。注意：你也可以使用内联 ref 回调，尽管这不是推荐的方法。

⬆ 返回顶部

什么是前向引用？

Ref 转发是一项功能，它允许某些组件获取它们收到的ref，并将其进一步传递给子组件。

const ButtonElement = React.forwardRef((props, ref) => (
  <button ref={ref} className="CustomButton">
    {props.children}
  </button>
));

// Create ref to the DOM button:
const ref = React.createRef();
<ButtonElement ref={ref}>{'Forward Ref'}</ButtonElement>;

⬆ 返回顶部

回调 refs 和 findDOMNode() 中哪个是首选选项？

建议使用回调 refs而不是findDOMNode()API。因为它findDOMNode()会阻碍 React 未来某些功能的改进。

传统使用方法findDOMNode：

class MyComponent extends Component {
  componentDidMount() {
    findDOMNode(this).scrollIntoView();
  }

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

推荐的方法是：

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.node = createRef();
  }
  componentDidMount() {
    this.node.current.scrollIntoView();
  }

  render() {
    return <div ref={this.node} />;
  }
}

⬆ 返回顶部

为什么 String Refs 是遗留的？

如果您之前使用过 React，您可能熟悉一个较旧的 API，其中ref属性是字符串，例如ref={'textInput'}，并且 DOM 节点以 的形式访问this.refs.textInput。我们不建议这样做，因为字符串引用存在以下问题，并且被视为遗留问题。字符串引用已在 React v16 中被移除。

1. 它们强制 React 跟踪当前正在执行的组件。这很成问题，因为它使 React 模块具有状态，因此当 React 模块在 bundle 中重复时会导致奇怪的错误。
2. 它们不可组合——如果库在传递的子元素上放置了一个引用，用户就无法在其上放置另一个引用。回调引用完全可组合。
3. 它们不像 Flow 那样支持静态分析。Flow 无法猜测框架是如何让字符串引用出现在 上的this.refs，也无法猜测它的类型（类型可能不同）。回调引用对静态分析更友好。
4. 它不能像大多数人期望的那样使用“渲染回调”模式（例如）

class MyComponent extends Component {
  renderRow = (index) => {
    // This won't work. Ref will get attached to DataTable rather than MyComponent:
    return <input ref={'input-' + index} />;

    // This would work though! Callback refs are awesome.
    return <input ref={(input) => (this['input-' + index] = input)} />;
  };

  render() {
    return <DataTable data={this.props.data} renderRow={this.renderRow} />;
  }
}

⬆ 返回顶部

什么是虚拟 DOM？

虚拟DOM (VDOM) 是真实 DOM的内存表示。UI 的表示保存在内存中，并与“真实” DOM 同步。这是在调用渲染函数和元素显示在屏幕上之间发生的一个步骤。整个过程称为协调 (reconciliation)。

⬆ 返回顶部

虚拟 DOM 如何工作？

虚拟DOM 的工作原理分为三个简单的步骤。

1. 每当任何底层数据发生变化时，整个 UI 都会以虚拟 DOM 表示重新渲染。

1. 然后计算先前的 DOM 表示和新的 DOM 表示之间的差异。

1. 一旦计算完成，真实的 DOM 将仅更新实际发生变化的内容。

⬆ 返回顶部

Shadow DOM 和 Virtual DOM 有什么区别？

Shadow DOM是一种浏览器技术，主要用于在Web 组件中限定变量和 CSS 的作用域。Virtual DOM是由 JavaScript 库在浏览器 API 之上实现的概念。

⬆ 返回顶部

什么是 React Fiber？

Fiber 是 React v16 中新的协调引擎，或者说是核心算法的重新实现。React Fiber 的目标是提升其在动画、布局、手势、暂停、中止或重用工作以及为不同类型的更新分配优先级等领域的适用性，以及新的并发原语。

⬆ 返回顶部

React Fiber 的主要目标是什么？

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

⬆ 返回顶部

什么是受控组件？

在后续用户输入时控制表单内输入元素的组件称为受控组件，即每个状态突变都会有一个相关的处理程序函数。

例如，要将所有名称都写成大写字母，我们使用下面的 handleChange，

handleChange(event) {
this.setState({value: event.target.value.toUpperCase()})
}

⬆ 返回顶部

什么是不受控制的组件？

非受控组件是指在内部存储自身状态的组件，需要时可以使用 ref 查询 DOM 来获取其当前值。这更像传统的 HTML。

在下面的 UserProfile 组件中，name使用 ref 访问输入。

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>
    );
  }
}

大多数情况下，建议使用受控组件来实现表单。

⬆ 返回顶部

createElement 和 cloneElement 有什么区别？

JSX 元素将被转换为React.createElement()函数，以创建用于 UI 对象表示的 React 元素。而 则cloneElement用于克隆元素并向其传递新的 props。

⬆ 返回顶部

React 中的 Lifting State Up 是什么？

当多个组件需要共享相同的变化数据时，建议将共享状态提升到它们最近的共同祖先组件。这意味着，如果两个子组件共享来自其父组件的相同数据，则将状态移动到父组件，而不是在两个子组件中都维护本地状态。

⬆ 返回顶部

组件生命周期有哪些不同阶段？

组件生命周期有三个不同的生命周期阶段：

1. 挂载：组件已准备好挂载到浏览器 DOM 中。此阶段涵盖constructor()、getDerivedStateFromProps()、render()和componentDidMount()生命周期方法的初始化。

2. 更新：在此阶段，组件通过两种方式更新：发送新的 props 以及从setState()或更新状态forceUpdate()。此阶段涵盖getDerivedStateFromProps()、shouldComponentUpdate()、render()和生命周期方法getSnapshotBeforeUpdate()。componentDidUpdate()

3. 卸载：在最后一个阶段，组件不再需要，并从浏览器 DOM 中卸载。此阶段包含componentWillUnmount()生命周期方法。

值得一提的是，React 内部在 DOM 操作中有一个阶段的概念。它们被划分如下：

1. 渲染：组件将渲染，且不会产生任何副作用。这适用于纯组件，并且在此阶段，React 可以暂停、中止或重新启动渲染。

2. 预提交在组件实际将更改应用于 DOM 之前，有一个时刻允许 React 通过 从 DOM 读取getSnapshotBeforeUpdate()。

3. Commit React 与 DOM 协同工作，并分别执行componentDidMount()挂载、componentDidUpdate()更新和componentWillUnmount()卸载的最终生命周期。

React 16.3+ 阶段（或交互式版本）

React 16.3 之前

⬆ 返回顶部

React 的生命周期方法有哪些？

React 16.3 之前

• componentWillMount：渲染之前执行，用于根组件中的应用程序级别配置。
• componentDidMount：首次渲染后执行，所有 AJAX 请求、DOM 或状态更新以及设置的事件监听器都应该在这里发生。
• componentWillReceiveProps：当特定 prop 更新以触发状态转换时执行。
• shouldComponentUpdate：确定组件是否更新。默认情况下返回true。如果您确定组件在状态或属性更新后无需渲染，则可以返回 false 值。这是一个很好的提升性能​​的地方，因为它允许您在组件收到新的属性时避免重新渲染。
• componentWillUpdate：当 props 和 state 发生变化时，在重新渲染组件之前执行，并shouldComponentUpdate()返回 true。
• componentDidUpdate：主要用于响应 prop 或 state 的变化来更新 DOM。
• componentWillUnmount：它将用于取消任何传出的网络请求，或删除与组件关联的所有事件监听器。

React 16.3+

• getDerivedStateFromProps：在调用之前调用，并且每次render()渲染时都会调用。这适用于需要派生状态的罕见情况。如果你需要派生状态，值得一读。
• componentDidMount：首次渲染后执行，所有 AJAX 请求、DOM 或状态更新以及设置的事件监听器都应该在这里发生。
• shouldComponentUpdate：确定组件是否更新。默认情况下返回true。如果您确定组件在状态或属性更新后无需渲染，则可以返回 false 值。这是一个很好的提升性能​​的地方，因为它允许您在组件收到新的属性时避免重新渲染。
• getSnapshotBeforeUpdate：在渲染输出提交到 DOM 之前执行。此方法返回的任何值都将传入componentDidUpdate()。这对于从 DOM 中捕获信息（例如滚动位置）非常有用。
• componentDidUpdate：主要用于响应 prop 或 state 的变化来更新 DOM。如果shouldComponentUpdate()返回 ，则不会触发false。
• componentWillUnmount它将用于取消任何传出的网络请求，或删除与组件关联的所有事件监听器。

⬆ 返回顶部

什么是高阶组件？

高阶组件（HOC ）是一个函数，它接受一个组件作为参数并返回一个新组件。本质上，它是一种源自 React 组合特性的模式。

我们称它们为纯组件，因为它们可以接受任何动态提供的子组件，但它们不会修改或复制其输入组件的任何行为。

const EnhancedComponent = higherOrderComponent(WrappedComponent);

HOC 可用于多种用例：

1. 代码重用、逻辑和引导抽象。
2. 渲染劫持。
3. 状态抽象和操作。
4. 道具操控。

⬆ 返回顶部

如何为 HOC 组件创建 props 代理？

您可以使用props 代理模式添加/编辑传递给组件的 props，如下所示：

function HOC(WrappedComponent) {
  return class Test extends Component {
    render() {
      const newProps = {
        title: 'New Header',
        footer: false,
        showFeatureX: false,
        showFeatureY: true,
      };

      return <WrappedComponent {...this.props} {...newProps} />;
    }
  };
}

⬆ 返回顶部

什么是上下文？

Context提供了一种通过组件树传递数据的方法，而无需在每个级别手动传递 props。

例如，应用程序中的许多组件都需要访问经过身份验证的用户、语言环境偏好、UI 主题。

const { Provider, Consumer } = React.createContext(defaultValue);

⬆ 返回顶部

children 道具是什么？

Children是一个 prop ( this.props.children)，它允许你将组件作为数据传递给其他组件，就像你使用的任何其他 prop 一样。放置在组件开始和结束标签之间的组件树将作为childrenprop 传递给该组件。

React API 中有许多方法可以处理此 prop。其中包括React.Children.map、React.Children.forEach、React.Children.count、React.Children.only、React.Children.toArray。

children prop 的简单用法如下，

const MyDiv = React.createClass({
  render: function () {
    return <div>{this.props.children}</div>;
  },
});

ReactDOM.render(
  <MyDiv>
    <span>{'Hello'}</span>
    <span>{'World'}</span>
  </MyDiv>,
  node,
);

⬆ 返回顶部

如何在 React 中写评论？

React/JSX 中的注释类似于 JavaScript 多行注释，但用花括号括起来。

单行注释：

<div>
  {/* Single-line comments(In vanilla JavaScript, the single-line comments are represented by double slash(//)) */}
  {`Welcome ${user}, let's play React`}
</div>

多行注释：

<div>
  {/* Multi-line comments for more than
  one line */}
  {`Welcome ${user}, let's play React`}
</div>

⬆ 返回顶部

使用带有 props 参数的超级构造函数的目的是什么？

子类构造函数在方法调用之前不能使用this引用super()。ES6 子类也是如此。将 props 参数传递给 call 的主要原因是为了在子类构造函数中super()访问。this.props

传递道具：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    console.log(this.props); // prints { name: 'John', age: 42 }
  }
}

不传递道具：

class MyComponent extends React.Component {
  constructor(props) {
    super();

    console.log(this.props); // prints undefined

    // but props parameter is still available
    console.log(props); // prints { name: 'John', age: 42 }
  }

  render() {
    // no difference outside constructor
    console.log(this.props); // prints { name: 'John', age: 42 }
  }
}

上面的代码片段表明，this.props仅在构造函数内部有所不同。在构造函数外部，情况应该相同。

⬆ 返回顶部

什么是和解？

当组件的 props 或 state 发生变化时，React 会通过比较新返回的元素与之前渲染的元素来决定是否需要实际更新 DOM。如果它们不相等，React 将更新 DOM。这个过程称为协调 (reconciliation )。

⬆ 返回顶部

如何使用动态键名设置状态？

如果您使用 ES6 或 Babel 转换器来转换您的 JSX 代码，那么您可以使用计算属性名称来实现这一点。

handleInputChange(event) {
this.setState({ [event.target.id]: event.target.value })
}

⬆ 返回顶部

每次组件渲染时调用函数的常见错误是什么？

您需要确保在将函数作为参数传递时不会调用该函数。

render() {
// Wrong: handleClick is called instead of passed as a reference!
return <button onClick={this.handleClick()}>{'Click Me'}</button>
}

相反，传递函数本身而不使用括号：

render() {
// Correct: handleClick is passed as a reference!
return <button onClick={this.handleClick}>{'Click Me'}</button>
}

⬆ 返回顶部

惰性函数是否支持命名导出？

不，目前React.lazy函数仅支持默认导出。如果您想导入名为导出的模块，可以创建一个中间模块，将其重新导出为默认模块。这还能确保摇树优化持续有效，并且不会拉取未使用的组件。我们以一个导出多个名为组件的组件文件为例，

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

并MoreComponents.js在中间文件中重新导出组件IntermediateComponent.js

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

现在您可以使用惰性函数导入模块，如下所示，

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

⬆ 返回顶部

为什么 React 使用classNameoverclass属性？

classclassName是 JavaScript 中的关键字，而 JSX 是 JavaScript 的扩展。这就是 React 使用而不是 的主要原因class。传递一个字符串作为classNameprop。

render() {
return <span className={'menu navigation-menu'}>{'Menu'}</span>
}

⬆ 返回顶部

什么是碎片？

这是 React 中常见的模式，用于一个组件返回多个元素。Fragment允许你对子元素列表进行分组，而无需在 DOM 中添加额外的节点。

render() {
return (
  <React.Fragment>
    <ChildA />
    <ChildB />
    <ChildC />
  </React.Fragment>
)
}

还有一种更短的语法，但许多工具不支持它：

render() {
return (
  <>
    <ChildA />
    <ChildB />
    <ChildC />
  </>
)
}

⬆ 返回顶部

为什么 Fragment 比容器 div 更好？

以下是原因列表，

1. 由于不创建额外的 DOM 节点，Fragment 的速度更快，内存占用更少。这只有在非常大且深度极深的树上才会真正发挥作用。
2. 一些 CSS 机制（例如Flexbox和CSS Grid）具有特殊的父子关系，在中间添加 div 会使保持所需的布局变得困难。
3. DOM 检查器不再那么混乱。

⬆ 返回顶部

React 中的门户是什么？

Portal是一种推荐的方法，用于将子项渲染到父组件 DOM 层次结构之外的 DOM 节点中。

ReactDOM.createPortal(child, container);

第一个参数是任何可渲染的 React 子元素，例如元素、字符串或片段。第二个参数是 DOM 元素。

⬆ 返回顶部

什么是无状态组件？

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

⬆ 返回顶部

什么是有状态组件？

如果组件的行为依赖于组件的状态，则可以将其称为有状态组件。这些有状态组件始终是类组件，并且具有在 中初始化的状态constructor。

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

  render() {
    // ...
  }
}

React 16.8 更新：

Hooks 让您无需编写类即可使用状态和其他 React 功能。

等效函数组件

import React, {useState} from 'react';

const App = (props) => {
  const [count, setCount] = useState(0);

  return (
    // JSX
  )
}

⬆ 返回顶部

如何在 React 中对 props 应用验证？

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

预定义的 prop 类型集：

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

我们可以propTypes对User组件进行如下定义：

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 中，PropTypesReact.PropTypes已从库中移出prop-types。

⬆ 返回顶部

React 有哪些优点？

以下是 React 的主要优点：

1. 使用虚拟 DOM提高应用程序的性能。
2. JSX 使代码易于阅读和编写。
3. 它在客户端和服务器端（SSR）上呈现。
4. 由于它只是一个视图库，因此易于与框架（Angular、Backbone）集成。
5. 使用 Jest 等工具轻松编写单元和集成测试。

⬆ 返回顶部

React 有哪些局限性？

除了优点之外，React 也有一些限制，

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

⬆ 返回顶部

React v16 中的错误边界是什么？

错误边界是捕获其子组件树中任何位置的 JavaScript 错误、记录这些错误并显示后备 UI 而不是崩溃的组件树的组件。

componentDidCatch(error, info)如果类组件定义了一个名为或 的新生命周期方法，它就会成为错误边界static getDerivedStateFromError()：

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

  componentDidCatch(error, info) {
    // You can also log the error to an error reporting service
    logErrorToMyService(error, info);
  }

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return <h1>{'Something went wrong.'}</h1>;
    }
    return this.props.children;
  }
}

之后将其用作常规组件：

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

⬆ 返回顶部

React v15 中如何处理错误边界？

React v15使用方法为错误边界提供了非常基本的支持。在 React v16 中，unstable_handleError它已被重命名为。componentDidCatch

⬆ 返回顶部

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

通常，我们使用PropTypes 库（自 React v15.5 起React.PropTypes已移至包中）在 React 应用程序中进行类型检查。对于大型代码库，建议使用静态类型检查器（例如 Flow 或 TypeScript），它们在编译时执行类型检查并提供自动完成功能。prop-types

⬆ 返回顶部

包有什么用react-dom？

该react-dom软件包提供了特定于 DOM 的方法，可在应用的顶层使用。大多数组件并非必须使用此模块。此软件包的一些方法如下：

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

⬆ 返回顶部

render 方法的目的是什么react-dom？

此方法用于将 React 元素渲染到指定容器的 DOM 中，并返回该组件的引用。如果该 React 元素之前已渲染到容器中，则该方法将对其进行更新，并仅在必要时修改 DOM 以反映最新的更改。

ReactDOM.render(element, container[, callback])

如果提供了可选的回调，它将在组件渲染或更新后执行。

⬆ 返回顶部

什么是 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();
});

⬆ 返回顶部

如何在 React 中使用 innerHTML？

该dangerouslySetInnerHTML属性是 React 中用于innerHTML浏览器 DOM 的替代方案。与 一样innerHTML，考虑到跨站点脚本 (XSS) 攻击，使用此属性存在风险。您只需将__html对象作为键，将 HTML 文本作为值传递即可。

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

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

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

⬆ 返回顶部

如何在 React 中使用样式？

该style属性接受带有驼峰式命名属性的 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）。

⬆ 返回顶部

React 中的事件有何不同？

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

1. React 事件处理程序使用驼峰式命名，而不是小写。
2. 使用 JSX，您可以传递一个函数作为事件处理程序，而不是字符串。

⬆ 返回顶部

如果在构造函数中使用会发生什么setState()？

当你使用 时setState()，除了将状态赋值给对象之外，React 还会重新渲染组件及其所有子组件。你会收到类似这样的错误：只能更新已安装或正在安装的组件。因此，我们需要this.state在构造函数中使用 来初始化变量。

⬆ 返回顶部

索引作为键有何影响？

键应该是稳定、可预测和唯一的，以便 React 可以跟踪元素。

在下面的代码片段中，每个元素的键将基于排序，而不是与所表示的数据绑定。这限制了 React 的优化能力。

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

如果您使用元素数据作为唯一键，假设 todo.id 对于此列表是唯一的并且稳定，则 React 将能够重新排序元素而无需重新评估它们。

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

⬆ 返回顶部

在方法setState()中使用好吗？componentWillMount()

setState()是的，在方法内部使用是安全的componentWillMount()。但同时建议避免在componentWillMount()生命周期方法中进行异步初始化。componentWillMount()在挂载之前立即调用。它在 之前调用render()，因此在此方法中设置状态不会触发重新渲染。避免在此方法中引入任何副作用或订阅。我们需要确保组件初始化的异步调用发生在 中，componentDidMount()而不是 中componentWillMount()。

componentDidMount() {
axios.get(`api/todos`)
  .then((result) => {
    this.setState({
      messages: [...result.data]
    })
  })
}

⬆ 返回顶部

如果在初始状态下使用 props 会发生什么？

如果组件的 props 在组件未刷新的情况下发生变化，新的 props 值将永远不会显示，因为构造函数永远不会更新组件的当前状态。props 中的 state 初始化仅在组件首次创建时运行。

以下组件不会显示更新后的输入值：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      records: [],
      inputValue: this.props.inputValue,
    };
  }

  render() {
    return <div>{this.state.inputValue}</div>;
  }
}

在 render 方法中使用 props 将更新值：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      record: [],
    };
  }

  render() {
    return <div>{this.props.inputValue}</div>;
  }
}

⬆ 返回顶部

如何有条件地渲染组件？

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

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>
);