面试题：React事件处理专家难度：复杂交互场景下的事件性能调优

1. 事件绑定方式

尽量使用箭头函数进行事件绑定：在React组件中，传统的函数绑定方式可能会导致每次渲染时都创建新的函数实例，这会增加内存开销。而箭头函数不会创建自己的 this，它会继承外层作用域的 this，避免了不必要的函数实例创建。
示例：

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  // 传统方式
  // handleClick() {
  //   this.setState((prevState) => ({ count: prevState.count + 1 }));
  // }

  // 箭头函数方式
  handleClick = () => {
    this.setState((prevState) => ({ count: prevState.count + 1 }));
  };

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me, count: {this.state.count}
      </button>
    );
  }
}

2. 事件委托的应用

原理：事件委托利用事件冒泡机制，将多个子元素的事件委托给共同的父元素来处理。这样可以减少事件处理程序的数量，提高性能。在Dashboard场景中，例如大量可交互图表的点击事件，可以委托给图表容器。
示例：

import React, { Component } from 'react';

class ChartContainer extends Component {
  constructor(props) {
    super(props);
    this.state = { clickedChart: null };
  }

  handleChartClick = (event) => {
    const chartId = event.target.dataset.chartId;
    this.setState({ clickedChart: chartId });
  };

  render() {
    const charts = [1, 2, 3].map((id) => (
      <div
        key={id}
        data-chart-id={id}
        onClick={this.handleChartClick}
        style={{ border: '1px solid black', padding: '10px', margin: '5px' }}
      >
        Chart {id}
      </div>
    ));

    return (
      <div>{charts}</div>
    );
  }
}

3. 处理事件之间的依赖关系

使用队列机制：当事件之间存在依赖关系时，可以使用队列来管理事件处理顺序。例如，在实时数据更新和动态组件加载的场景中，确保数据更新完成后再进行组件加载。
示例：

import React, { Component } from 'react';

class Dashboard extends Component {
  constructor(props) {
    super(props);
    this.state = { data: null, componentLoaded: false };
    this.eventQueue = [];
  }

  fetchData = () => {
    // 模拟异步数据获取
    setTimeout(() => {
      this.setState({ data: 'new data' });
      this.processQueue();
    }, 1000);
  };

  loadComponent = () => {
    if (this.state.data) {
      this.setState({ componentLoaded: true });
    } else {
      this.eventQueue.push(this.loadComponent);
    }
  };

  processQueue = () => {
    while (this.eventQueue.length > 0) {
      const event = this.eventQueue.shift();
      event();
    }
  };

  componentDidMount() {
    this.fetchData();
    this.loadComponent();
  }

  render() {
    return (
      <div>
        {this.state.componentLoaded && <div>{this.state.data}</div>}
      </div>
    );
  }
}

4. 防抖与节流

防抖：在一些频繁触发的事件（如窗口resize、输入框输入等）中，防抖可以确保事件处理函数在一定时间间隔内只执行一次。例如，在Dashboard中，当用户调整窗口大小时，可能会触发图表重新渲染，使用防抖可以避免不必要的频繁渲染。
示例：

import React, { Component } from 'react';

function debounce(func, delay) {
  let timer;
  return function() {
    const context = this;
    const args = arguments;
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(context, args);
    }, delay);
  };
}

class Dashboard extends Component {
  constructor(props) {
    super(props);
    this.state = { windowSize: { width: window.innerWidth, height: window.innerHeight } };
    this.handleResize = debounce(this.handleResize, 300);
  }

  handleResize = () => {
    this.setState({
      windowSize: { width: window.innerWidth, height: window.innerHeight }
    });
  };

  componentDidMount() {
    window.addEventListener('resize', this.handleResize);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.handleResize);
  }

  render() {
    return (
      <div>
        Window size: {this.state.windowSize.width} x {this.state.windowSize.height}
      </div>
    );
  }
}

节流：节流保证事件处理函数在一定时间间隔内最多执行一次，即使事件被频繁触发。比如在Dashboard中，实时数据更新可能每秒触发多次，但我们可能只需要每5秒更新一次图表。
示例：

import React, { Component } from 'react';

function throttle(func, delay) {
  let lastCall = 0;
  return function() {
    const now = new Date().getTime();
    const context = this;
    const args = arguments;
    if (now - lastCall >= delay) {
      func.apply(context, args);
      lastCall = now;
    }
  };
}

class Dashboard extends Component {
  constructor(props) {
    super(props);
    this.state = { data: [] };
    this.fetchData = throttle(this.fetchData, 5000);
  }

  fetchData = () => {
    // 模拟数据获取
    this.setState({ data: [...this.state.data, new Date().getTime()] });
  };

  componentDidMount() {
    setInterval(this.fetchData, 1000);
  }

  render() {
    return (
      <div>
        {this.state.data.map((value, index) => (
          <div key={index}>{value}</div>
        ))}
      </div>
    );
  }
}

星途面试题库

面试题：React事件处理专家难度：复杂交互场景下的事件性能调优

知识考点

面试题答案

1. 事件绑定方式

2. 事件委托的应用

3. 处理事件之间的依赖关系

4. 防抖与节流