react面试总结3

2023-12-13 06:50:10

React类组件，函数组件，在类组件修改组件对象会使用。

在 React 类组件和函数组件中，修改组件对象的方式有所不同。

类组件：

在 React 类组件中，组件对象是类的实例，你可以在类的方法中修改组件对象。最常见的情况是使用 this.setState 方法来更新组件的状态：

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

  incrementCount = () => {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

在上述示例中，incrementCount 方法通过 this.setState 方法更新了 count 状态，从而触发组件的重新渲染。

函数组件：

在函数式组件中，组件对象是无状态的，并且没有实例化的概念。因此，你不能像在类组件中一样直接修改组件对象。

但是，你可以使用 React 提供的 useState、useReducer 等 Hook 来创建状态，并使用返回的状态值和更新函数来管理状态。每次调用状态更新函数都会触发组件的重新渲染。

例如，在函数式组件中使用 useState 来创建状态和更新函数：

import React, { useState } from 'react';

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

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

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

这里 useState 返回了一个状态值 count 和一个更新函数 setCount，当调用 setCount 更新状态时，会触发组件的重新渲染。

类组件怎么做性能优化？函数组件怎么做性能优化？’

在 React 中，无论是类组件还是函数组件，都有一些通用的性能优化策略，同时也存在各自特定的优化方法。

类组件的性能优化：

使用 shouldComponentUpdate：重写 shouldComponentUpdate 方法来手动控制组件的更新。在此方法中进行状态和属性的比较，避免不必要的渲染。
使用 PureComponent：继承自 React.PureComponent 的类组件会对 shouldComponentUpdate 进行浅比较（shallow comparison）来确定是否需要更新。适用于纯函数组件。
使用 React.memo：在函数组件中使用 React.memo 高阶组件，类似于 PureComponent，用于缓存组件渲染结果，仅在 props 发生变化时重新渲染。

函数组件的性能优化：

使用 React.memo：对于函数组件，可以使用 React.memo 缓存组件渲染结果，避免不必要的重复渲染。
使用 useCallback 和 useMemo：useCallback 用于缓存函数引用，useMemo 用于缓存计算结果，避免在每次渲染时重新计算。
拆分组件：将大型组件拆分为更小、更独立的组件，有助于提高组件的重用性，并优化更新时的渲染。

共同的性能优化策略：

避免不必要的渲染：避免在 render 方法中执行耗时操作，尽量保持 render 方法的轻量化。
避免多余的重新渲染：合理使用状态管理工具（如 Redux）或上下文（Context）避免不必要的层级更新。
避免内存泄漏：手动清理订阅、定时器等副作用，避免内存泄漏。
使用开发者工具进行性能优化：使用 React DevTools 等工具来检测组件的渲染次数和性能瓶颈，进行优化。

性能优化是一个综合考虑的问题，具体优化策略需要根据实际情况进行选择，避免过度优化。

useEffect 和 useLayoutEffect 的区别

useEffect 和 useLayoutEffect 都是 React 中的 Hook，用于处理副作用。它们在功能上非常相似，但有一些重要的区别。

`useEffect`：

异步执行：useEffect 中的回调函数是异步执行的，不会阻塞浏览器渲染。
延迟执行：它会在浏览器完成画面渲染后延迟执行，不会阻塞页面的更新。
适用场景：适合大多数副作用处理，比如数据获取、订阅、DOM 操作等。如果副作用不需要立即执行，而是在渲染完成后执行，通常使用 useEffect。

`useLayoutEffect`：

同步执行：useLayoutEffect 的回调函数会在浏览器执行绘制之前同步执行。它会在 DOM 更新前同步触发，即会阻塞浏览器的渲染。
即时性：适合需要在 DOM 更新之前立即执行的副作用，比如需要获取布局信息并立即对其进行操作的情况。
注意事项：由于它是同步执行的，如果操作较重，可能会影响性能，导致页面的反应速度变慢。

如何选择：

如果副作用不需要立即执行，而是在浏览器渲染后才执行，通常使用 useEffect。
如果需要在 DOM 更新之前同步执行副作用，以避免闪烁或获取最新布局信息等场景，可以考虑使用 useLayoutEffect。

总的来说，大多数情况下都可以使用 useEffect，它能够满足大部分副作用处理的需求。而 useLayoutEffect 则是为了更精确地控制 DOM 操作时机，特别是对于一些需要同步获取布局信息并立即处理的情况。

hooks 的使用有什么注意事项

在使用 React Hooks 时，有几个重要的注意事项需要牢记：

1. 在函数组件的顶层使用 Hook：

Hooks 应该只在 React 函数组件的顶层使用，不要在循环、条件、嵌套函数中调用 Hook，确保 Hook 在每次渲染时都是按相同的顺序被调用。

2. 只在 React 函数组件中使用：

Hooks 只能在 React 函数组件中使用，不要在普通的 JavaScript 函数中调用 Hook。

3. Hook 的命名规范：

自定义的 Hook 应该以 “use” 开头，这样能够清楚地表明其用途，也是 React 官方的建议。

4. 状态的更新不是合并的：

与类组件的 setState 不同，Hook 中的状态更新不会自动合并。如果需要基于先前的状态进行更新，要使用回调形式的 setState 或者使用 useReducer。

5. 避免在条件语句中使用 Hook：

避免在条件语句中调用 Hook，确保每次组件渲染时 Hook 的调用顺序一致。

6. 注意 useEffect 的依赖性：

在使用 useEffect 时，务必注意第二个参数传入的依赖数组。如果没有传入依赖数组，会在每次渲染时都执行 useEffect 中的回调函数。正确地传入依赖数组能够控制副作用的触发时机。

7. 注意 Hook 执行时机：

React Hook 的执行是有顺序的，每次渲染都会按照相同的顺序调用 Hook。这意味着不能在循环、条件判断等语句中使用 Hook，因为这可能导致 Hook 的调用顺序发生变化。

8. 懒初始化 Hook：

使用 useState 时，可以传入一个函数作为初始状态的惰性初始化。这样能够避免初始值的计算开销。

遵循这些注意事项可以帮助你更好地使用 React Hooks，确保组件的正确渲染和行为。

纯函数有什么特点，副作用函数特点

纯函数和副作用函数是函数编程中的两个重要概念。

纯函数的特点：

相同输入产生相同输出：给定相同的输入，纯函数总是返回相同的输出，不受外部状态的影响。
无副作用：纯函数不会对除函数返回值以外的任何东西造成影响，不修改参数，不改变全局变量或外部状态，不产生 IO 操作。
可缓存性：由于相同输入始终产生相同输出，纯函数对于缓存和记忆化是非常有利的。
可测试性：纯函数易于测试，因为不依赖外部状态，测试输入输出即可。

副作用函数的特点：

依赖外部状态：副作用函数可能依赖于函数外部的状态或变量，并且可以改变或影响外部状态。
不可预测性：由于副作用函数可能改变外部状态，所以其结果可能是不可预测的，尤其是在多线程、并发环境下。
可能引起不良影响：副作用函数可能对全局状态产生影响，导致代码难以理解、维护和测试，也可能引发 bug。
难以缓存和优化：由于不同的外部状态可能导致不同的输出，副作用函数难以实现缓存和优化。

在函数式编程中，纯函数通常被视为更可靠、更易于推理和调试的，因为其行为是可预测且不依赖于外部状态。尽可能地编写纯函数有助于减少代码中的不确定性和副作用带来的问题。

React 中 refs 干嘛用的？如何创建 refs？

在 React 中，refs（引用）是用来获取对 DOM 节点或 React 元素的引用的方式，可以在组件渲染后直接操作 DOM 或访问组件实例的方法和属性。

refs 的主要用途：

访问 DOM 元素：允许直接访问被 ref 引用的 DOM 节点，执行诸如焦点控制、动画或测量节点尺寸等操作。
访问 React 组件实例：可以在类组件中使用 ref 来获取对组件实例的引用，调用组件的方法或访问组件的属性。

创建 refs：

使用 createRef：在类组件中，通过 React.createRef() 方法创建 ref。

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

  componentDidMount() {
    this.myRef.current.focus(); // 访问 DOM 节点
  }

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

使用 useRef 钩子：在函数式组件中使用 useRef 钩子创建 ref。

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

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

  useEffect(() => {
    myRef.current.focus(); // 访问 DOM 节点
  }, []);

  return <input ref={myRef} />;
}

通过将 ref 属性指定为创建的 ref，可以在组件中访问被引用的 DOM 节点或组件实例。值得注意的是，refs 在函数式组件中可以在多次渲染中保持其引用不变，但在类组件中，每次重新渲染都会创建新的 ref 对象。

在构造函数调用 `super` 并将 `props` 作为参数传入的作用是啥？

在 React 组件的构造函数中调用 super(props)，将 props 作为参数传递给 super() 的作用是调用父类的构造函数，并将 props 对象传递给父类的构造函数。这是 ES6 类继承中的规范。

在 React 中，如果子类（组件）在构造函数中要使用 this.props，必须先调用父类构造函数并传递 props 对象给父类。只有在调用 super(props) 后，才能在构造函数中使用 this.props。

举个例子：

class MyComponent extends React.Component {
  constructor(props) {
    super(props); // 将 props 传递给父类构造函数
    console.log(this.props); // 可以在这里使用 this.props
  }
}

这样做的主要原因是确保在构造函数内部可以安全地使用 this.props。如果在构造函数中使用 this.props 而没有调用 super(props)，this.props 将是未定义的，因为它是在父类构造函数中初始化的。

如何 React.createElement ？

React.createElement 是 React 提供的一个方法，用于创建虚拟 DOM 元素。在 JSX 被转译为 JavaScript 代码时，实际上会被转译为对 React.createElement 方法的调用。

`React.createElement` 的语法：

React.createElement(
  type, // 元素类型，可以是字符串（表示 HTML 元素）或 React 组件
  [props], // 元素的属性对象，可以为 null 或包含键值对的对象
  [...children] // 子元素，可以是字符串、React 元素或其他子元素
);

示例：

假设有一个 JSX 代码如下：

const element = <div className="myClass">Hello, React!</div>;

这段 JSX 会被转译为以下 React.createElement 方法的调用：

const element = React.createElement(
  'div', // 元素类型
  { className: 'myClass' }, // 元素属性对象
  'Hello, React!' // 子元素
);

这个方法返回一个描述了指定类型、属性和子元素的 React 元素。最终，这些 React 元素将被用于构建虚拟 DOM 树，用于更新实际的 DOM 结构。

虽然在实际开发中，我们更多地使用 JSX 来描述组件结构，但 React.createElement 是 JSX 背后的实现原理，它可以手动创建 React 元素用于动态渲染组件。

讲讲什么是 JSX ？

JSX 是 JavaScript XML 的缩写，是 React 提供的一种语法扩展，用于在 JavaScript 中编写类似于 XML 或 HTML 的结构。它允许开发者在 JavaScript 中直接书写类似于 HTML 的代码，提供了更直观、更易读的方式来描述 UI 组件。

JSX 的特点：

结合了 HTML 和 JavaScript：JSX 允许在 JavaScript 代码中嵌入类似 HTML 的结构，使得编写组件更加直观和灵活。
易读易写：使用类似 HTML 的标记语法，更接近视觉展示，增强了代码的可读性。
与 JavaScript 无缝集成：在 JSX 中可以使用 JavaScript 表达式，比如使用大括号 {} 将 JavaScript 表达式包裹起来，嵌入到 JSX 结构中。

示例：

以下是一个简单的 JSX 示例，展示了 JSX 如何被用于创建 React 组件：

import React from 'react';

function Greeting() {
  const name = 'Alice';
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Welcome to my React App.</p>
    </div>
  );
}

在上面的代码中，<div>、<h1>、<p> 等标签被直接用于描述 UI 结构，同时使用了 JavaScript 表达式 {name} 来渲染变量 name 的值。在编译阶段，JSX 会被转换为 React.createElement 方法的调用来构建 React 元素树。

虽然 React 并不强制要求使用 JSX，但它已成为开发 React 应用的主流方式，使得编写 UI 代码更加直观和便捷。

为什么不直接更新 `state` 呢？

在 React 中，更新状态（state）时需要使用 setState 方法，而不是直接修改 state。这是因为直接更新 state 可能会导致一些问题，而使用 setState 方法可以帮助 React 正确地管理组件状态并触发更新。

为什么不直接更新 `state`：

确保 React 的状态管理机制：React 依赖于 setState 方法来管理组件的状态变化，直接修改 state 会绕过 React 的更新机制，可能导致组件不会重新渲染，或者渲染结果与预期不符。
异步更新状态：setState 方法的更新是异步的，React 会将多个 setState 调用合并成一个更新，以提高性能。直接修改 state 无法保证状态的合并和异步更新，可能会引发意料之外的行为。
可预测性和可维护性：通过 setState 方法更新状态能够更容易地跟踪状态的变化，使代码更具可预测性和可维护性。

正确使用 `setState` 方法：

基于当前状态更新：使用函数形式的 setState，确保在更新状态时基于先前的状态。
```
this.setState((prevState) => {
  return { count: prevState.count + 1 };
});
```
避免直接使用 this.state 修改状态：直接修改 this.state 是不安全的，并且不会触发组件的重新渲染。
```
// 不推荐
this.state.count = this.state.count + 1;
```

通过使用 setState 方法，React 可以更好地管理状态更新、触发组件重新渲染，并且能够保证状态更新的一致性和可预测性。

React 组件生命周期有哪些不同阶段？React 的生命周期方法有哪些？

在 React 中，组件的生命周期可以分为三个主要阶段：

1. 挂载阶段（Mounting）：

这个阶段发生在组件被创建并插入到 DOM 中时。

constructor：组件的构造函数，在组件被创建时调用，用于初始化状态和绑定方法。
static getDerivedStateFromProps：在组件创建时和更新时均会被调用，用于在 props 发生变化时更新 state。
render：渲染函数，在这里生成 React 元素树。
componentDidMount：组件被挂载到 DOM 后调用，可进行网络请求、DOM 操作等副作用。

2. 更新阶段（Updating）：

这个阶段发生在组件被重新渲染时，通常由 props 或 state 的变化触发。

static getDerivedStateFromProps：同挂载阶段，用于在 props 变化时更新 state。
shouldComponentUpdate：决定是否要进行组件更新，默认返回 true，可以根据需求优化性能。
render：更新阶段也会调用 render 方法重新生成 React 元素树。
getSnapshotBeforeUpdate：在更新 DOM 前捕获一些信息，比如滚动位置等。
componentDidUpdate：组件更新完成后调用，可进行 DOM 操作或网络请求等。

3. 卸载阶段（Unmounting）：

这个阶段发生在组件被从 DOM 中移除时。

componentWillUnmount：在组件即将被卸载和销毁前调用，清理工作应该在这里完成，比如清除定时器或取消网络请求等。

钩子方法（Lifecycle Methods）：

constructor：组件的构造函数。
static getDerivedStateFromProps：静态方法，根据 props 更新 state。
render：渲染函数。
componentDidMount：组件挂载后执行的方法。
shouldComponentUpdate：决定组件是否需要更新。
getSnapshotBeforeUpdate：在更新 DOM 之前获取信息。
componentDidUpdate：组件更新完成后执行的方法。
componentWillUnmount：组件即将卸载和销毁前执行的方法。

这些生命周期方法能够帮助开发者在组件的不同阶段执行特定的操作，实现副作用、更新优化以及资源清理等功能。值得注意的是，在 React 17 及之后的版本，一些生命周期方法已被标记为不推荐使用或废弃，比如 componentWillMount、componentWillReceiveProps 等。

这三个点(…)在 React 干嘛用的？

在 React 中，三个点 ... 是 JavaScript 中的展开运算符（Spread Operator）和剩余参数运算符（Rest Parameters），在不同的上下文中具有不同的用途。

1. 展开运算符（Spread Operator）：

用途：... 可以将可迭代对象（数组、对象、字符串等）展开，将其内容解构为独立的元素或属性。

示例：在 React 中，展开运算符常用于传递 props 或合并对象、数组等。

// 传递 props
const props = { name: 'Alice', age: 30 };
<Component {...props} />

// 合并数组
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const mergedArray = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]

2. 剩余参数运算符（Rest Parameters）：

用途：... 可以用于捕获剩余的参数并放入一个数组中。

示例：在函数参数中，可以使用剩余参数运算符来捕获传入函数的所有参数。

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

sum(1, 2, 3, 4); // 10

在 React 中，展开运算符常用于传递属性（props）给组件或者在数组、对象操作中合并或展开内容。剩余参数运算符则用于函数参数中捕获不定数量的参数，使得函数更加灵活。

React 中的 `useState()` 是什么？

useState 是 React 提供的一个 Hook，用于在函数式组件中引入状态管理。它允许函数式组件使用状态（state）并在组件渲染时更新状态，为函数式组件引入了可变的、与生命周期相关的状态。

`useState` 的基本用法：

import React, { useState } from 'react';

function Example() {
  // 声明一个名为 count 的状态变量，初始值为 0
  const [count, setCount] = useState(0);

  // 在组件中使用 count 状态
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useState 函数接收一个初始状态作为参数，并返回一个数组，数组第一个元素是当前状态的值，第二个元素是更新状态的函数。
在上述例子中，count 是一个状态变量，setCount 是一个更新该状态的函数。每次点击按钮时，setCount 可以改变 count 的值并触发组件重新渲染。

`useState` 的特点：

函数组件中引入状态：使函数式组件可以拥有自己的状态，不再局限于无状态的函数。
提供状态更新函数：useState 返回的更新函数可以用来更新状态值，并触发组件重新渲染。
多个状态变量：可以多次使用 useState 来管理多个状态变量。

useState 是 React Hooks 中最常用的一个，它使得函数式组件也能具有状态管理能力，可以更方便地编写功能丰富、交互性强的组件。

React 中的StrictMode(严格模式)是什么？

<React.StrictMode> 是 React 提供的一个组件，用于在开发环境下进行代码检查和识别一些潜在的问题，并给出相应的警告。它可以帮助开发者编写更加健壮、可靠的 React 应用。

`<React.StrictMode>` 的作用：

识别潜在问题：在开发环境下，Strict Mode 会检测一些潜在的问题，并给出相应的警告，比如：
- 识别不安全的生命周期使用。
- 检测过时的 API 使用。
- 避免不必要的副作用。
组件检查：Strict Mode 还会执行额外的检查，用于发现可能导致副作用的问题。它会检查组件的渲染两次是否返回了相同的内容，并且在开发环境下警告可能导致副作用的代码。

如何使用 `<React.StrictMode>`：

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

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

将根组件（通常是应用的最顶层组件）包裹在 <React.StrictMode> 组件中，即可启用 Strict Mode。在开发过程中，它有助于发现和解决一些潜在的问题，提高应用的质量和稳定性。需要注意的是，Strict Mode 仅在开发环境下生效，在生产环境下不会产生任何影响。

为什么类方法需要绑定到类实例？

在 JavaScript 中，类方法需要绑定到类实例主要是为了确保方法内部的 this 关键字指向类的实例对象，保证方法能够正确访问和操作实例的属性和方法。

为什么需要绑定：

确保正确的上下文：JavaScript 中的 this 关键字指向调用函数的上下文。如果不对类方法进行绑定，当方法被调用时，this 可能指向 undefined 或全局对象，导致意外行为或错误。
保持方法的作用域：绑定方法到类实例，可以确保方法与实例对象有关联，可以访问实例的属性和方法。

绑定方法的方式：

在 JavaScript 中，有几种方式可以将类方法绑定到类实例上：

使用 bind 方法：

class MyClass {
  constructor() {
    this.myMethod = this.myMethod.bind(this);
  }

  myMethod() {
    // ...
  }
}

使用箭头函数（推荐）：

class MyClass {
  myMethod = () => {
    // ...
  };
}

在构造函数中绑定方法：

class MyClass {
  constructor() {
    this.myMethod = this.myMethod.bind(this);
  }

  myMethod() {
    // ...
  }
}

以上方法都可以确保类方法在调用时能够正确地引用类实例作为 this，以便访问实例的属性和方法。绑定类方法到实例是保证方法正常运行和访问实例属性的重要步骤。

什么是 prop drilling，如何避免？

Prop drilling（属性钻取）是指将 props 层层传递给组件树中深层的组件的过程。当需要在组件树的较深层级中使用来自顶层组件的 props 数据时，需要将这些 props 通过中间组件一层层地传递下去，这样的传递过程就被称为 prop drilling。

Prop drilling 的问题：

繁琐性：在组件层级较深时，如果需要的 props 要一层层地传递下去，会导致代码变得复杂、繁琐。
耦合性：中间组件不需要这些 props 数据，但仍然需要将它们传递给下一层级的组件，导致组件之间耦合性增加。

如何避免 Prop drilling：

使用 Context API：React 提供了 Context API，可以跨越组件树传递数据，避免将数据逐层传递。通过创建上下文并在需要时消费它，可以避免 prop drilling 的问题。
状态提升：如果某个数据在多个组件中共享并且被修改，可以将其提升到更高层级的父组件中管理，然后通过 props 传递给子组件。
组件重构：重新设计组件结构，将需要共享的数据提取到一个共同的父组件中，以减少层级和传递。
使用状态管理工具：如 Redux、MobX 等可以全局管理应用状态，避免了 prop drilling 的问题。

避免 prop drilling 的关键是通过合适的数据传递方式，让数据在组件树中自由流动而不是一层层地手动传递。选择合适的数据管理方案，会让应用更加清晰和易于维护。

描述 Flux 与 MVC？

Flux 和 MVC 是两种前端架构模式，用于组织和管理应用程序的数据流和逻辑。

MVC（Model-View-Controller）：

MVC 是一种经典的软件架构模式，用于构建用户界面和应用程序的设计模式，主要分为三个部分：

Model（模型）：表示应用程序的数据和业务逻辑。它负责处理数据的读取、存储和更新，以及应用的业务规则。
View（视图）：表示应用程序的用户界面。它负责展示数据给用户，并与用户进行交互。
Controller（控制器）：作为模型和视图之间的中间人，接收用户的输入并根据输入来更新模型数据，同时更新视图。

MVC 架构模式主要关注数据、视图和用户交互之间的分离，以及通过控制器将它们连接起来。然而，MVC 存在着模型和视图之间的双向关联，可能导致复杂性和数据流混乱。

Flux：

Flux 是一种应用程序架构思想，由 Facebook 提出，用于解决复杂的前端应用程序数据流管理问题。它包含以下几个核心概念：

Actions（动作）：定义用户行为或系统事件的抽象。通常是一个包含类型和数据的对象。
Dispatcher（分发器）：负责管理数据流向的中央调度器，接收来自动作的信息并将其分发给存储器。
Stores（存储器）：包含应用程序的状态和逻辑，负责处理数据和状态的改变，并触发视图更新。
Views（视图）：用户界面层，负责展示存储器中的数据，并发送动作到分发器。

Flux 的核心思想是单向数据流，通过严格的数据流向和单向数据流动性，减少了数据流的复杂性，并使得应用程序的状态更加可控和易于调试。与 MVC 不同，Flux 强调了数据流的单向性和可预测性，避免了数据在不同模块之间的相互影响和复杂性。

什么是 React Context?

React Context 是 React 提供的一种用于跨组件层级传递数据的方式，可以避免 prop drilling（属性钻取）并且在组件树中不同层级的组件之间共享数据。它允许您创建一个在组件树中全局可访问的数据存储，并在需要时在任何深度的组件中访问这些数据，而不必手动通过 props 一层层地传递。

React Context 的关键概念：

Provider（提供器）：用于提供数据的组件。通过 Provider 组件将数据传递给后代组件。
Consumer（消费者）：用于在组件中消费（获取）上层提供的数据。可以使用 Consumer 组件来访问 Provider 提供的数据。

如何使用 React Context：

创建 Context：

const MyContext = React.createContext(defaultValue);

提供数据：通过 Provider 提供数据给后代组件。

<MyContext.Provider value={/* 数据 */}>
  {/* 子组件 */}
</MyContext.Provider>

消费数据：在需要使用数据的组件中，使用 Consumer 或 useContext 来消费数据。
- 使用 Consumer：
```
<MyContext.Consumer>
  {value => /* 使用 value */}
</MyContext.Consumer>
```
- 使用 useContext（Hooks）：
```
const value = useContext(MyContext);
```

通过 React Context，您可以轻松地在组件层级中共享数据，避免了 prop drilling 的繁琐和耦合性，使得组件之间的数据传递更为灵活和简洁。通常用于管理全局状态、主题、用户身份验证等数据的共享。

什么是 React Fiber?

React Fiber 是 React 16 中引入的新的协调引擎（Reconciliation Engine），用于管理 React 中的组件更新、调度和渲染。它是 React 的内部实现机制，旨在提升 React 应用的性能和用户体验。

React Fiber 的特点和目标：

增量式更新：Fiber 使用增量式更新算法，将渲染任务分解为多个小任务，可以在多个帧中分批完成，提高了应用的响应速度，减少了主线程阻塞时间。
可中断和恢复：Fiber 架构允许 React 在渲染过程中中断任务的执行，并在下一个帧或优先级更高的任务完成后恢复执行，保证了更加流畅的用户体验。
优先级调度：引入了任务优先级的概念，可以根据任务的紧急程度动态调整任务的执行顺序，以便更快地响应用户操作。
更好的并发性：Fiber 支持并发模式，可以更好地利用现代浏览器的多核 CPU，提高渲染性能。

React Fiber 的核心思想：

Fiber 本质上是一个虚拟的工作单元（fiber），它代表着 React 中的一个组件的渲染工作单元。通过构建 Fiber 树来描述 React 组件树，React 使用 Fiber 树来决定哪些组件需要更新、执行顺序以及优化更新过程。

Fiber 架构使得 React 能够更加灵活地管理组件的更新和渲染，同时可以更好地适应不同的应用场景和优化策略。它为 React 提供了更多的控制权和性能优化的可能性，使得 React 应用在大型、复杂场景下的性能表现更为出色。

如何在 React 的 Props 上应用验证？

在 React 中，您可以通过多种方式对 props 进行验证，以确保传入组件的数据符合预期的格式、类型或其他约束条件。以下是一些验证 props 的方法：

1. 使用 PropTypes 进行类型检查：

PropTypes 是 React 提供的一种对 props 进行类型检查的机制，可以在组件定义中声明所需的 props 类型。

import PropTypes from 'prop-types';

// 在组件定义中，声明所需的 props 类型
MyComponent.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number,
  email: PropTypes.string,
  // ...
};

2. 使用 TypeScript 进行静态类型检查：

TypeScript 是一种 JavaScript 的超集，它提供了静态类型检查的功能，可以在编译阶段检测并纠正类型错误。

interface Props {
  name: string;
  age?: number; // 可选属性
  email?: string;
  // ...
}

const MyComponent: React.FC<Props> = ({ name, age, email }) => {
  // ...
};

3. 手动验证：

在组件内部手动编写逻辑进行验证，可以在组件中使用条件语句或函数来验证 props 的值。

function MyComponent({ name, age, email }) {
  if (typeof name !== 'string' || typeof age !== 'number') {
    throw new Error('Invalid props provided to MyComponent');
  }
  // ...
}

这些方法可以单独使用或结合起来，以确保传入组件的 props 数据符合预期，并且提供了一种方式来增强应用的健壮性和可维护性。PropTypes 是 React 内置的一种轻量级的验证机制，适用于简单的类型验证。对于更严格的类型检查，可以使用 TypeScript 这样的静态类型检查工具。而手动验证则提供了更大的灵活性，适用于更复杂的验证逻辑。

在 React 中使用构造函数和 getInitialState 有什么区别？

在 React 中，使用构造函数（constructor）和 getInitialState() 是两种不同的方式来初始化组件的状态（state）。它们存在一些区别：

1. 构造函数：

在 React 类组件中，构造函数是 ES6 类的标准语法，用于初始化类实例的属性，包括初始化状态（state），绑定方法等。

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

作用：构造函数中的 this.state 赋值语句用于初始化组件的状态。
语法：使用 ES6 类的标准语法，通过 this.state 直接对状态进行初始化。

2. getInitialState()：

getInitialState() 是 React 早期版本（React 0.13 之前）中用于初始化组件状态的方法，它不是 ES6 类中的一部分，而是在 React 的创建组件的过程中特定的生命周期方法。

var MyComponent = React.createClass({
  getInitialState: function() {
    return {
      count: 0
    };
  },
  // ...
});

作用：getInitialState() 方法用于返回初始化的状态对象。
语法：在使用 React.createClass() 创建组件时，可以通过 getInitialState() 方法返回初始状态。

区别：

语法差异：构造函数是 ES6 类的一部分，在类组件中直接使用 this.state 进行状态初始化；而 getInitialState() 是在旧版 React 中用于初始化状态的特定方法。
版本差异：getInitialState() 是在 React 0.13 之前的版本中使用的方式，后续的 React 版本推荐使用构造函数来初始化状态。

建议在现代 React 中使用构造函数来初始化组件的状态，因为它是更标准和常见的方式，更易于理解和维护，并且与 ES6 类语法更加一致。getInitialState() 主要存在于早期版本中，如果使用较新的 React 版本，通常不需要使用该方法。

如何有条件地向 React 组件添加属性？

在 React 中，有多种方法可以有条件地向组件添加属性。您可以使用 JavaScript 的条件语句或逻辑运算来动态设置组件的属性。

使用条件语句：

function MyComponent(props) {
  const additionalProps = {};
  
  if (condition) {
    additionalProps.someProp = 'value';
  } else {
    additionalProps.otherProp = 'value';
  }

  return (
    <OtherComponent {...props} {...additionalProps} />
  );
}

在这个例子中，根据条件 condition 的值，动态创建一个 additionalProps 对象，并根据条件设置不同的属性。然后使用对象展开运算符将这些属性添加到组件中。

使用三元表达式：

function MyComponent(props) {
  const additionalProp = condition ? 'value1' : 'value2';

  return (
    <OtherComponent {...props} someProp={additionalProp} />
  );
}

这个例子使用了三元表达式根据条件来决定传递给组件的特定属性。

使用逻辑与运算符（&&）：

function MyComponent(props) {
  const additionalProp = condition && 'value';

  return (
    <OtherComponent {...props} someProp={additionalProp} />
  );
}

这种方法在 condition 为 true 时设置属性，当 condition 为 false 时将不会传递该属性。

根据具体的场景和需求，您可以选择适合的方法来有条件地向 React 组件添加属性，这些方法都允许您根据条件动态地设置组件的属性。

Hooks 会取代 `render props` 和高阶组件吗？

虽然 Hooks 提供了一种新的方式来管理状态和复用逻辑，但并不意味着它会完全取代 render props 和高阶组件（Higher Order Components，HOCs）。

1. `render props`：

render props 是一种模式，其中一个组件通过 prop 中的函数将其渲染逻辑委托给另一个组件。这种模式可以带来可复用性和灵活性，使得逻辑可以在组件之间共享。

Hooks 提供了状态管理和副作用处理的新方式，可以简化组件逻辑，但并不完全取代 render props。某些场景下，render props 仍然可以是一种非常有效的组件复用方式，特别是当需要将逻辑和状态共享给多个组件时。

2. 高阶组件（HOCs）：

高阶组件是一个接收组件并返回新组件的函数。它是 React 中用于复用组件逻辑的一种模式。HOCs 可以用于增强组件，例如添加状态、处理逻辑等。

Hooks 可以在很大程度上替代高阶组件的某些使用场景，但并非所有。Hooks 可以让函数组件拥有状态和生命周期等特性，但在一些情况下，HOCs 仍然是一种有效的组件封装和复用方式，特别是在需要在多个组件中共享相同逻辑的情况下。

结论：

Hooks 是 React 引入的一种新特性，它改变了组件中状态和生命周期的管理方式，并提供了一种更直观、更灵活的编码方式。虽然它可以替代一些场景下 render props 和高阶组件的使用，但并不意味着完全取代它们。在实际应用中，可以根据具体场景和需求选择最合适的方式来组织和复用组件逻辑。

如何避免组件的重新渲染？

在 React 中，组件的重新渲染是 React 机制的一部分，但您可以采取一些策略来优化和减少不必要的重新渲染：

使用 `PureComponent` 或 `React.memo()`：

PureComponent：对于类组件，使用 PureComponent 可以帮助您避免在 shouldComponentUpdate 中手动比较属性和状态，因为 PureComponent 自动进行了浅层比较（shallow comparison）。
```
class MyComponent extends React.PureComponent {
  // ...
}
```
React.memo()：对于函数式组件，使用 React.memo() 可以对组件进行浅层的 props 比较，如果 props 没有变化，将阻止不必要的重新渲染。
```
const MemoizedComponent = React.memo(MyComponent);
```

避免不必要的状态更新：

使用 setState 前先进行条件检查：确保在调用 setState 之前进行条件检查，避免不必要的状态更新。
避免直接修改状态：直接修改状态可能会导致组件重新渲染，应该使用 setState 更新状态。

使用 shouldComponentUpdate 或 React.memo：

shouldComponentUpdate：对于类组件，手动实现 shouldComponentUpdate 方法，比较新旧属性和状态，决定是否更新。

shouldComponentUpdate(nextProps, nextState) {
  return this.props.someProp !== nextProps.someProp || this.state.someState !== nextState.someState;
}

React.memo() 和自定义比较函数：对于函数式组件，React.memo() 接受一个自定义的比较函数，您可以在该函数中进行详细的 props 比较，决定是否重新渲染组件。
```
const MemoizedComponent = React.memo(MyComponent, (prevProps, nextProps) => {
  // 返回 true 表示需要重新渲染，返回 false 表示不需要重新渲染
});
```

优化子组件渲染：

使用子组件拆分：将大型组件拆分为更小、更独立的子组件，使得只有特定部分的变化会触发重新渲染。
使用 React.memo() 优化子组件：对子组件应用 React.memo()，以避免子组件不必要的重新渲染。

优化组件的重新渲染需要根据具体情况进行，结合使用 PureComponent、shouldComponentUpdate、React.memo() 和避免不必要的状态更新，可以有效减少不必要的渲染，提高组件性能。

什么是纯函数？

纯函数是指在函数式编程中具有以下两个特性的函数：

相同输入产生相同输出：给定相同的输入，纯函数始终会返回相同的输出，不会因为外部状态的变化而产生不同的结果。这意味着纯函数不依赖于函数外部的状态、数据或副作用。
没有副作用：纯函数不会对函数外部的状态进行修改，也不会产生其他可观察到的影响，如改变传入的参数，修改全局变量，对 DOM 进行操作等。它仅仅依赖于传入的参数，并且返回一个新的值。

纯函数的特点：

相同的输入始终得到相同的输出，这种特性使得纯函数易于测试和推理，因为它们不会产生意外的行为或副作用。
纯函数具有可缓存性，可以使用缓存技术来存储已计算过的结果，提高性能。
纯函数对于并发执行和并行执行更为友好，因为它们不涉及共享的状态。

示例：

// 纯函数示例
function add(a, b) {
  return a + b;
}

// 非纯函数示例（有副作用，依赖外部状态）
let total = 0;
function addToTotal(n) {
  total += n;
}

纯函数在函数式编程中起着重要作用，它们有助于编写更可靠、可测试和可维护的代码。在 React 或其他函数式框架中，采用纯函数能够更好地管理状态、减少副作用，使得应用更加可预测和易于理解。

当调用`setState`时，React `render` 是如何工作的？

当调用 setState 方法时，React 并不会立即触发组件的重新渲染（render）。React 会将新的状态（state）合并到组件的状态队列中，并进行异步更新。

React 的 setState 流程：

更新状态：调用 setState 会将新的状态对象合并到组件的状态队列中，但并不会立即触发重新渲染。
批处理状态更新：React 会对 setState 进行批处理，在合适的时机将更新应用到组件。
调度更新：React 内部使用调度器（Scheduler）来安排更新。它根据优先级和浏览器的空闲时间安排任务。React 16 引入了 Fiber 架构，使得更新调度更加灵活和可控。
执行更新阶段：在更新阶段，React 会比较前后状态的差异，确定需要更新的部分，并进行局部更新。这个阶段会触发生命周期方法、render 方法等。
构建虚拟 DOM：React 使用新的状态和组件树结构构建虚拟 DOM。
对比更新：React 将新的虚拟 DOM 与之前的虚拟 DOM 进行对比，找出变化的部分。
实际 DOM 更新：React 根据对比结果，只更新真正发生变化的部分，将这些变化同步到实际的 DOM 中。

注意事项：

setState 是异步的，多个 setState 可能被合并成一次更新，以提高性能。
在 componentDidUpdate 中可以获取到更新后的状态，但应谨慎使用，因为过多的 setState 可能导致无限循环更新。
如果需要在 setState 之后立即获取更新后的状态，可以使用 setState 的第二个参数，它是一个回调函数，会在更新完成后执行。

理解 React 的 setState 更新机制有助于更好地管理组件的状态和生命周期，以及避免不必要的性能问题。

如何避免在React重新绑定实例？

在 React 中，避免在每次渲染时重新绑定实例可以提高性能。通常，避免重新绑定实例的方法是在类组件中使用箭头函数或将方法绑定在构造函数中。

使用箭头函数：

在类组件中，将函数定义为箭头函数可以确保函数中的 this 始终指向组件实例，无需在每次渲染时重新绑定。

class MyComponent extends React.Component {
  handleClick = () => {
    // 使用 this 来访问组件实例
  }

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

在构造函数中绑定方法：

在类组件的构造函数中使用 bind 方法将方法绑定到组件实例，同样可以确保方法内部的 this 指向组件实例。

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

  handleClick() {
    // 使用 this 来访问组件实例
  }

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

这两种方式都可以避免在每次渲染时都重新绑定实例，提高了性能。使用箭头函数可以更为简洁，但如果在构造函数中绑定方法，可以在构造函数中一次性完成所有的方法绑定，这在一些场景下更为清晰和可维护。选择其中一种方式来避免在 React 组件重新绑定实例，根据团队和个人偏好选择最合适的方法。

在js原生事件中 onclick 和 jsx 里 onclick 的区别

在 JavaScript 原生事件中的 onclick 和 JSX 中的 onClick 有一些关键区别：

JavaScript 原生事件中的 `onclick`：

onclick 是 HTML DOM 元素的属性，用于在 HTML 中绑定事件处理程序。它是原生 JavaScript 的一部分，通过字符串指定要执行的 JavaScript 代码。

<button onclick="handleClick()">Click me</button>

直接执行 JavaScript：onclick 直接执行指定的 JavaScript 代码，可以是函数名或包含 JavaScript 代码的字符串。
全局作用域：onclick 中的代码通常在全局作用域中执行，可以访问全局变量。

JSX 中的 `onClick`：

onClick 是 React 中的属性，用于绑定事件处理函数到 React 元素上。它是 React 中用于处理点击事件的事件属性。

<button onClick={handleClick}>Click me</button>

引用事件处理函数：onClick 接受一个事件处理函数作为参数，不是直接执行 JavaScript，而是指定一个函数引用。
React 事件系统：onClick 使用 React 自己的事件系统来处理事件，与原生 DOM 事件略有不同。

主要区别：

语法和用法：onclick 是 HTML 中的属性，使用字符串或函数指定事件处理程序；而 onClick 是 React 中的属性，使用函数引用指定事件处理函数。
执行方式：onclick 直接执行指定的代码；onClick 将事件处理函数注册到 React 的事件系统中。

在 React 应用中，推荐使用 onClick 来绑定事件处理函数，因为它更符合 React 的组件化思想，可以更好地管理事件处理逻辑，并且更加灵活和可维护。同时，使用 onClick 可以避免一些常见的安全问题和全局作用域污染。

diff复杂度原理及具体过程画图

Diff 算法是 React 用于比较 Virtual DOM 的一种策略，用于确定 Virtual DOM 的变化并最小化实际 DOM 的更新次数。它并不是固定的复杂度，而是在 O(n) 级别，其中 n 是 Virtual DOM 的节点数。

Diff 算法步骤：

树的比较：Diff 算法会比较两棵树的结构和节点，找出节点的变化和差异。
同层比较：React 使用同层比较策略，对比相同层级的节点，而不会跨层级进行比较。
更新策略：通过一些启发式的规则，Diff 算法会尽可能地在渲染和更新过程中减少修改操作。比如，当新旧节点的类型不同时，会直接替换旧节点。
Key 的作用：使用 key 来标识节点，有助于 React 正确识别节点的变化和重用节点，避免不必要的更新。
优化策略：Diff 算法在执行过程中会根据不同的情况进行优化，比如在子树比较时，会尽可能地避免递归比较整个子树。

Diff 算法示意图：

旧的 Virtual DOM 树              新的 Virtual DOM 树
      A                             B
    / | \                         / | \
   X  Y  Z          ---->         X  Y  C
                                     |
                                     D

在示意图中，Diff 算法会比较旧的 Virtual DOM 树和新的 Virtual DOM 树，找出节点的变化。在这个例子中，节点 A 会被替换成节点 B，节点 Z 会被替换成节点 C，并且节点 Z 下的子节点 D 会被移动到节点 C 下。

这种比较的方式会根据具体的场景和节点结构，尽可能地减少实际 DOM 的更新，以提高性能。

实际的 Diff 算法比较复杂，但基本原理是尽可能地在渲染过程中找出最小的更新集合，以最优化地更新视图。

shouldComponentUpdate的作用是什么？

shouldComponentUpdate() 是 React 类组件中的一个生命周期方法，它允许您手动控制组件是否需要重新渲染。这个方法返回一个布尔值，表示组件是否应该更新。

`shouldComponentUpdate()` 的作用：

性能优化：通过实现 shouldComponentUpdate() 方法，您可以在组件更新之前进行优化。如果确定组件的状态或属性没有变化，可以返回 false，告诉 React 不要进行不必要的重新渲染，从而提高性能。
避免不必要的渲染：当组件的属性或状态发生变化时，React 默认会重新渲染组件。但有时，并非所有变化都会影响组件的输出。通过 shouldComponentUpdate()，您可以根据需要选择性地阻止渲染。

示例：

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    // 根据需要的条件判断，决定是否更新
    if (this.props.someProp === nextProps.someProp && this.state.someState === nextState.someState) {
      return false; // 不重新渲染
    }
    return true; // 重新渲染
  }

  render() {
    // 组件的渲染逻辑
    return (
      // ...
    );
  }
}

在 shouldComponentUpdate() 中，您可以根据组件的新属性和新状态与旧属性和旧状态之间的差异，决定是否触发重新渲染。如果确定没有必要更新，可以返回 false 阻止渲染，否则返回 true 继续渲染。

shouldComponentUpdate() 应该谨慎使用，因为过度使用可能导致应用出现问题，例如状态没有正确更新。但在合适的场景下，它是优化 React 应用性能的有效手段。

React组件间信息传递

在 React 中，组件间信息传递可以通过 props、状态提升、上下文（Context API）、事件订阅/发布模式（Pub/Sub）、Redux 或其他状态管理库等方式来实现。

1. Props：

父组件可以通过 props 将数据传递给子组件。这是 React 中最常见的信息传递方式，适用于父子组件之间的通信。

// 父组件
class ParentComponent extends React.Component {
  render() {
    return <ChildComponent data={someData} />;
  }
}

// 子组件
class ChildComponent extends React.Component {
  render() {
    return <div>{this.props.data}</div>;
  }
}

2. 状态提升（Lifting State Up）：

将状态从子组件移至父组件，通过 props 将状态传递给需要访问该状态的子组件。这对于多个组件共享状态很有用。

3. 上下文（Context API）：

React 的 Context API 允许在组件树中传递数据，而无需在每个级别手动传递 props。适用于在组件层次较深时共享数据。

4. 事件订阅/发布模式（Pub/Sub）：

使用事件订阅/发布模式的库（如 EventEmitter）或自定义事件系统，允许组件之间进行事件的订阅和发布，从而进行信息传递。

5. 状态管理库（如 Redux、MobX）：

使用专门的状态管理库来管理应用程序的状态，并让多个组件共享和访问这些状态。这对于大型应用程序中的状态共享和复杂逻辑管理非常有用。

选择信息传递的方式取决于应用的规模、复杂性以及数据在组件层次结构中的传递方式。对于简单的父子组件通信，props 是最直接的方式；而对于更大型或需要多个组件之间共享状态的情况，则可能需要使用状态管理库或上下文。

React状态管理工具有哪些？redux actionCreator都有什么？

在 React 中，有多种状态管理工具可供选择，其中 Redux 是最常用和最流行的状态管理库之一。除了 Redux，还有 MobX、React Context API、Recoil 等库也可以用于状态管理。

Redux：

Redux 是一个可预测状态容器，它包含以下核心概念：

Store：应用程序的状态管理中心。
Action：描述状态变化的事件对象。
Reducer：纯函数，根据 Action 更新状态。
Dispatch：将 Action 发送到 Reducer，触发状态变化。

Redux 的 Action Creator：

Action Creator 是一个函数，用于创建和返回 Redux Action 对象，它是触发状态更改的标准方式。Action Creator 用于封装创建 Action 的逻辑，以确保应用中的 Action 是一致和可维护的。

示例：

// Action Creator
const increment = (amount) => {
  return {
    type: 'INCREMENT',
    payload: amount,
  };
};

// 使用 Action Creator 创建 Action
const action = increment(5);
// action -> { type: 'INCREMENT', payload: 5 }

Redux 的 Action Creator 通常是普通的函数，它们负责返回一个描述 Action 的对象，并可选地包含负载（payload）数据。Action Creator 应该是纯函数，只负责生成 Action 对象，不进行副作用操作。

Action Creator 有助于统一和标准化 Action 的创建，使得在应用中更易于维护和测试。在实际应用中，可能会有多个 Action Creator，用于描述不同的状态变化。

除了 Redux，还有其他类似的状态管理工具，每个工具都有自己的概念和实现方式，可以根据项目的需求和复杂性选择适合的状态管理库。

什么是高阶组件、受控组件及非受控组件？都有啥区别

这些概念都涉及到 React 中组件的不同特性和用法：

高阶组件（Higher-Order Components - HOC）：

高阶组件是一个函数，接受一个组件作为参数，并返回一个新的增强型组件。它用于在 React 中重用组件逻辑，实现组件之间的代码共享。

作用：高阶组件允许您通过将通用逻辑抽象为函数来提高组件的复用性，例如：对组件进行状态管理、权限控制、数据获取等操作。
示例：一个简单的高阶组件可以是一个接受组件作为参数并返回该组件的包装函数。

const withLogging = (WrappedComponent) => {
  return class extends React.Component {
    componentDidMount() {
      console.log('Component is mounted');
    }

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

// 使用高阶组件包装组件
const EnhancedComponent = withLogging(MyComponent);

受控组件（Controlled Components）：

受控组件是由 React 控制状态的组件，其值由 React 的状态（state）来管理。在受控组件中，表单元素的值（input、select、textarea 等）受 React 组件的状态控制，并通过事件处理程序进行更新。

特点：表单元素的值受 React 状态控制，当状态改变时，表单元素会随之更新，表单提交的值也由 React 状态管理。
示例：通过 value 属性和事件处理程序来控制 input 元素的值。

class ControlledComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
  }

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

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

非受控组件（Uncontrolled Components）：

非受控组件中，表单元素的值由 DOM 自身管理，React 并不控制其值。这些组件的状态由 DOM 元素本身来维护，通常是通过 ref 来获取值。

特点：表单元素的值由 DOM 直接管理，React 并不控制，适用于一些特定场景，如集成第三方库、性能优化等。
示例：使用 ref 获取 input 元素的值。

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

  handleClick = () => {
    console.log(this.inputRef.current.value);
  }

  render() {
    return (
      <div>
        <input type="text" ref={this.inputRef} />
        <button onClick={this.handleClick}>Get Value</button>
      </div>
    );
  }
}

区别：

高阶组件：是一个函数，用于增强组件的功能，例如提供通用逻辑、复用代码。
受控组件：表单元素的值由 React 组件的状态控制，由 React 管理。
非受控组件：表单元素的值由 DOM 元素本身管理，React 不控制其值。

选择使用受控组件或非受控组件取决于应用场景和需求，受控组件提供更好的状态管理和数据流控制，而非受控组件有时可以更方便地与 DOM 集成和操作。

vuex 和 redux 的区别？

Vuex 和 Redux 都是用于管理状态的 JavaScript 库，用于在前端应用中管理复杂的状态和数据流。它们在概念上有很多相似之处，但也有一些区别：

相似之处：

状态管理：两者都是专注于状态管理，通过单一的状态树（单一数据源）来管理整个应用的状态。
不可变性：都鼓励使用不可变对象来管理状态，以确保状态的可预测性和数据变更的追踪。
纯函数：都鼓励使用纯函数来处理状态的变化，通过 reducer 或 mutations 来描述状态的变化。

区别：

框架：Vuex 是为 Vue.js 开发的状态管理库，与 Vue.js 深度集成，提供了与 Vue 组件间的更直接的连接；而 Redux 是独立于任何特定视图库的状态管理库，可以与 React、Angular、Vue 等任何 JavaScript 库结合使用。
概念和设计：Redux 是受到 Flux 架构的启发而设计的，其核心概念包括 Store、Action、Reducer 和 Middleware。而 Vuex 是受到 Flux 和 Redux 的影响，但与其相比，概念上更加简化，包括 State、Getter、Mutation 和 Action。
模块化：Vuex 对模块化的支持更直接，内置了模块化的概念，允许将状态拆分成模块，每个模块都有自己的 state、mutations、actions 等。Redux 则更加灵活，开发者需要手动组织状态的模块化结构。
语法和使用：Vuex 可以更轻松地与 Vue.js 结合使用，使用起来更加简洁直观，因为它直接暴露了针对 Vue 组件的辅助函数。Redux 则需要使用额外的库（如 React-Redux）来连接 React 组件。

选择使用 Vuex 还是 Redux 取决于您正在使用的框架和个人偏好。如果您是 Vue.js 用户，那么使用 Vuex 可能会更加自然和方便；而 Redux 则适用于需要跨框架使用的情况，也更加灵活和可扩展。

Redux遵循的三个原则是什么？

Redux 遵循的三个核心原则是：

单一数据源（Single Source of Truth）：
Redux 应用的整个状态被存储在单一的 JavaScript 对象中，被称为 Store。这个单一的数据源使得应用状态变得可预测且易于管理，也方便了状态的持久化和调试。
状态是只读的（State is Read-Only）：
Redux 的状态是只读的，唯一改变状态的方法是通过派发一个 Action。这样可以确保在整个应用中，状态的变化是可控且可跟踪的，同时也避免了直接操作状态带来的潜在问题。
使用纯函数来执行修改（Changes are Made with Pure Functions）：
通过纯函数（Reducers）来描述状态树的变化。Reducer 接收先前的状态和一个 Action，并返回一个新的状态。Reducer 必须是纯函数，即对于给定的输入，始终返回相同的输出，不产生副作用。这样确保了状态变化的可预测性和可维护性。

这些原则有助于确保 Redux 应用的一致性、可预测性和可维护性。通过保持单一数据源，限制对状态的修改方式，并使用纯函数来描述状态变化，Redux 提供了一种可靠且可控制的状态管理模式。

React中的keys的作用是什么？

在 React 中，key 是用于帮助 React 识别组件列表中各个子元素的特殊属性。它是给数组中的每个元素赋予一个稳定的唯一标识，有助于 React 识别哪些元素被添加、删除或修改。

`key` 的作用：

优化列表渲染：在渲染列表时，为每个子元素指定一个唯一的 key 可以帮助 React 更有效地识别变化的元素。这有助于提高性能，避免不必要的重新渲染和DOM操作。
帮助 React 识别元素：key 允许 React 根据 key 的变化来确定哪些子元素发生了变化、添加或删除，以确保正确地更新DOM，而不是重新创建整个列表。
提供稳定的标识：key 是为了给每个列表项提供一个稳定且唯一的标识符，它不应该是索引值，最好是一个独一无二的 ID。

示例：

function ListItem({ item }) {
  return <li>{item.text}</li>;
}

function ListComponent({ data }) {
  return (
    <ul>
      {data.map(item => (
        <ListItem key={item.id} item={item} />
      ))}
    </ul>
  );
}

在上面的示例中，key={item.id} 将每个列表项关联到一个唯一的 ID。当列表项的顺序变化、增加或删除时，React 使用 key 来更好地识别每个元素的变化。

正确使用 key 是优化 React 应用中列表渲染的重要一步，能够帮助 React 更有效地管理和更新列表。

redux中使用setState不能立刻获取值，怎么办

在 Redux 中，setState 不会立即获取到值，因为 Redux 的状态更新是通过派发 Action 触发 Reducer 进行状态变更的，而不是直接调用 setState。

如果您需要在状态发生变化后获取最新的状态值，可以通过订阅 Redux 的状态来实现。Redux 提供了 store.subscribe() 方法，允许您注册一个监听器，当状态发生变化时执行回调函数。

示例：

// 订阅 Redux store 的状态变化
const unsubscribe = store.subscribe(() => {
  const currentState = store.getState();
  console.log('Updated state:', currentState);
  // 在这里可以获取到最新的状态值，并执行相应逻辑
});

// 在某个地方派发一个 Action 触发状态变更
store.dispatch({ type: 'SOME_ACTION', payload: newValue });

// 当不再需要监听状态变化时，取消订阅
unsubscribe();

在这个示例中，通过 store.subscribe() 订阅了状态的变化，并在回调函数中获取了最新的状态值 currentState。当状态发生变化时，会触发回调函数，您可以在这里获取到最新的状态值，并执行相应的逻辑。

记得在不再需要监听状态变化时，调用 unsubscribe() 取消订阅，以避免内存泄漏或不必要的监听。

React新老版生命周期函数

React 16 之前和之后的版本对生命周期函数进行了调整。以下是新旧版本中的主要生命周期函数：

React 16 之前（旧版）：

挂载阶段：
- componentWillMount()：在组件挂载到 DOM 之前立即调用，只在服务器渲染时调用一次。
- componentDidMount()：在组件第一次渲染后立即调用，通常用于执行 DOM 操作、数据获取等副作用。
更新阶段：
- componentWillReceiveProps(nextProps)：在接收新的 props 之前立即调用。
- shouldComponentUpdate(nextProps, nextState)：在更新前被调用，用于控制组件是否需要重新渲染。
- componentWillUpdate(nextProps, nextState)：在更新前被调用，在 shouldComponentUpdate 返回 true 之后。
- componentDidUpdate(prevProps, prevState)：在组件更新后立即调用。
卸载阶段：
- componentWillUnmount()：在组件从 DOM 中移除之前立即调用，用于清理定时器、取消网络请求等清理操作。

React 16 之后（新版）：

React 16 之后引入了新的生命周期函数，并对旧生命周期函数进行了调整和归并，主要有以下几个生命周期函数：

挂载阶段：
- constructor(props)：组件的构造函数，在创建组件实例时调用，用于初始化状态和绑定方法。
- static getDerivedStateFromProps(props, state)：在渲染前调用，用于根据 props 更新 state。静态方法，不能访问 this。
- render()：渲染组件的内容。
- componentDidMount()：组件第一次渲染后调用，用于执行 DOM 操作、数据获取等副作用。
更新阶段：
- static getDerivedStateFromProps(props, state)：在组件接收到新 props 或 state 时调用，用于根据 props 更新 state。静态方法。
- shouldComponentUpdate(nextProps, nextState)：在更新前被调用，用于控制组件是否需要重新渲染。
- render()：渲染组件的内容。
- getSnapshotBeforeUpdate(prevProps, prevState)：在更新前被调用，返回值作为 componentDidUpdate 的第三个参数。
- componentDidUpdate(prevProps, prevState, snapshot)：在组件更新后被调用。
卸载阶段：
- componentWillUnmount()：在组件从 DOM 中移除之前调用，用于清理定时器、取消网络请求等清理操作。

React 16 引入了更加灵活和可预测的生命周期函数，更好地支持异步渲染和更精细的控制组件的更新。新版本的生命周期函数在处理异步场景和状态管理方面更加方便和可靠。

vue react都怎么检测数据变化

Vue 和 React 都采用了不同的机制来检测数据变化：

Vue.js 的数据变化检测：

Vue.js 使用了 “响应式系统” 来追踪依赖，并在数据变化时更新相关的 DOM。

Object.defineProperty()：Vue.js 通过使用 Object.defineProperty() 来劫持数据的访问，在数据被获取或者修改时，能够触发相关依赖的更新。这样 Vue 能够精确追踪数据变化，从而更新相关的视图。
虚拟 DOM：Vue 中使用虚拟 DOM 来跟踪和比较实际 DOM 的变化，以最小化实际 DOM 操作的次数，提高性能。

React 的数据变化检测：

React 使用了 “虚拟 DOM + 一致性比较” 来进行数据变化的检测。

Virtual DOM（虚拟 DOM）：React 通过使用虚拟 DOM 构建整个应用的 UI 层级结构。当数据发生变化时，React 会生成新的虚拟 DOM 树。
Diffing（差异比较算法）：React 使用一种称为 Diffing 的算法比较前后两个虚拟 DOM 树的差异。这个算法能够高效地找出变化的部分，并且最小化了实际 DOM 操作的数量。
状态管理：React 中使用 setState() 来更新组件的状态。当调用 setState() 时，React 会标记组件为 “dirty”，然后在下一个事件循环中对组件进行更新，从而保证更新的一致性。

总体来说，Vue 和 React 都使用了虚拟 DOM 技术来最小化实际 DOM 操作，以提高性能。但它们在数据变化检测的实现上有一些不同，Vue 使用了 Object.defineProperty() 来劫持数据的访问，而 React 则使用了一种更通用的虚拟 DOM + Diffing 策略来检测数据的变化。

React中怎么让 setState 同步更新？

在 React 中，setState 是异步执行的，React 有意将多个 setState 调用合并为单个更新，以提高性能。但有时候可能需要在 setState 后立即获取更新后的状态，可以通过 setState 的第二个参数传递一个回调函数来实现同步获取更新后的状态。

// 在 setState 的第二个参数中获取更新后的状态
this.setState({ value: newValue }, () => {
  console.log('Updated state:', this.state.value); // 在这里获取更新后的状态
});

回调函数会在状态更新完成并且组件重新渲染之后被调用，此时可以安全地访问最新的状态。

请注意，即使使用了这种方式，在大多数情况下，setState 仍然是异步执行的。如果需要立即获取状态的变化，请考虑在生命周期方法或事件处理程序中使用更新后的状态，而不是依赖于 setState 的回调函数。

什么是 immutable？为什么要使用它？

Immutable 意味着不可变性，指的是一旦数据被创建后就不能被更改。在编程中，Immutable 数据是不能被直接修改的，而是通过创建新的数据来表示修改后的状态，原始数据保持不变。

为什么要使用 Immutable 数据结构？

避免副作用：不可变性有助于减少副作用，因为不会在原始数据上直接进行修改，从而避免了意外的数据更改。
易于跟踪变化：Immutable 数据使得跟踪数据变化更容易，因为每次修改都会产生一个新的数据副本，使得可以更加方便地进行状态管理和调试。
提高性能：由于不可变性的特性，相对于可变数据结构，在更新时不需要深度比较整个数据结构，从而可以更快地进行浅比较来确定是否需要更新视图或执行其他操作。
并发安全：在多线程或并发环境中，Immutable 数据结构是线程安全的，因为数据不可变，不会发生竞态条件等问题。

在 JavaScript 中，原始的数据类型（如字符串、数字等）是不可变的，但对象和数组是可变的。为了实现不可变性，可以使用像 Immutable.js、Immer、Immutable.js 这样的库，它们提供了不可变数据结构的支持，使得在 JavaScript 中更容易地创建和管理不可变数据。

为什么不建议在 componentWillMount 做AJAX操作

componentWillMount 生命周期在组件挂载到 DOM 前立即调用，在 React 16.3 版本后被标记为不推荐使用。主要原因如下：

副作用问题：componentWillMount 中进行的 AJAX 操作可能会导致一些副作用，如在组件卸载前请求还未完成导致内存泄漏或出现不一致的状态。因为在此生命周期内发起的请求可能无法被及时取消或清理。
不保证触发：React 16 版本开始，componentWillMount 生命周期可能不会在一些情况下触发，尤其是在服务端渲染时。这会导致不一致的行为，并可能影响组件的可预测性。
推荐的替代方法：React 推荐在 componentDidMount 生命周期中进行 AJAX 请求。在 componentDidMount 中发起请求，确保组件已经被挂载到 DOM 上后再进行数据获取，这样能够避免上述问题。

示例：

class ExampleComponent extends React.Component {
  componentDidMount() {
    // 在 componentDidMount 中发起 AJAX 请求
    fetch('https://api.example.com/data')
      .then(response => response.json())
      .then(data => {
        // 更新组件状态或执行其他操作
        this.setState({ data });
      })
      .catch(error => {
        // 处理错误
      });
  }

  render() {
    // ...
  }
}

因此，为了避免副作用、确保可靠性和一致性，推荐将 AJAX 请求放置在 componentDidMount 生命周期中进行。

如何在React中构建一个弹出的遮罩层

要在 React 中构建一个弹出的遮罩层，你可以使用 React 的状态来控制遮罩层的显示和隐藏，并使用 CSS 样式来定义遮罩层的外观。

以下是一个简单的示例：

import React, { useState } from 'react';
import './Modal.css'; // 引入样式文件

const Modal = () => {
  const [showModal, setShowModal] = useState(false);

  const toggleModal = () => {
    setShowModal(!showModal);
  };

  return (
    <div className="modal-container">
      <button onClick={toggleModal}>打开遮罩层</button>
      {showModal && (
        <div className="modal-overlay">
          <div className="modal-content">
            <h2>这是一个弹出的遮罩层</h2>
            <p>一些内容可以放在这里...</p>
            <button onClick={toggleModal}>关闭</button>
          </div>
        </div>
      )}
    </div>
  );
};

export default Modal;

这只是一个简单的示例，你可以根据需要自定义遮罩层的样式和交互效果。通常，使用 CSS 来定义 .modal-overlay 和 .modal-content 的样式，设置其位置、大小和外观，以及在状态变化时控制其显示和隐藏。

/* Modal.css */

.modal-container {
  text-align: center;
  margin-top: 20px;
}

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
}

/* 隐藏遮罩层 */
.modal-overlay.hidden {
  display: none;
}

以上代码创建了一个简单的弹出遮罩层，点击按钮可以显示或隐藏遮罩层。你可以根据需求扩展其功能和样式。

React-router-dom内部是怎么样实现的，怎么做路由守卫？

React Router 是 React 应用中常用的路由管理库，而 React Router Dom 则是 React Router 的 Web 版本，用于在 Web 应用中进行路由管理。React Router Dom 内部实现了基于 React 组件的路由系统。

React Router Dom 的基本原理：

Route 组件：使用 <Route> 组件来定义路由规则，根据 URL 的路径匹配对应的组件进行渲染。
History API：React Router 使用浏览器的 History API（例如 pushState、replaceState）来监听 URL 的变化，并更新匹配的路由组件。
BrowserRouter 或 HashRouter：React Router 提供了 <BrowserRouter> 和 <HashRouter> 组件作为根容器，用于管理路由。BrowserRouter 使用 HTML5 History API，而 HashRouter 使用 URL 的哈希值来实现。

路由守卫的实现：

在 React Router 中实现路由守卫（导航守卫）通常通过以下几种方式：

通过 Route 组件的 render 方法：

import { Route, Redirect } from 'react-router-dom';

const PrivateRoute = ({ component: Component, ...rest }) => {
  const isAuthenticated = /* 检查用户是否登录 */;
  return (
    <Route
      {...rest}
      render={(props) =>
        isAuthenticated ? (
          <Component {...props} />
        ) : (
          <Redirect to="/login" />
        )
      }
    />
  );
};

// 在路由中使用
<PrivateRoute path="/dashboard" component={Dashboard} />

使用高阶组件（HOC）：创建一个高阶组件来包装需要守卫的组件，进行权限或条件检查，根据条件进行渲染或重定向。
使用钩子函数：React Router 提供了诸如 useHistory、useLocation、useParams 等钩子函数，你可以在组件内部使用这些钩子函数来实现路由守卫。

以上方法可以根据项目需求和个人偏好选择使用，用于在 React 应用中实现路由守卫，控制页面的访问权限或其他导航条件。

文章来源:https://blog.csdn.net/wsq_yyds/article/details/134939878
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！

react面试总结3

React类组件，函数组件，在类组件修改组件对象会使用。

类组件：

函数组件：

类组件怎么做性能优化？函数组件怎么做性能优化？’

类组件的性能优化：

函数组件的性能优化：

共同的性能优化策略：

useEffect 和 useLayoutEffect 的区别

useEffect：

useLayoutEffect：

如何选择：

hooks 的使用有什么注意事项

1. 在函数组件的顶层使用 Hook：

2. 只在 React 函数组件中使用：

3. Hook 的命名规范：

4. 状态的更新不是合并的：

5. 避免在条件语句中使用 Hook：

6. 注意 useEffect 的依赖性：

7. 注意 Hook 执行时机：

8. 懒初始化 Hook：

纯函数有什么特点，副作用函数特点

纯函数的特点：

副作用函数的特点：

React 中 refs 干嘛用的？如何创建 refs？

refs 的主要用途：

创建 refs：

在构造函数调用 super 并将 props 作为参数传入的作用是啥？

如何 React.createElement ？

React.createElement 的语法：

示例：

讲讲什么是 JSX ？

JSX 的特点：

示例：

为什么不直接更新 state 呢？

为什么不直接更新 state：

正确使用 setState 方法：

React 组件生命周期有哪些不同阶段？React 的生命周期方法有哪些？

1. 挂载阶段（Mounting）：

2. 更新阶段（Updating）：

3. 卸载阶段（Unmounting）：

钩子方法（Lifecycle Methods）：

这三个点(…)在 React 干嘛用的？

1. 展开运算符（Spread Operator）：

2. 剩余参数运算符（Rest Parameters）：

React 中的 useState() 是什么？

useState 的基本用法：

useState 的特点：

React 中的StrictMode(严格模式)是什么？

<React.StrictMode> 的作用：

如何使用 <React.StrictMode>：

为什么类方法需要绑定到类实例？

为什么需要绑定：

绑定方法的方式：

什么是 prop drilling，如何避免？

Prop drilling 的问题：

如何避免 Prop drilling：

描述 Flux 与 MVC？

MVC（Model-View-Controller）：

Flux：

什么是 React Context?

React Context 的关键概念：

如何使用 React Context：

什么是 React Fiber?

React Fiber 的特点和目标：

React Fiber 的核心思想：

如何在 React 的 Props 上应用验证？

1. 使用 PropTypes 进行类型检查：

2. 使用 TypeScript 进行静态类型检查：

3. 手动验证：

在 React 中使用构造函数和 getInitialState 有什么区别？

1. 构造函数：

2. getInitialState()：

区别：

如何有条件地向 React 组件添加属性？

使用条件语句：

使用三元表达式：

使用逻辑与运算符（&&）：

Hooks 会取代 render props 和高阶组件吗？

1. render props：

`useEffect`：

`useLayoutEffect`：

在构造函数调用 `super` 并将 `props` 作为参数传入的作用是啥？

`React.createElement` 的语法：

为什么不直接更新 `state` 呢？

为什么不直接更新 `state`：

正确使用 `setState` 方法：

React 中的 `useState()` 是什么？

`useState` 的基本用法：

`useState` 的特点：

`<React.StrictMode>` 的作用：

如何使用 `<React.StrictMode>`：

Hooks 会取代 `render props` 和高阶组件吗？

1. `render props`：

使用 `PureComponent` 或 `React.memo()`：

当调用`setState`时，React `render` 是如何工作的？

JavaScript 原生事件中的 `onclick`：

JSX 中的 `onClick`：

`shouldComponentUpdate()` 的作用：

`key` 的作用：