（React组件基础）前端八股文Day6

在这里插入图片描述

一类组件与函数组件有什么异同

在React中，类组件和函数组件是创建组件的两种主要方式。随着React的发展，尤其是自Hooks在React 16.8中引入以来，函数组件的功能变得更加强大，使得它们能够更加方便地与类组件相竞争。下面是类组件与函数组件在不同方面的异同：

类组件

特征:

使用ES6的类语法定义。
必须包含render()方法，其返回React元素。
可以使用React生命周期方法（如componentDidMount, shouldComponentUpdate等）。
状态（state）和属性（props）通过this关键字访问。
直到Hooks的引入，类组件是唯一可以使用内部状态和生命周期方法的方式。

示例:

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { /* 初始状态 */ };
  }

  render() {
    return <div>Hello, {this.props.name}</div>;
  }
}

函数组件

特征:

使用普通的JavaScript函数（或箭头函数）定义。
直接返回React元素。
在React 16.8之前主要用于无状态组件。引入Hooks之后，函数组件可以使用状态（useState）和其他React特性（如生命周期的替代品useEffect）。
组件的状态和属性通过函数参数访问。

示例:

import React from 'react';

function MyComponent(props) {
  return <div>Hello, {props.name}</div>;
}

// 或使用箭头函数
const MyComponent = (props) => <div>Hello, {props.name}</div>;

异同

异:

定义方式：类组件通过类定义，函数组件通过函数定义。
状态和生命周期方法：类组件可以通过this.state和生命周期方法直接管理状态和副作用。函数组件通过Hooks（如useState, useEffect等）管理状态和副作用。
this关键字：类组件中可以通过this访问实例的属性和状态，函数组件中没有this。
构造函数：类组件可以有一个构造函数，用于初始化状态等，函数组件没有构造函数，但可以通过Hooks初始化状态。

同:

组件返回：无论是类组件还是函数组件，都必须返回React元素。
Props：两种组件都接收props作为参数。
功能：随着Hooks的引入，函数组件现在几乎可以执行类组件能做的所有事情，包括使用状态、副作用、上下文（Context）、引用（Refs）等。

总的来说，随着React Hooks的引入，函数组件的能力得到了极大的增强，使得开发者能够以更简洁和函数式的方式编写组件，同时也保留了类组件的大部分能力。

话术试炼

在面试中讨论类组件与函数组件的异同时，你需要简洁且准确地表达这两种组件类型的关键特点。以下是你可以在面试时使用的讲解框架：

引入：

首先，可以简要介绍React组件和它们的核心作用：

“React组件是React应用的构建块，它们定义了应用界面的一部分。组件可以是类组件或函数组件，两者都可以接收输入（称为props），并返回需要渲染到页面上的React元素。”

类组件：

然后，对类组件进行描述：

“类组件是使用ES6类语法创建的，它们继承自React.Component。类组件的特点是拥有状态（state）和生命周期方法，比如componentDidMount来执行组件挂载后的操作，以及componentDidUpdate来处理组件更新后的行为。状态可以通过this.state访问和更新，通常使用this.setState方法。”

函数组件：

接着，描述函数组件：

“函数组件则更简洁，它们是普通的JavaScript函数，返回React元素。在Hooks引入之前，函数组件被认为是无状态的，只能接收props并渲染。但自从React
16.8引入Hooks后，函数组件也可以通过useState钩子管理状态，使用useEffect处理副作用等，从而拥有了类似类组件的能力。”

异同点：

最后，总结它们的异同：

“类组件和函数组件的主要区别在于语法和组件特性。类组件通过类和继承来定义，拥有显式的生命周期方法和状态管理，而函数组件使用函数和Hooks来实现相同的功能。随着Hooks的引入，函数组件可以做几乎所有类组件能做的事情，但用起来更简洁，代码量通常更少。”

“在实践中，React团队鼓励新的组件使用函数组件和Hooks，因为这种方式更现代，且更容易整合React的未来特性。然而，类组件在一些特定情况下仍然有其用武之地，比如当你需要使用错误边界（Error
Boundaries）时，目前只能通过类组件实现。”

结语：

“总之，无论是类组件还是函数组件，选择哪一个取决于特定的场景和开发者的个人偏好。了解两者的区别可以帮助我们更好地决定在特定的情况下使用哪种类型的组件。”

二 React refs

什么是React refs?

在React中，refs是一种可以存储对DOM节点或React元素实例的直接引用的机制。通俗地说，当你需要在React的数据流（props和state）之外直接访问一个组件的DOM元素时，你会使用refs。

refs的作用

refs主要有以下作用：

控制焦点、文本选择或媒体播放：比如，你可以在组件加载完成后立即给一个输入框加上焦点。
触发强制动画：有时你需要直接修改DOM来执行动画，而不是通过状态变化来实现。
集成第三方DOM库：当你需要使用那些需要直接操作DOM以集成到React应用中的库时。
读取DOM信息：如果你需要读取某个元素的尺寸或位置等信息，refs可以提供一个方便的途径来读取这些信息。

在render中访问refs

在React的render方法中，你不应该访问refs。这是因为render方法的目的是返回一个元素描述对象（也就是React元素），这个过程应该是纯净无副作用的。Ref的赋值实际上会在React处理render方法返回的结果之后发生，这意味着在render方法内部，ref还没有被赋予一个DOM节点。

简单地说，在render方法中尝试访问ref是不可靠的，因为此时组件尚未挂载或更新完成，ref还没有指向任何东西。如果你尝试在render方法中访问一个ref，可能会得到undefined或者是上一次渲染时ref的值。

正确的做法是在组件的生命周期方法中访问refs，例如componentDidMount、componentDidUpdate，或者在函数组件中使用useEffect Hook。在这些生命周期阶段，如果组件已经被挂载或更新，那么ref将会是一个指向DOM节点的有效引用。

示例

这是一个类组件中使用ref的例子：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    this.myRef.current.focus(); // 此时可以安全地访问ref
  }

  render() {
    return <input type="text" ref={this.myRef} />;
  }
}

这是一个函数组件中使用ref的例子：

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

function MyComponent() {
  const myRef = useRef(null);

  useEffect(() => {
    myRef.current.focus(); // 在useEffect中访问ref
  }, []);

  return <input type="text" ref={myRef} />;
}

在这两个例子中，ref都被用来在组件挂载完成后立即给input元素设置焦点。注意，在函数组件中我们使用了useRef和useEffect Hooks。

话术试炼

面向面试官讲解Reactrefs时，你的目标是清晰、准确且全面地介绍refs的概念、用途、使用方法以及相关的最佳实践。以下是一个框架，帮助你系统地讲解：

引入React refs

定义：“在React中，refs提供了一种方式，允许我们访问DOM节点或在render方法中创建的React元素。它是’references’的缩写，主要用于直接操作DOM。”

为什么需要Refs：“虽然React强烈推荐使用声明式方法来处理应用的状态和数据流，但在某些情况下，我们仍然需要直接访问DOM节点。例如，管理焦点、触发动画或集成第三方DOM库。”

使用场景

控制焦点：“一个常见的使用案例是管理输入框的焦点，比如在表单验证失败时自动聚焦到错误的输入框上。”

触发动画：“在需要通过直接修改DOM元素属性来触发动画时，refs可以直接修改元素的style或触发动画API。”

集成第三方库：“当使用需要直接对DOM操作的第三方库时，比如D3.js生成图表，refs可以提供直接的DOM访问能力。”

创建Refs

使用React.createRef：“在类组件中，我们通常在构造函数中通过React.createRef创建ref，并将其赋值给类的一个属性。”

使用useRef Hook：“在函数组件中，可以使用useRef Hook来创建refs。这个Hook既可以用于DOM访问，也可以用作渲染周期之间的持久化存储。”

访问Refs

在类组件中：“通过this.myRef.current访问创建的ref指向的DOM节点。”

在函数组件中：“使用myRef.current来访问ref。”

React.forwardRef

介绍：“React.forwardRef是一个React提供的API，它允许你将ref自动地通过组件传递给其子组件。这在高阶组件或函数作为子组件的情况下特别有用。”

最佳实践

避免过度使用：“尽管refs在某些情况下很有用，但我们仍然应该优先考虑使用React的数据流（props和state）来解决问题。”

确保正确的使用时机：“避免在组件的render方法中访问refs，因为这可能会导致不一致的行为。相反，应该在componentDidMount或componentDidUpdate生命周期方法中访问它们，或在函数组件中使用useEffect。”

结语

最后，你可以总结：“总的来说，Reactrefs提供了一个逃生舱，允许我们在必要时直接操作DOM。正确使用refs，可以有效地解决那些超出React数据流范畴的特定问题。”

三 React 事件React的事件和普通的HTML事件有什么不同

React事件处理系统与传统HTML（DOM）事件处理有几个关键区别。这些区别使得React的事件处理更加一致，易于管理，同时也提高了跨浏览器的兼容性。下面是React事件与普通HTML事件之间的一些主要不同点：

1. 事件包装

React事件是合成事件（SyntheticEvent）：React为了确保跨浏览器一致性，将原生事件包装在SyntheticEvent对象中。这意味着无论你在哪个浏览器上使用React，事件对象都将保持一致的属性和方法。
HTML原生事件直接暴露：在传统的HTML中，事件处理器直接接触到浏览器提供的原生事件对象。

2. 事件命名约定

React使用驼峰命名法：在React中，所有的事件都是以驼峰命名法书写的，例如onClick、onSubmit等。
HTML使用小写：在传统的HTML事件中，事件名称通常都是全小写的，如onclick、onsubmit等。

3. 事件委托

React自动进行事件委托：React自动将所有事件处理函数委托到文档的最高层级。这意味着，即使你有成千上万的组件监听相同的事件，React也只会在DOM树中使用一个单独的事件监听器。这有助于减少内存占用并提高性能。
HTML事件需要手动设置事件委托：在传统HTML中，如果你需要使用事件委托，必须手动实现。

4. 事件处理方式

React中通过传递函数来绑定事件处理器：你需要将一个函数传递给事件处理器属性，如onClick={handleClick}。
HTML中可以直接使用字符串：在传统的HTML中，你可以在事件属性中直接编写JavaScript代码，如onclick="handleClick()"。

5. 性能和优化

React通过合成事件和事件委托优化性能：React的事件系统通过合成事件和自动事件委托的方式，减少了内存的占用，并且减少了直接与DOM交互的次数，这有助于提升应用的性能。
HTML中性能优化依赖开发者：在传统HTML中，开发者需要自己考虑如何优化事件处理，比如何时使用事件委托等。

6. 自动绑定this

React类组件中的事件处理方法通常需要手动绑定this：在React类组件中，如果你想在事件处理函数中使用this来访问组件实例，你需要手动绑定this，或使用箭头函数来自动绑定。
HTML中的this直接指向触发事件的元素：在传统HTML的事件处理函数中，this指向绑定事件的DOM元素。

结论

React的事件处理系统提供了一种更为一致、简洁且性能优化的方式来处理Web应用中的事件。通过合成事件和事件委托，React使得事件处理在不同的浏览器中表现一致，同时还优化了性能。尽管需要学习新的模式和命名约定，但这些设计决策最终使得在React中处理事件变得更加高效和直观。

四 React 组件中怎么做事件代理？它的原理是什么？

在React中进行事件代理通常是指利用事件冒泡机制来在一个父级组件上处理多个子组件的事件。在传统的DOM操作中，事件代理是一种常见的技术，用于避免给每个子元素添加事件监听器，而是将事件监听器添加到其共同的父元素上，利用事件冒泡（事件向上传递到父元素）的特性来捕获子元素的事件。

React中的事件代理

React自身实际上在内部已经在顶层使用了事件代理。当你在React组件中添加像onClick这样的事件处理器时，React并不会将事件处理器直接绑定到相应的元素本身，而是绑定到文档的根节点。当事件发生并冒泡到根节点时，React会根据它的内部映射来确定事件源，并执行相应的处理函数。

如果你想在你的组件中显式地实现事件代理，你可以在父组件上设置一个事件监听器，然后根据事件对象中的信息来确定是哪个子组件触发了事件，并执行相应的逻辑。

示例

假设你有一个列表，并希望在点击列表项时，告知是哪个列表项被点击了：

class List extends React.Component {
  handleClick = (event) => {
    // event.target 会是点击的具体子项
    // 判断逻辑可以基于 event.target 的特定属性，如 data-* 属性
    alert(event.target.getAttribute('data-key'));
  }

  render() {
    return (
      <ul onClick={this.handleClick}>
        {this.props.items.map((item, index) => (
          <li key={item.id} data-key={item.id}>{item.text}</li>
        ))}
      </ul>
    );
  }
}

在上述代码中，<ul>元素上的onClick处理函数就充当了事件委托者的角色。每个<li>子元素在被点击时，事件会冒泡到<ul>，然后被单一的事件监听器捕获和处理。

原理

事件代理的工作原理建立在DOM事件的冒泡机制上。当你点击一个DOM元素时，这个事件不仅仅只在这个元素上触发，而是会沿着DOM树向上传递，直到根节点。

由于React在内部使用了它自己的事件系统来实现跨浏览器一致性，它实质上也采用了类似于事件代理的机制。它在DOM树最顶层维护了一个事件监听器映射，当一个事件发生时，React会使用这个映射来决定调用哪个组件的哪个事件处理函数。这样做的好处是减少了真实DOM上的事件监听器数量，从而优化了性能和内存使用。同时，这也简化了事件处理函数的管理，因为在组件卸载时，React可以保证移除相关的事件处理函数，避免内存泄漏。

五 React中受控组件和非受控组件是什么？区别是？

在React中，表单元素（如<input>、<textarea>和<select>）通常有自己的内部状态，并根据用户输入来更新。在处理这些表单元素时，React提供了两种不同的方法来管理数据：受控组件和非受控组件。

受控组件

受控组件是React组件控制表单元素行为的方法。这里，“受控”意味着表单数据是由React组件的状态管理的。每当发生变化时，如用户输入，都会通过事件处理函数来更新React的状态，然后状态的最新值会作为表单元素的值被重新渲染。

特点：

表单数据由React状态控制。
每次表单元素的状态变化都会有一个对应的处理函数（如onChange）。
可以轻松集成React的状态逻辑和校验逻辑。
通常用于实现实时校验和动态输入控制。

例如，一个受控的<input>元素可能看起来像这样：

class ControlledComponent extends React.Component {
  state = { value: '' };

  handleChange = (event) => {
    this.setState({ value: event.target.value });
  };

  render() {
    return (
      <input type="text" value={this.state.value} onChange={this.handleChange} />
    );
  }
}

非受控组件

非受控组件是利用DOM本身来管理表单数据的方法。这里，“非受控”意味着React并不直接控制表单元素的状态。相反，React通过ref来从DOM中获取表单数据。

特点：

表单数据由DOM自身控制。
在处理表单提交时，通常一次性从DOM元素中取得表单数据。
适合需要一次性访问表单值的场景，如在表单提交时。
对于React状态更新不那么频繁的表单，这可能是一个更简单的解决方案。

下面是一个非受控组件的例子：

class UncontrolledComponent extends React.Component {
  inputRef = React.createRef();

  handleSubmit = (event) => {
    alert('A name was submitted: ' + this.inputRef.current.value);
    event.preventDefault();
  };

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" ref={this.inputRef} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

区别

数据管理：受控组件使用组件的state来管理数据，而非受控组件依赖于DOM节点。
实时校验：受控组件可以更容易地对用户的输入进行实时校验，因为每次状态变化都会执行处理函数。
性能：受控组件可能会因为在每次输入时都执行渲染逻辑而导致性能问题，尤其是在复杂表单中。非受控组件在这方面表现得更好，因为它们不需要在输入时重新渲染。
组件参照（Refs）：非受控组件依赖于refs来获取DOM节点的当前值，而受控组件通常不需要使用refs。

在实际开发中，选择受控或非受控组件，取决于具体情况与开发者的偏好。受控组件提供了更强大的数据处理能力，而非受控组件在某些情况下可以简化代码和提高性能。

六 useState返回值使用数组而非对象

useState 钩子在React中的设计理念是为了提供一种简单且直接的方式来管理组件的状态。它返回一个数组而非对象，主要有以下几个原因：

1. 解构赋值的灵活性

返回数组主要是为了利用ES6的解构赋值语法，使得状态变量的命名变得灵活和简洁。开发者可以自由地命名状态变量和更新函数，而不是被固定在一个对象的属性中。这种方式在语义上更清晰，也更容易编写和理解。

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

如果useState返回的是对象，那么你会被迫使用固定的键来访问状态和更新函数，这减少了命名的灵活性并可能导致代码更加冗长。

2. 简化API

useState的设计目标之一是保持简单。返回一个数组，只包含两个元素：当前状态值和更新这个值的函数，这让API变得非常简洁。如果返回一个对象，那么这个对象可能需要包含更多的键，使用起来可能不那么直观。

3. 避免键名冲突和重构的复杂性

如果useState返回一个对象，那么在使用多个状态钩子时，可能需要额外的注意来避免键名冲突。此外，如果需要重构状态对象，可能会涉及到更多的修改和潜在的错误源。通过返回一个数组，React让状态的管理变得分散而简单，开发者可以更容易地维护和更新状态。

4. 性能考虑

数组的结构相对于对象而言，在JavaScript中通常来说是更轻量级的。虽然这个理由不是主要的，但返回一个长度固定的、结构简单的数组，在某些情况下可能对性能有轻微的正面影响。

总结

useState返回数组而非对象，主要是为了提供更大的灵活性和简化API的使用。通过利用ES6的解构赋值，它允许开发者以一种简洁且直观的方式来命名和管理状态，同时避免了在状态管理中可能遇到的一些常见问题，如键名冲突和重构复杂性。这种设计选择反映了React团队在设计API时对简洁性和易用性的重视。

七为什么要使用hooks

React Hooks是在React 16.8版本中引入的一项特性，它允许你在不编写类组件的情况下使用state以及其他React特性。Hooks的引入是为了解决React在类组件和函数组件之间使用和复用状态逻辑的一些困难和局限性，同时也带来了编写组件的新范式。下面是使用Hooks的一些主要原因和它们带来的好处：

1. 简化组件内部逻辑

在Hooks之前，React状态和生命周期特性只能在类组件中使用。这不仅让函数组件的能力受限，还意味着为了使用这些特性，你需要将函数组件重构为类组件。Hooks允许你在不改变组件形式为类的情况下，直接在函数组件中使用state和生命周期特性，从而简化了组件的内部逻辑和组织结构。

2. 促进代码复用和抽象

在Hooks出现之前，复用状态逻辑通常需要借助高阶组件（HOCs）或者渲染属性（Render Props）。这两种模式虽然功能强大，但往往会导致组件树变得复杂，增加了理解和维护的难度。Hooks使得从组件中提取可复用的逻辑变得更加简单，而且不需要修改组件结构，这让组件保持了清晰和简洁。

3. 清晰的副作用管理

使用useEffect Hook可以更清晰、更有组织地管理副作用（如数据获取、订阅设置或手动修改DOM）。在类组件中，通常需要在不同的生命周期方法中编写副作用相关的代码，而useEffect允许你将这些代码组织在一起，使得逻辑更容易理解和维护。

4. 更好的逻辑关注点分离

虽然React推崇的是按照功能而不是生命周期来组织代码，但在类组件中，有时候你不得不将相关联的逻辑分散到不同的生命周期方法中。Hooks通过允许你在单个地方按照逻辑特性而非生命周期来组织代码，使得关注点分离得更加自然和清晰。

5. 更易于理解和使用的API

相比于必须了解和正确使用this关键字、生命周期方法等类组件的特性，Hooks提供了一种更简单直观的方式来使用React的特性。这使得新手更容易上手React，同时也让经验丰富的开发者能更快地开发和维护应用。

6. 社区和未来方向

随着React团队和社区的推动，Hooks已经成为编写React组件的首选方式。它们不仅能够提升开发效率和应用性能，还反映了React未来发展的方向。

总的来说，Hooks的引入极大地提升了React开发的体验，使得状态管理和副作用的处理变得更加优雅和简洁。通过使用Hooks，开发者能够以更函数式的方式编写组件，同时保持代码的可读性和可维护性。

八 react.creacteclass 和 extends Components的区别

在React的早期版本中，创建组件的主要方式是通过React.createClass方法和使用ES6类（通过extends React.Component）这两种方式。随着时间的推进，React团队和社区越来越倾向于使用ES6类来创建组件，而React.createClass方法逐渐被淘汰，并在React 16版本中被完全移除（对于想要使用类似createClass的功能，可以使用单独的create-react-class库）。下面是这两种方式的一些主要区别：

1. 定义方式

React.createClass：

var MyComponent = React.createClass({
  render: function() {
    return <div>Hello, World!</div>;
  }
});

这种方式是React早期版本中推荐的方式来创建组件。React.createClass会自动绑定方法中的this到当前组件的实例。

ES6 Classes：

class MyComponent extends React.Component {
  render() {
    return <div>Hello, World!</div>;
  }
}

使用ES6类继承React.Component是当前推荐的方式来定义一个React组件。这种方式更贴近JavaScript的类语法，也更容易集成到现代构建工具和JavaScript生态系统中。

2. `this`的绑定

在通过React.createClass定义的组件中，React会自动绑定方法中的this到当前组件的实例，这意味着你在事件处理器或自定义方法中可以直接使用this访问组件实例。

而在使用ES6类方式时，你需要手动绑定事件处理器中的this到当前组件实例，或者使用类属性和箭头函数来自动绑定this。

3. 生命周期方法的差异

使用React.createClass创建的组件有一些特殊的生命周期钩子，如getInitialState和getDefaultProps，这些方法被用于初始化状态和默认props。

在ES6类中，这些初始化工作分别在构造函数和类的静态属性中完成：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { /* 初始状态 */ };
  }

  static defaultProps = {
    // 默认props
  };

  render() {
    return <div>Hello, World!</div>;
  }
}

4. 逐渐淘汰`React.createClass`

随着React的发展，React.createClass方式已经被官方淘汰并从React的核心库中移除。尽管你仍然可以通过安装create-react-class库来使用这种方式，但官方推荐使用ES6类来定义组件，因为这更符合JavaScript的发展方向，且更容易被新的JavaScript开发者接受和学习。

综上所述，虽然React.createClass和使用ES6类extends React.Component在功能上大致相同，但它们在语法、this的绑定机制、生命周期方法的使用等方面存在差异。随着React的发展，使用ES6类成为了创建React组件的首选方法。

九 React组件的构造函数有什么作用？它是必须的吗？

React组件的构造函数（constructor）主要用于两个目的：

初始化局部状态：在构造函数中，你可以通过给this.state赋值来初始化组件的局部状态。
绑定事件处理器：如果你使用了类组件，并且在事件处理器中需要访问this，那么你需要在构造函数中将这些处理器绑定到当前实例。

这是一个包含构造函数的类组件示例：

class MyComponent extends React.Component {
  constructor(props) {
    super(props); // 调用父类的构造函数，固定写法
    this.state = {
      // 初始化state
      count: 0,
    };

    // 绑定方法
    this.increment = this.increment.bind(this);
  }

  increment() {
    // 事件处理器更新state
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    // 使用this.state和this.increment
    return (
      <div>
        <p>{this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

是不是必须的？

构造函数并不是必须的。如果你不需要初始化state或者绑定方法，那么你可以省略构造函数。React会自动调用默认的构造函数。

在使用了类属性语法和箭头函数之后，你可能会完全不需要构造函数。例如：

class MyComponent extends React.Component {
  // 使用类属性初始化state
  state = {
    count: 0,
  };

  // 使用箭头函数确保`this`上下文正确绑定
  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    // ...
  }
}

在上面的例子中，state直接作为类的属性被初始化，而increment方法作为箭头函数，它自动绑定了this上下文。因此，没有必要再写构造函数。

对于函数组件，使用Hooks后，通常可以完全避免类和构造函数。例如，使用useState钩子来处理状态：

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

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

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

总结，构造函数在React类组件中用于初始化状态和绑定事件处理器，但它不是必须的。随着类属性和箭头函数的使用，以及函数组件和Hooks的普及，构造函数的必要性已经大大降低。

十在React中如何避免不必要的render

在React应用中，避免不必要的渲染是优化性能的关键一步。不必要的渲染可能导致应用运行缓慢，特别是在复杂的应用中。以下是一些避免不必要渲染的技术和方法：

1. 使用`React.memo`包裹函数组件

React.memo是一个高阶组件，它仅对其包裹的组件在props发生变化时才重新渲染。这对于优化性能非常有用，尤其是当你知道一个组件在特定props没有变化时不需要更新时。

const MyComponent = React.memo(function MyComponent(props) {
  /* render using props */
});

2. 使用`shouldComponentUpdate`生命周期方法

对于类组件，你可以使用shouldComponentUpdate生命周期方法来阻止组件的不必要更新。这个方法允许你通过比较当前和下一个state或props来决定组件是否需要更新。

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 返回true或false来控制组件是否应该更新
  }
}

3. 使用`PureComponent`

React.PureComponent与React.Component相似，但PureComponent通过对props和state进行浅比较来减少不必要的渲染。

class MyComponent extends React.PureComponent {
  // Your component logic
}

4. 使用`useMemo`和`useCallback`钩子

对于函数组件，useMemo和useCallback可以帮助你避免不必要的渲染。useMemo可以用来缓存计算结果，只有在其依赖项变化时才重新计算。useCallback则用于缓存函数，确保函数身份在依赖项不变的情况下保持不变。这些都有助于避免因为不必要的更新导致的渲染。

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

5. 优化数据结构和状态设计

确保状态尽可能分散，并且只在必要时更新状态。避免在不需要的时候更新整个对象或数组，这样可以减少不必要的渲染。

6. 使用不可变数据结构

使用不可变数据可以帮助你更容易地实现上述优化，因为它们可以简化数据比较的过程。这可以通过使用像Immutable.js这样的库来实现，或者通过遵循不可变的数据操作实践。

通过上述方法的应用，你可以大大减少React应用中的不必要渲染，从而提升应用的性能。

十一 React Context

React Context 是 React 提供的一种在组件树中传递数据的方式，而无需通过每个层级手动传递props。它的主要目的是为了解决“prop drilling”（属性钻取）的问题，即将数据从顶层组件传递到深层嵌套组件的过程。

React Context 的工作原理：

创建 Context： 你可以通过React.createContext()创建一个 Context 对象。当React渲染订阅这个 Context 对象的组件时，它会从组件树中离当前组件最近的匹配的Provider读取当前的context值。

const MyContext = React.createContext(defaultValue);

Provider 组件： Provider组件允许消费组件订阅context的变化。Provider接收一个value属性，传递给消费组件。提供者可以嵌套以覆盖树中较深层的值。

<MyContext.Provider value={/* 某个值 */}>

Consumer 组件： 当一个组件需要消费context中的值时，可以使用Consumer组件或useContext钩子。

<MyContext.Consumer>
  {value => /* 基于context值进行渲染*/}
</MyContext.Consumer>

// 或者在函数组件中使用hook
const value = useContext(MyContext);

为什么不推荐优先考虑使用 Context：

组件的复用性： 当你使用Context在组件间共享状态时，就意味着这些组件变得更依赖于外部状态，从而可能降低它们的复用性。
组件的隔离： 在大型应用中，过度使用Context可能会使得组件之间的界限变得模糊，因为它们都可能依赖于共享的Context，这可能会导致维护和调试困难。
性能考虑： Context的变化会导致所有消费者组件的重新渲染，即使是那些并不依赖于Context变化的组件也会重新渲染，这可能会引发性能问题。
复杂性： Context API虽然强大，但也增加了应用的复杂性。在不需要全局状态管理的情况下过度使用Context，可能会造成不必要的复杂性。

为了应对这些潜在问题，你可以：

仅在必要时使用Context，比如对于那些真正需要全局状态的场景（如主题设置、用户认证状态）。
使用状态管理库（如Redux、MobX）在需要的时候提供更细粒度的控制，尽管这也会增加应用的复杂性。
保持Context的稳定性，避免不必要的变动，以减少子组件的不必要渲染。

Context是一个有用的特性，但应该谨慎使用，以确保React应用的组件结构清晰、可维护性高并且性能良好。

十二 React Portals

React Portals 提供了一种将子节点渲染到存在于父组件层次结构之外的 DOM 节点的方法。这通常用于当你需要子组件在视觉和DOM层次上“跳出”其父组件时，例如，在创建模态框、提示框、悬浮卡片等需要全局定位的UI元素时。

基本用法

要创建一个Portal，你可以使用ReactDOM.createPortal()方法。这个方法接受两个参数：要渲染的React子元素和一个DOM元素，后者是这些子元素应该挂载到的目标容器。

以下是一个基本的例子：

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

class MyComponent extends React.Component {
  render() {
    // 不直接渲染到div中，而是渲染到body的子元素
    return ReactDOM.createPortal(
      this.props.children, // 子元素
      document.body       // 目标容器
    );
  }
}

在这个例子中，MyComponent渲染的任何子元素都会被插入到document.body中，而不是它在React DOM树中的位置。

使用场景

Portals最常见的使用场景是当你需要将子组件渲染到父组件的DOM层次结构之外时。这在以下情况下非常有用：

模态框（Modals）：当你想要模态框覆盖其他元素，而不是嵌入到页面的流中时。
悬停卡（Hovercards）：当悬停卡需要显示在其他元素之上时。
提示框（Tooltips）：同悬停卡类似，提示框通常浮动在页面内容之上。
通知：如果你想要通知从页面的角落弹出，而不受其他DOM元素的限制。

事件冒泡

值得注意的是，虽然Portal可以用于在DOM树中的不同位置渲染组件，但在事件冒泡上，它的行为同常规的React子元素一样。即使Portal可以将子元素渲染到不同的DOM树位置，它们在React组件树中的位置决定了事件是如何冒泡的。也就是说，一个在Portal内部的事件会先冒泡到React内部的父组件，然后才是DOM树中的父元素。

使用注意

尽管Portals提供了强大的将组件渲染到父组件层次之外的能力，它们也应当谨慎使用。滥用Portals可能会导致复杂的组件结构和难以调试的UI问题，因此最好只在真正需要的时候使用它们。

十三 React-Intl

React-Intl是一个用于在React应用程序中实现国际化(i18n)和本地化(l10n)的库。它是FormatJS库的一部分，旨在让你能够轻松地将多语言支持集成到你的React项目中。使用React-Intl，你可以格式化日期、数字以及字符串，使其适应用户的语言习惯和地区特征。

核心特性

国际化和本地化： 支持多种语言的文本内容展示，包括对日期、时间、数字、货币等的本地化处理。
组件和API的丰富支持： 提供多种React组件和API来处理格式化的内容，如FormattedMessage、FormattedDate等。
Pluralization and Selectors： 支持复数形式和选择器，使得根据语言的不同规则选择文本变得简单。
丰富的自定义选项： 允许自定义格式，并能够通过IntlProvider组件将这些格式作为上下文传递给应用中的其他组件。

开始使用

安装：

你可以通过npm或yarn将react-intl添加到你的项目中。
```
npm install react-intl
# 或者
yarn add react-intl
```

设置IntlProvider：

在你的React应用的顶层，用IntlProvider包裹你的应用，为你的应用提供locale（语言环境）和messages（翻译消息）。

import { IntlProvider } from 'react-intl';

const messages = {
  'hello.world': 'Hello World',
};

function App() {
  return (
    <IntlProvider locale="en" messages={messages}>
      {/* 应用的其他部分 */}
    </IntlProvider>
  );
}

使用FormattedMessage组件或useIntl Hook：

在你的组件中，你可以使用FormattedMessage组件或useIntl Hook来获取和显示翻译后的消息。

import { FormattedMessage, useIntl } from 'react-intl';

function MyComponent() {
  const intl = useIntl();
  return (
    <div>
      {/* 使用FormattedMessage组件 */}
      <FormattedMessage id="hello.world" defaultMessage="Hello World" />
      {/* 使用useIntl Hook */}
      <div>{intl.formatMessage({ id: 'hello.world' })}</div>
    </div>
  );
}

注意事项

性能： 确保你仅加载当前用户需要的语言数据，避免不必要的数据加载影响性能。
维护翻译： 在大型项目中，维护和更新翻译文件可能会变得复杂，考虑使用一些工具或平台来帮助管理这些翻译。
测试： 在开发具有国际化支持的应用时，确保对各种语言环境下的UI和功能进行充分测试。

React-Intl为React开发者提供了一个强大的国际化解决方案，让开发多语言支持应用变得更简单、更高效。

十四高阶组件

高阶组件（High-Order Components，简称HOC）是React中用于复用组件逻辑的高级技术。一个高阶组件是一个函数，它接收一个组件并返回一个新的组件。HOC允许你通过包裹的形式重用组件逻辑，而不是通过继承来扩展组件。这种模式由React的组合特性所支持，是React推荐的复用逻辑的一种方式。

HOC的工作原理

高阶组件本身不是React API的一部分。它们是从React的组合特性中衍生出来的一种模式。具体而言，HOC是参数为组件、返回值为新组件的函数。

const EnhancedComponent = higherOrderComponent(WrappedComponent);

使用HOC的理由

使用高阶组件主要有两个目的：

代码复用、逻辑和引导抽象： HOC使得组件逻辑能够被轻松复用。通过将共享逻辑封装到一个HOC中，可以将其应用到多个组件上，而不需要重写逻辑。
渲染劫持： HOC可以控制包裹组件的渲染过程，可以用于条件渲染、修改React元素树等。

创建一个简单的HOC

假设有一个需求，需要对多个组件添加用户跟踪功能。你可以创建一个HOC来封装这个逻辑：

function withTracking(WrappedComponent) {
  return class extends React.Component {
    componentDidMount() {
      // 实现跟踪逻辑
    }

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

使用withTracking高阶组件，可以轻松地给任何组件添加跟踪功能。

注意事项

不要在渲染方法中使用HOC： 这会导致每次渲染时都创建一个新的组件，从而导致不必要的重新挂载操作和性能下降。
Ref不会被传递： 由于ref并不是prop的一部分，如果你对HOC中返回的组件添加ref，那么这个ref将指向最外层容器组件，而不是被包裹的组件。为了让ref能够正确传递，你可以使用React.forwardRef API等技术来解决这个问题。

高阶组件提供了一个强大的模式，用于增强和复用React组件逻辑，但是需要谨慎使用，以避免一些常见的陷阱。