面試 React 框架八股文十問十答第六期

作者：程序員小白條，個人博客

相信看了本文后，對你的面試是有一定幫助的！關(guān)注專欄后就能收到持續(xù)更新！

?點贊?收藏?不迷路！?文章來源地址http://www.zghlxwxcb.cn/news/detail-795002.html

1） React中有使用過getDefaultProps嗎？它有什么作用？

getDefaultProps 是 React 類組件中的一個生命周期方法。它用于定義組件的默認屬性值。在組件實例化之前，React 會調(diào)用 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 (
      <div style={{ color: this.props.color, fontSize: this.props.size }}>
        Hello, World!
      </div>
    );
  }
}

2）React中setState的第二個參數(shù)作用是什么？

setState 的第二個參數(shù)是一個回調(diào)函數(shù)，它會在 setState 完成且組件重新渲染后被調(diào)用。這個回調(diào)函數(shù)是可選的，通常用于執(zhí)行與 setState 操作相關(guān)的代碼，或者在狀態(tài)更新完成后執(zhí)行其他邏輯。

示例：

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

3）React中的setState和replaceState的區(qū)別是什么？

在最新版本的 React 中，replaceState 已經(jīng)被廢棄，不再推薦使用。原先的 replaceState 用于完全替換組件的狀態(tài)，而 setState 用于部分更新狀態(tài)。使用 setState 更靈活，因為它可以接受一個回調(diào)函數(shù)，而 replaceState 則沒有這個特性。

4）在React中組件的this.state和setState有什么區(qū)別？

• this.state 是組件的當(dāng)前狀態(tài)，可以直接訪問。但直接修改 this.state 是不推薦的，應(yīng)該使用 setState 方法來更新狀態(tài)，以確保 React 可以正確地處理狀態(tài)變更并觸發(fā)組件的重新渲染。
• setState 是用于更新組件狀態(tài)的方法。它接收一個對象或函數(shù)作為參數(shù)，用于指定新的狀態(tài)值。React 會將新狀態(tài)與當(dāng)前狀態(tài)合并，然后重新渲染組件。使用函數(shù)形式的 setState 可以確保基于當(dāng)前狀態(tài)計算新狀態(tài)，避免由于異步更新導(dǎo)致的問題。

5）state 是怎么注入到組件的，從 reducer 到組件經(jīng)歷了什么樣的過程

在 React 中，狀態(tài)通常被管理在組件的 state 中，而 Redux 是一種常用的狀態(tài)管理庫，用于全局狀態(tài)的管理。以下是從 Redux 的 reducer 到 React 組件的狀態(tài)注入過程：

1. 定義 Reducer： Reducer 是一個純函數(shù)，接收當(dāng)前狀態(tài)和動作，返回新的狀態(tài)。它定義了應(yīng)用中的狀態(tài)變化規(guī)則。

   // 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. 創(chuàng)建 Store： 使用 Redux 的 createStore 函數(shù)創(chuàng)建一個存儲應(yīng)用狀態(tài)的 Store。

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

3. 連接 React 組件： 使用 react-redux 庫中的 connect 函數(shù)將 React 組件連接到 Redux 的 Store。這樣，組件就可以訪問 Store 中的狀態(tài)和派發(fā)動作。

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

4. Provider 包裹根組件： 使用 react-redux 中的 Provider 組件將整個 React 應(yīng)用包裹，使其能夠訪問 Redux 的 Store。

   // 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 將狀態(tài)注入到 React 組件中，而 connect 函數(shù)幫助組件訂閱 Store 中的狀態(tài)，并在狀態(tài)發(fā)生變化時重新渲染。mapStateToProps 和 mapDispatchToProps 函數(shù)則定義了如何映射狀態(tài)和動作到組件的屬性中。

6）React組件的state和props有什么區(qū)別？

• State：
  • state 是組件內(nèi)部管理的狀態(tài)，用于描述組件自身的狀態(tài)數(shù)據(jù)。
  • state 是可變的，可以通過 this.setState() 方法進行更新。
  • 可以在組件內(nèi)部初始化并在組件的生命周期中進行更新。
  • 可以通過 this.state 訪問。
• Props：
  • props 是從父組件傳遞給子組件的數(shù)據(jù)，用于組件之間的通信。
  • props 是不可變的（只讀的），子組件不能直接修改父組件傳遞的 props。
  • 數(shù)據(jù)流是單向的，即從父組件傳遞給子組件。
  • 可以通過 this.props 訪問。

7）React中的props為什么是只讀的？

React中的 props 是只讀的，這是為了維護數(shù)據(jù)流的單向性和提高組件的可維護性。如果子組件能夠直接修改父組件傳遞的 props，那么組件之間的數(shù)據(jù)流將變得不可控，難以追蹤數(shù)據(jù)的變化來源，容易引發(fā)錯誤。

通過將 props 設(shè)定為只讀，React 確保了以下好處：

• 數(shù)據(jù)流的單向性： 數(shù)據(jù)從父組件流向子組件，子組件無法直接修改傳遞給它的數(shù)據(jù)，保持了清晰的數(shù)據(jù)流方向。
• 組件的可預(yù)測性： 通過限制 props 的修改，可以更容易預(yù)測組件的行為。如果組件的渲染結(jié)果僅依賴于傳遞的 props，那么它的行為更容易理解和測試。
• 維護性： 只讀的 props 降低了組件之間的耦合性，使得組件更容易維護和重用。當(dāng)一個組件只關(guān)心自己的 props，它就更容易成為一個獨立、可復(fù)用的單元。

8）在React中組件的props改變時更新組件的有哪些方法？

在 React 中，當(dāng)組件的 props 改變時，組件可以通過以下方法進行更新：

• componentDidUpdate： 這是一個生命周期方法，當(dāng)組件完成更新后調(diào)用。可以在這個方法中比較前后的 props，然后根據(jù)需要執(zhí)行相應(yīng)的操作。

  componentDidUpdate(prevProps) {
    if (this.props.someProp !== prevProps.someProp) {
      // 執(zhí)行相應(yīng)的操作
    }
  }
  

• getDerivedStateFromProps： 這是另一個生命周期方法，在組件每次渲染前調(diào)用?？梢栽谶@個方法中返回一個新的狀態(tài)對象，該對象將用于更新組件的狀態(tài)。

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

• 使用 useEffect 鉤子： 使用 useEffect 鉤子監(jiān)測 props 的變化，并在變化時執(zhí)行相應(yīng)的操作。

  import React, { useEffect } from 'react';
  
  function MyComponent(props) {
    useEffect(() => {
      // 執(zhí)行相應(yīng)的操作
    }, [props.someProp]);
  }
  

9）React中怎么檢驗props？驗證props的目的是什么？

在 React 中，可以使用 prop-types 庫對組件的 props 進行類型檢查。這有助于捕獲潛在的bug，提高代碼的可維護性和可靠性。prop-types 提供了一系列的類型檢查器，可以用于確保傳遞給組件的 props 符合預(yù)期的類型。

使用示例：

import PropTypes from 'prop-types';

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

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

目的：

• 類型驗證： 確保傳遞給組件的 props 具有正確的類型，避免由于類型錯誤而引起的運行時錯誤。
• 可讀性和文檔： 在組件的 propTypes 中定義了期望的 props 類型后，不僅提供了代碼的自文檔化，也可以作為組件的文檔。其他開發(fā)者可以清晰地看到組件期望接收的 props 類型。
• 預(yù)防性編程： 通過檢驗 props，可以在組件接收到不正確的數(shù)據(jù)類型時提前發(fā)現(xiàn)問題，有助于進行預(yù)防性編程，降低 bug 出現(xiàn)的可能性。

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

在 React 16.3 之前，React 的生命周期包括三個階段：Mounting（掛載）、Updating（更新）、Unmounting（卸載）。但自 React 16.3 版本開始，推薦使用新的生命周期方法，具體生命周期如下：

• 掛載階段（Mounting）：
  1. constructor： 初始化組件的狀態(tài)和綁定事件處理函數(shù)。
  2. static getDerivedStateFromProps： 在組件每次渲染前調(diào)用，用于根據(jù) props 更新 state。
  3. render： 渲染組件的 UI。
  4. componentDidMount： 組件掛載后調(diào)用，通常用于執(zhí)行一次性的操作，如數(shù)據(jù)獲取。
• 更新階段（Updating）：
  1. static getDerivedStateFromProps： 同掛載階段，但在每次更新前都會調(diào)用。
  2. shouldComponentUpdate： 控制組件是否需要重新渲染，優(yōu)化性能。
  3. render： 重新

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

已 300 + Star！

?點贊?收藏?不迷路！?

到了這里，關(guān)于面試 React 框架八股文十問十答第六期的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！