前端八股文第七篇

61. React 中有对状态管理做进一步封装吗

在 React 中，除了可以使用原生的状态管理方式（即使用组件的 state 属性）外，还有一些第三方库对状态管理进行了进一步封装，以提供更强大和便捷的状态管理功能。其中最常见的是 Redux 和 MobX。

• Redux：Redux 是一个可预测状态容器，它通过单一的状态树（即 Store）管理整个应用的状态，使得状态的流动变得可预测且易于调试。Redux 的核心思想是将状态的变化封装成一个个纯函数（Reducers），通过派发（Dispatch）动作来触发状态的更新。

• MobX：MobX 是另一个流行的状态管理库，它基于响应式编程的思想，通过观察（Observables）状态的变化来自动更新相关组件。MobX 更加灵活和自由，适合于中小型项目和需要快速开发的场景。

除了 Redux 和 MobX 外，还有一些其他的状态管理库，如 Recoil、Effector 等，它们各有特点，可以根据项目需求选择合适的状态管理方案。

62. React 中在父组件中如何获取子组件的方法

在 React 中，要在父组件中获取子组件的方法，通常有以下几种方式：

1. 通过 props 传递函数：父组件可以通过 props 将一个函数传递给子组件，在子组件中调用该函数，并将需要传递的数据作为参数传递给函数。这样父组件就可以在函数中获取子组件的数据。

2. 使用 React ref：通过在父组件中创建 ref，并将 ref 传递给子组件，然后在父组件中通过 ref.current 获取子组件的引用，从而访问子组件的方法或属性。

// 父组件
class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }

  handleClick = () => {
    // 调用子组件的方法
    this.childRef.current.methodInChildComponent();
  }

  render() {
    return (
      <div>
        <ChildComponent ref={this.childRef} />
        <button onClick={this.handleClick}>调用子组件方法</button>
      </div>
    );
  }
}

// 子组件
class ChildComponent extends React.Component {
  methodInChildComponent() {
    // 子组件的方法
    console.log('子组件方法被调用了');
  }

  render() {
    return <div>子组件</div>;
  }
}

3. 使用 Context API：可以通过 Context API 在父组件中创建一个上下文，然后在子组件中访问该上下文，从而实现父组件与子组件之间的通信。

4. 使用 Redux 或其他状态管理库：使用 Redux 或其他状态管理库来管理应用的状态，父组件可以从状态中获取子组件的数据。

根据具体的场景和需求，选择合适的方式来获取子组件的数据。

63. 低代码和微前端有了解吗?

• 低代码（Low-Code）：低代码是一种软件开发方法，旨在通过图形化的用户界面和可视化的操作来快速构建应用程序。低代码平台提供了大量的预定义组件和模板，开发人员可以直接拖拽、配置这些组件，而不需要手动编写大量的代码，从而加速应用程序的开发和部署过程。

• 微前端（Micro Frontends）：微前端是一种架构风格，旨在将前端应用程序拆分为更小、更独立的部分，每个部分可以由不同的团队开发、测试和部署。微前端的目标是提高团队的独立性和灵活性，同时降低代码库的复杂度和维护成本。微前端通常使用技术栈无关的框架或者组件来实现，例如 Web Components、IFrames、服务端包含（SSI）等。

低代码和微前端都是为了提高开发效率和应用程序的灵活性而提出的解决方案。低代码主要针对的是应用程序的开发过程，通过简化开发流程来加快应用的开发速度；而微前端主要针对的是应用程序的架构设计，通过拆分应用程序为更小的、独立的部分来提高应用程序的可维护性和可扩展性。

64. useCallback 使用过没?

useCallback 是 React 提供的一个 Hook，用于优化函数组件的性能。当函数组件中存在依赖于 props 的回调函数时，使用 useCallback 可以确保回调函数的引用在依赖未发生变化时保持稳定，从而避免不必要的重新创建和渲染。

例如，假设有一个父组件传递一个回调函数给子组件，如果不使用 useCallback，每次父组件重新渲染时，传递给子组件的回调函数都会重新创建，即使函数体内容没有发生变化。这可能会导致子组件的不必要重新渲染，从而影响性能。

// 父组件
const ParentComponent = () => {
  const handleClick = () => {
    console.log('按钮被点击');
  };

  return <ChildComponent onClick={handleClick} />;
};

// 子组件
const ChildComponent = ({ onClick }) => {
  return <button onClick={onClick}>点击按钮</button>;
};

通过 useCallback 可以优化这种情况：

// 父组件
const ParentComponent = () => {
  const handleClick = useCallback(() => {
    console.log('按钮被点击');
  }, []);

  return <ChildComponent onClick={handleClick} />;
};

65. 函数组件和类组件处理重复渲染有什么区别?

在 React 中，函数组件和类组件处理重复渲染的方式有一些区别：

• 函数组件：函数组件是无状态的，它们只是接收输入并渲染 UI 的函数。函数组件在每次重新渲染时都会重新执行函数体，从而重新生成 UI。如果组件的状态或 props 发生变化，函数组件将会被重新执行，并重新渲染 UI。

• 类组件：类组件可以包含自己的状态（state）和生命周期方法，可以通过 shouldComponentUpdate 生命周期方法来控制是否进行重新渲染。在类组件中，如果 shouldComponentUpdate 返回 false，组件将不会重新渲染，这样可以避免不必要的渲染和性能损耗。

总体来说，函数组件通常比类组件更简洁，但在处理复杂的渲染逻辑和性能优化时，类组件具有更多的灵活性和控制能力。

66. 封装的按钮权限组件怎么实现的?

封装的按钮权限组件通常用于控制用户是否有权限操作某个按钮或执行某个动作。实现的基本思路是根据用户的权限信息动态显示或隐藏按钮。

一个简单的实现方式是，在按钮组件中根据用户的权限信息（通常是从后端获取），动态判断是否显示按钮。例如：

const AuthButton = ({ onClick, disabled }) => {
  const hasPermission = checkUserPermission(); // 检查用户权限

  return hasPermission ? <button onClick={onClick} disabled={disabled}>按钮</button> : null;
};

这样，在使用该按钮组件时，只需要传入相应的点击事件和权限信息即可。如果用户有权限，则按钮会显示并可点击，否则按钮将不会显示在界面上。

67. 数据什么时候定义在组件里面，什么时候定义在状态管理里面?

在 React 开发中，通常根据数据的作用域、共享性和复杂性来决定将数据定义在组件内部还是状态管理中：

• 定义在组件内部：如果数据仅在当前组件中使用，并且不需要与其他组件共享，可以将数据定义在组件内部。这种情况下，数据通常作为组件的局部状态（使用 useState 或类组件的 state 属性）管理。

• 定义在状态管理中：如果数据需要在多个组件之间共享，或者数据具有全局性质，可以将数据定义在状态管理中（如 Redux、MobX 等）。这样可以确保数据的一致性，并且使得不同组件之间能够共享和同步数据。

一般来说，对于大型应用或需要跨组件共享数据的情况，使用状态管理更为合适。而对于较小规模的应用或局部数据的情况，将数据定义在组件内部更为简单和直接。

68. 方法什么时候写在父组件中，什么时候写在子组件中?

在 React 中，将方法写在父组件还是子组件中取决于方法的功能和是否需要在多个组件之间共享。

• 写在父组件中：

  • 如果一个方法需要在多个子组件中共享或作为子组件之间的通信桥梁，可以将方法写在父组件中，并通过 props 将方法传递给子组件。
  • 如果一个方法需要操作多个子组件的状态或 props，或者需要处理父子组件之间的数据传递，通常也会将方法写在父组件中。

• 写在子组件中：

  • 如果一个方法仅在当前子组件中使用，并且不需要与其他组件共享，可以将方法写在子组件内部，作为子组件的局部方法。
  • 如果一个方法与子组件的 UI 渲染逻辑紧密相关，且不需要在其他组件中复用，通常也会将方法写在子组件中。

总的来说，需要根据具体情况和项目需求来决定将方法写在父组件还是子组件中。如果一个方法在多个组件之间共享或需要处理跨组件的逻辑，通常将其写在父组件中；如果一个方法仅在当前组件内部使用，并且与子组件的 UI 相关，通常将其写在子组件中。

69. React 用过哪些 Hooks?

React Hooks 是 React 16.8 版本引入的新特性，它可以让函数组件拥有类组件的状态管理和生命周期等能力。常用的 React Hooks 包括：

• useState：用于在函数组件中添加状态管理能力。
• useEffect：用于在函数组件中执行副作用操作，类似于类组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount。
• useContext：用于在函数组件中访问 React 上下文。
• useReducer：类似于 Redux 中的 reducer，用于管理复杂的状态逻辑。
• useRef：用于在函数组件中创建可变的 ref 对象。
• useCallback：用于在函数组件中缓存函数引用，以避免不必要的重新创建。
• useMemo：用于在函数组件中缓存计算结果，以提高性能。

除了以上常用的 Hooks 外，还有一些其他的 Hooks，如 useLayoutEffect、useImperativeHandle、useDebugValue 等，它们可以满足不同场景下的需求。

70. 数组合并有哪些方法

在 JavaScript 中，可以使用多种方式来合并数组，常见的方法包括：

1. concat 方法：使用数组的 concat 方法可以将多个数组合并成一个新数组，而不修改原始数组。

   const array1 = [1, 2, 3];
   const array2 = [4, 5, 6];
   const newArray = array1.concat(array2); // [1, 2, 3, 4, 5, 6]
   

2. 扩展运算符（Spread Operator）：使用扩展运算符可以将一个数组的所有元素解开，并插入到另一个数组中。

   const array1 = [1, 2, 3];
   const array2 = [4, 5, 6];
   const newArray = [...array1, ...array2]; // [1, 2, 3, 4, 5, 6]
   

3. push 方法：使用数组的 push 方法可以将一个数组的所有元素添加到另一个数组的末尾，但会修改原始数组。

   const array1 = [1, 2, 3];
   const array2 = [4, 5, 6];
   array1.push(...array2);
   

4. concat 和 apply 方法：使用 concat 方法结合 apply 方法，可以合并多个数组。

   const array1 = [1, 2, 3];
   const array2 = [4, 5, 6];
   const newArray = Array.prototype.concat.apply(array1, array2); // [1, 2, 3, 4, 5, 6]
   

5. 使用 reduce 方法：使用 reduce 方法可以将多个数组逐个合并到一个新数组中。

   const arrays = [[1, 2], [3, 4], [5, 6]];
   const newArray = arrays.reduce((acc, curr) => acc.concat(curr), []); // [1, 2, 3, 4, 5, 6]
   

以上是几种常见的数组合并方法，具体选择哪种方法取决于项目需求和个人偏好。