面试题：React 动态事件绑定与解绑在复杂组件结构中的应用

组件结构设计思路

父组件：作为状态和事件管理的核心，持有需要共享的状态，并向下传递状态和事件处理函数。
子组件：接收父组件传递的状态和事件处理函数，根据状态决定是否绑定和解绑事件。

事件处理逻辑思路

事件绑定：在子组件的 componentDidMount 生命周期方法中，根据父组件传递的状态决定是否绑定事件。如果需要绑定，使用 addEventListener 并传入合适的事件处理函数。
事件解绑：在子组件的 componentWillUnmount 生命周期方法中，使用 removeEventListener 解绑之前绑定的事件。
处理依赖关系：可以使用状态管理库（如 Redux）来管理状态和依赖关系。通过在 Redux 的 reducer 中定义状态变化的逻辑，确保事件之间的依赖关系能够正确处理。

管理状态和依赖关系思路

状态管理：使用 React 的 useState 或 useReducer 钩子来管理局部状态。对于复杂的状态管理，引入 Redux 或 MobX 等状态管理库。
依赖关系管理：在 Redux 中，通过 actions 和 reducers 来定义状态变化的逻辑，确保事件之间的依赖关系能够正确处理。例如，如果事件 A 触发后需要改变状态，从而影响事件 B 的绑定，那么在 reducer 中可以定义相应的逻辑。

核心代码示例

使用 React hooks 和 Redux 的示例
- 安装依赖：

npm install react-redux redux

- **创建 Redux store**：

import { createStore } from'redux';

// 定义 reducer
const initialState = {
  shouldBindEvent: false
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'SET_SHOULD_BIND_EVENT':
      return {
      ...state,
        shouldBindEvent: action.payload
      };
    default:
      return state;
  }
};

// 创建 store
const store = createStore(reducer);
export default store;

- **父组件**：

import React from'react';
import { Provider } from'react-redux';
import store from './store';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  return (
    <Provider store = {store}>
      <ChildComponent />
    </Provider>
  );
};

export default ParentComponent;

- **子组件**：

import React, { useEffect } from'react';
import { useSelector, useDispatch } from'react-redux';

const ChildComponent = () => {
  const shouldBindEvent = useSelector(state => state.shouldBindEvent);
  const dispatch = useDispatch();

  const handleEvent = (e) => {
    console.log('Event captured:', e);
  };

  useEffect(() => {
    if (shouldBindEvent) {
      document.addEventListener('click', handleEvent, true); // 捕获阶段
      return () => {
        document.removeEventListener('click', handleEvent, true);
      };
    }
  }, [shouldBindEvent]);

  return (
    <div>
      <button onClick={() => dispatch({ type: 'SET_SHOULD_BIND_EVENT', payload: true })}>
        绑定事件
      </button>
      <button onClick={() => dispatch({ type: 'SET_SHOULD_BIND_EVENT', payload: false })}>
        解绑事件
      </button>
    </div>
  );
};

export default ChildComponent;

仅使用 React hooks 的示例
- 父组件：

import React, { useState } from'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  const [shouldBindEvent, setShouldBindEvent] = useState(false);

  return (
    <div>
      <ChildComponent shouldBindEvent = {shouldBindEvent} />
      <button onClick={() => setShouldBindEvent(true)}>
        绑定事件
      </button>
      <button onClick={() => setShouldBindEvent(false)}>
        解绑事件
      </button>
    </div>
  );
};

export default ParentComponent;

- **子组件**：

import React, { useEffect } from'react';

const ChildComponent = ({ shouldBindEvent }) => {
  const handleEvent = (e) => {
    console.log('Event captured:', e);
  };

  useEffect(() => {
    if (shouldBindEvent) {
      document.addEventListener('click', handleEvent, true); // 捕获阶段
      return () => {
        document.removeEventListener('click', handleEvent, true);
      };
    }
  }, [shouldBindEvent]);

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

export default ChildComponent;

星途面试题库

面试题：React 动态事件绑定与解绑在复杂组件结构中的应用

知识考点

面试题答案

组件结构设计思路

事件处理逻辑思路

管理状态和依赖关系思路

核心代码示例