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

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

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

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

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

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

示例：

tsx 复制代码

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 (
      <div style={{ color: this.props.color, fontSize: this.props.size }}>
        Hello, World!
      </div>
    );
  }
}

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

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

示例：

tsx 复制代码

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 组件的状态注入过程：

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

tsx 复制代码

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

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

tsx 复制代码

// store.js
import { createStore } from 'redux';
import counterReducer from './reducer';

const store = createStore(counterReducer);

export default store;

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

tsx 复制代码

// CounterComponent.js
import React from 'react';
import { connect } from 'react-redux';

const CounterComponent = ({ counter, increment, decrement }) => (
  <div>
    <p>Counter: {counter}</p>
    <button onClick={increment}>Increment</button>
    <button onClick={decrement}>Decrement</button>
  </div>
);

const mapStateToProps = state => ({
  counter: state.counter
});

const mapDispatchToProps = dispatch => ({
  increment: () => dispatch({ type: 'INCREMENT' }),
  decrement: () => dispatch({ type: 'DECREMENT' })
});

export default connect(mapStateToProps, mapDispatchToProps)(CounterComponent);

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

tsx 复制代码

// App.js
import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import CounterComponent from './CounterComponent';

const App = () => (
  <Provider store={store}>
    <CounterComponent />
  </Provider>
);

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，然后根据需要执行相应的操作。
tsx 复制代码
```
componentDidUpdate(prevProps) {
  if (this.props.someProp !== prevProps.someProp) {
    // 执行相应的操作
  }
}
```
getDerivedStateFromProps： 这是另一个生命周期方法，在组件每次渲染前调用。可以在这个方法中返回一个新的状态对象，该对象将用于更新组件的状态。
tsx 复制代码
```
static getDerivedStateFromProps(nextProps, prevState) {
  if (nextProps.someProp !== prevState.someProp) {
    return { someState: nextProps.someProp };
  }
  return null;
}
```

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

tsx 复制代码

import React, { useEffect } from 'react';

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

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

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

使用示例：

tsx 复制代码

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！

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