React常見面試題詳解

一、React 生命周期

1、生命周期簡介

React 生命周期是指 React 組件從實例創建到銷毀的整個過程。其中包含掛載、更新和卸載三個階段。

2、生命周期分類

React 生命周期可以分為三類：Mounting, Updating, Unmounting。其中 Mounting 指組件載入到 DOM 上，Update 指組件數據改變引起的重新渲染，Unmounting 指組件卸載銷毀時。

3、常用生命周期

componentDidMount()：組件掛載時調用，可以進行 AJAX 請求和 DOM 操作等。

componentDidUpdate()：組件更新時調用，可以進行更新操作。

componentWillUnmount()：組件卸載時調用，可以進行一些清理操作。

二、React 的虛擬 DOM

1、什麼是虛擬 DOM

虛擬 DOM 是簡化版的 DOM，是 React 中組件狀態改變後重新渲染組件的關鍵技術。虛擬 DOM 通過一系列的比較和更新操作，儘可能地減少與真實 DOM 的交互，從而提高頁面渲染效率。

2、虛擬 DOM 的優點

（1）提高頁面渲染效率，避免了每次修改都涉及到真實 DOM 的操作；

（2）簡化了操作，提升了開發效率；

（3）實現了 diff 演算法，可以最小化更新 DOM，從而提高了頁面性能。

三、React 組件間通信

1、組件間通信方式

（1）props 靜態方式：通過 props 把數據從父組件傳遞到子組件。

（2）context 跨級方式：通過 context 屬性可以在組件樹中直接傳遞數據，跨級傳遞更加便捷。

（3）自定義事件方式：通過自定義事件向祖先或子孫組件傳遞信息。

2、props 與 state 的區別

（1）props 是父組件向子組件傳遞的數據；state 是組件自己的狀態數據。

（2）props 是只讀的，不允許子組件修改；state 可以由組件自己修改，但需要通過 setState() 方法改變。

四、React 高階組件（HOC）

1、高階組件簡介

高階組件是指將一個組件作為參數，並返回一個新組件的函數。

2、高階組件的作用

（1）代碼復用：將多個組件公用的邏輯抽取成一個高階組件，避免代碼冗餘；

（2）擴展組件功能：將某個組件需要的功能通過高階組件注入的方式進行擴展；

（3）渲染劫持：在不修改組件本身的前提下對組件進行渲染控制。

3、高階組件示例代碼：

  // HOC
  const withLoginStatus = (WrappedComponent) => {
    return class extends React.Component {
      constructor(props) {
        super(props);
        this.state = { isLoggedIn: false };
      }
      componentDidMount() {
        this.setState({ isLoggedIn: true });
      }
      render() {
        const { isLoggedIn } = this.state;
        return ;
      }
    }
  }
  // 組件
  const MyComponent = ({ isLoggedIn }) => (
    
{isLoggedIn ? '您已登錄' : '請登錄'}
  );
  // 使用
  const WrappedComponent = withLoginStatus(MyComponent);
  ReactDOM.render(, document.getElementById('app'));

五、React 的性能優化

1、虛擬 DOM 優化

（1）減少不必要的渲染：通過 shouldComponentUpdate() 方法來控制是否需要重新渲染組件。

（2）合理使用 React.Fragment：減少多餘的 DOM 包裹標籤。

（3）使用 key 屬性：相同的 key 值可以減少虛擬 DOM 比對時的計算量。

2、其他性能優化

（1）使用 React 生產環境構建：生產環境構建時可以去除開發環境下的調試代碼和警告信息。

（2）避免過量渲染：儘可能減少 DOM 操作次數。

（3）優化 JavaScript 代碼：避免使用循環嵌套等性能開銷大的操作。

代碼示例：

  class MyComponent extends React.Component {
    shouldComponentUpdate(nextProps, nextState) {
      if (this.props.text === nextProps.text && this.state.count === nextState.count) {
        return false;
      }
      return true;
    }
    render() {
      return (
        <React.Fragment>
          <span key="text">{this.props.text}</span>
          <button key="btn">{this.state.count}</button>
        </React.Fragment>
      );
    }
  }

六、Redux 與 React 結合

1、Redux 基本用法

（1）Action：定義數據操作的類型。

（2）Reducer：定義數據操作，並返回操作後的新數據。

（3）Store：用於管理應用的 State。

2、Redux 與 React 結合示例代碼：

  // Action
  const ADD_TODO = 'ADD_TODO';
  const REMOVE_TODO = 'REMOVE_TODO';

  // Action Creator
  const addTodo = (text) => ({
    type: ADD_TODO,
    payload: {
      text,
    },
  });

  const removeTodo = (id) => ({
    type: REMOVE_TODO,
    payload: {
      id,
    },
  });

  // Reducer
  const todos = (state = [], action) => {
    switch (action.type) {
      case ADD_TODO:
        return [...state, action.payload.text];
      case REMOVE_TODO:
        return state.filter((item, index) => index !== action.payload.id);
      default:
        return state;
    }
  };

  // Store
  const store = createStore(todos);

  // React 組件
  const TodoList = ({ todos }) => (
    <ul>
      {todos.map((item, index) => (
        <li key={index}>{item}</li>
      ))}
    </ul>
  );

  class TodoApp extends React.Component {
    constructor(props) {
      super(props);
      this.state = { todos: store.getState() };
      this.handleAdd = this.handleAdd.bind(this);
      this.handleRemove = this.handleRemove.bind(this);
    }
    componentDidMount() {
      this.unsubscribe = store.subscribe(() => {
        this.setState({ todos: store.getState() });
      });
    }
    componentWillUnmount() {
      this.unsubscribe();
    }
    handleAdd() {
      const text = prompt('請輸入待辦事項');
      if (text) {
        store.dispatch(addTodo(text));
      }
    }
    handleRemove(index) {
      store.dispatch(removeTodo(index));
    }
    render() {
      const { todos } = this.state;
      return (
        <React.Fragment>
          <TodoList todos={todos} />
          <button onClick={this.handleAdd}>新增</button>
        </React.Fragment>
      );
    }
  }

  ReactDOM.render(<TodoApp />, document.getElementById('app'));