面试 React 框架八股文十问十答第六期

面试 React 框架八股文十问十答第六期

作者：程序员小白条，个人博客

相信看了本文后，对你的面试是有一定帮助的！关注专栏后就能收到持续更新！

⭐点赞⭐收藏⭐不迷路！⭐

1） React中有使用过getDefaultProps吗？它有什么作用？

getDefaultProps 是 React 类组件中的一个生命周期方法。它用于定义组件的默认属性值。在组件实例化之前，React 会调用 getDefaultProps 来获取组件的默认属性对象，然后将其用于初始化组件的属性。这个方法对于确保组件始终有合适的属性值是很有用的，尤其是在没有给定属性的情况下。

示例：

class MyComponent extends React.Component {
  static defaultProps = {
    color: 'blue',
    size: 'medium'
  };

  // 或者使用 getDefaultProps 方法
  static getDefaultProps() {
    return {
      color: 'blue',
      size: 'medium'
    };
  }

  render() {
    // 在这里可以使用 this.props.color 和 this.props.size
    return (
      

        Hello, World!
      
    );
  }
}

2）React中setState的第二个参数作用是什么？

setState 的第二个参数是一个回调函数，它会在 setState 完成且组件重新渲染后被调用。这个回调函数是可选的，通常用于执行与 setState 操作相关的代码，或者在状态更新完成后执行其他逻辑。

示例：

this.setState({ count: this.state.count + 1 }, () => {
  console.log('State updated and component re-rendered.');
});

3）React中的setState和replaceState的区别是什么？

在最新版本的 React 中，replaceState 已经被废弃，不再推荐使用。原先的 replaceState 用于完全替换组件的状态，而 setState 用于部分更新状态。使用 setState 更灵活，因为它可以接受一个回调函数，而 replaceState 则没有这个特性。

4）在React中组件的this.state和setState有什么区别？

• this.state 是组件的当前状态，可以直接访问。但直接修改 this.state 是不推荐的，应该使用 setState 方法来更新状态，以确保 React 可以正确地处理状态变更并触发组件的重新渲染。
• setState 是用于更新组件状态的方法。它接收一个对象或函数作为参数，用于指定新的状态值。React 会将新状态与当前状态合并，然后重新渲染组件。使用函数形式的 setState 可以确保基于当前状态计算新状态，避免由于异步更新导致的问题。

5）state 是怎么注入到组件的，从 reducer 到组件经历了什么样的过程

在 React 中，状态通常被管理在组件的 state 中，而 Redux 是一种常用的状态管理库，用于全局状态的管理。以下是从 Redux 的 reducer 到 React 组件的状态注入过程：

1. 定义 Reducer： Reducer 是一个纯函数，接收当前状态和动作，返回新的状态。它定义了应用中的状态变化规则。

   // reducer.js
   const initialState = {
     counter: 0
   };
   
   const counterReducer = (state = initialState, action) => {
     switch (action.type) {
       case 'INCREMENT':
         return { ...state, counter: state.counter + 1 };
       case 'DECREMENT':
         return { ...state, counter: state.counter - 1 };
       default:
         return state;
     }
   };
   
   export default counterReducer;
   

2. 创建 Store： 使用 Redux 的 createStore 函数创建一个存储应用状态的 Store。

   // store.js
   import { createStore } from 'redux';
   import counterReducer from './reducer';
   
   const store = createStore(counterReducer);
   
   export default store;
   

3. 连接 React 组件： 使用 react-redux 库中的 connect 函数将 React 组件连接到 Redux 的 Store。这样，组件就可以访问 Store 中的状态和派发动作。

   // CounterComponent.js
   import React from 'react';
   import { connect } from 'react-redux';
   
   const CounterComponent = ({ counter, increment, decrement }) => (
     
   
       
   Counter: {counter}
       Increment
       Decrement
     
   );
   
   const mapStateToProps = state => ({
     counter: state.counter
   });
   
   const mapDispatchToProps = dispatch => ({
     increment: () => dispatch({ type: 'INCREMENT' }),
     decrement: () => dispatch({ type: 'DECREMENT' })
   });
   
   export default connect(mapStateToProps, mapDispatchToProps)(CounterComponent);
   

4. Provider 包裹根组件： 使用 react-redux 中的 Provider 组件将整个 React 应用包裹，使其能够访问 Redux 的 Store。

   // App.js
   import React from 'react';
   import { Provider } from 'react-redux';
   import store from './store';
   import CounterComponent from './CounterComponent';
   
   const App = () => (
     
       
     
   );
   
   export default App;
   

在这个过程中，Redux 的 Store 将状态注入到 React 组件中，而 connect 函数帮助组件订阅 Store 中的状态，并在状态发生变化时重新渲染。mapStateToProps 和 mapDispatchToProps 函数则定义了如何映射状态和动作到组件的属性中。

6）React组件的state和props有什么区别？

• State：
  • state 是组件内部管理的状态，用于描述组件自身的状态数据。
  • state 是可变的，可以通过 this.setState() 方法进行更新。
  • 可以在组件内部初始化并在组件的生命周期中进行更新。
  • 可以通过 this.state 访问。
• Props：
  • props 是从父组件传递给子组件的数据，用于组件之间的通信。
  • props 是不可变的（只读的），子组件不能直接修改父组件传递的 props。
  • 数据流是单向的，即从父组件传递给子组件。
  • 可以通过 this.props 访问。

7）React中的props为什么是只读的？

React中的 props 是只读的，这是为了维护数据流的单向性和提高组件的可维护性。如果子组件能够直接修改父组件传递的 props，那么组件之间的数据流将变得不可控，难以追踪数据的变化来源，容易引发错误。

通过将 props 设定为只读，React 确保了以下好处：

• 数据流的单向性： 数据从父组件流向子组件，子组件无法直接修改传递给它的数据，保持了清晰的数据流方向。
• 组件的可预测性： 通过限制 props 的修改，可以更容易预测组件的行为。如果组件的渲染结果仅依赖于传递的 props，那么它的行为更容易理解和测试。
• 维护性： 只读的 props 降低了组件之间的耦合性，使得组件更容易维护和重用。当一个组件只关心自己的 props，它就更容易成为一个独立、可复用的单元。

8）在React中组件的props改变时更新组件的有哪些方法？

在 React 中，当组件的 props 改变时，组件可以通过以下方法进行更新：

• componentDidUpdate： 这是一个生命周期方法，当组件完成更新后调用。可以在这个方法中比较前后的 props，然后根据需要执行相应的操作。

  componentDidUpdate(prevProps) {
    if (this.props.someProp !== prevProps.someProp) {
      // 执行相应的操作
    }
  }
  

• getDerivedStateFromProps： 这是另一个生命周期方法，在组件每次渲染前调用。可以在这个方法中返回一个新的状态对象，该对象将用于更新组件的状态。

  static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.someProp !== prevState.someProp) {
      return { someState: nextProps.someProp };
    }
    return null;
  }
  

• 使用 useEffect 钩子： 使用 useEffect 钩子监测 props 的变化，并在变化时执行相应的操作。

  import React, { useEffect } from 'react';
  
  function MyComponent(props) {
    useEffect(() => {
      // 执行相应的操作
    }, [props.someProp]);
  }
  

9）React中怎么检验props？验证props的目的是什么？

在 React 中，可以使用 prop-types 库对组件的 props 进行类型检查。这有助于捕获潜在的bug，提高代码的可维护性和可靠性。prop-types 提供了一系列的类型检查器，可以用于确保传递给组件的 props 符合预期的类型。

使用示例：

import PropTypes from 'prop-types';

function MyComponent(props) {
  // ...
}

MyComponent.propTypes = {
  someProp: PropTypes.string.isRequired,
  anotherProp: PropTypes.number
};

目的：

• 类型验证： 确保传递给组件的 props 具有正确的类型，避免由于类型错误而引起的运行时错误。
• 可读性和文档： 在组件的 propTypes 中定义了期望的 props 类型后，不仅提供了代码的自文档化，也可以作为组件的文档。其他开发者可以清晰地看到组件期望接收的 props 类型。
• 预防性编程： 通过检验 props，可以在组件接收到不正确的数据类型时提前发现问题，有助于进行预防性编程，降低 bug 出现的可能性。

10）React的生命周期有哪些？

在 React 16.3 之前，React 的生命周期包括三个阶段：Mounting（挂载）、Updating（更新）、Unmounting（卸载）。但自 React 16.3 版本开始，推荐使用新的生命周期方法，具体生命周期如下：

• 挂载阶段（Mounting）：
  1. constructor： 初始化组件的状态和绑定事件处理函数。
  2. static getDerivedStateFromProps： 在组件每次渲染前调用，用于根据 props 更新 state。
  3. render： 渲染组件的 UI。
  4. componentDidMount： 组件挂载后调用，通常用于执行一次性的操作，如数据获取。
• 更新阶段（Updating）：
  1. static getDerivedStateFromProps： 同挂载阶段，但在每次更新前都会调用。
  2. shouldComponentUpdate： 控制组件是否需要重新渲染，优化性能。
  3. render： 重新

开源项目地址：https://gitee.com/falle22222n-leaves/vue_-book-manage-system

已 300 + Star！

⭐点赞⭐收藏⭐不迷路！⭐