面试题：React 阻止事件默认行为在复杂应用场景中的优化

整体思路

事件处理逻辑设计：
- 使用React的合成事件系统，它提供了跨浏览器兼容性并在事件处理上进行了优化。
- 对于多层嵌套组件的事件处理，可以利用事件委托机制。在父组件上统一监听事件，根据事件.target判断具体触发事件的子组件，然后根据特定条件决定是否阻止默认行为。这样可以减少事件处理器的数量，提升性能。
状态管理：
- 对于控制是否阻止事件默认行为的特定条件，可以将相关状态提升到合适的父组件中进行管理。这样可以通过props将状态传递给子组件，使得子组件能够根据该状态决定如何处理事件。
- 如果应用较为复杂，可以考虑使用状态管理库如Redux或Mobx来统一管理状态，确保状态的一致性和可维护性。
优化技巧：
- 防抖（Debounce）和节流（Throttle）：对于频繁触发的事件（如scroll、resize等），使用防抖或节流技术。防抖可以确保在一定时间内事件多次触发时，只执行一次实际处理函数；节流则是在一定时间间隔内，无论事件触发多少次，只执行一次处理函数。
- shouldComponentUpdate或React.memo：对于子组件，使用shouldComponentUpdate（类组件）或React.memo（函数组件）来避免不必要的重新渲染，尤其是在状态变化时，只有相关状态影响到组件渲染时才进行更新。

关键代码片段

事件委托示例（函数组件）：

import React, { useState } from'react';

const ParentComponent = () => {
    const [shouldPreventDefault, setShouldPreventDefault] = useState(false);

    const handleClick = (e) => {
        if (shouldPreventDefault) {
            e.preventDefault();
        }
        // 其他处理逻辑
    };

    return (
        <div onClick={handleClick}>
            <ChildComponent shouldPreventDefault={shouldPreventDefault} />
        </div>
    );
};

const ChildComponent = ({ shouldPreventDefault }) => {
    return (
        <a href="#">点击我</a>
    );
};

export default ParentComponent;

防抖示例：

import React, { useState } from'react';

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

const DebounceComponent = () => {
    const [inputValue, setInputValue] = useState('');
    const handleInputChange = debounce((e) => {
        setInputValue(e.target.value);
        // 其他处理逻辑
    }, 300);

    return (
        <input type="text" onChange={handleInputChange} value={inputValue} />
    );
};

export default DebounceComponent;

使用React.memo优化子组件：

import React from'react';

const MemoizedChild = React.memo(({ data }) => {
    return (
        <div>{data}</div>
    );
});

export default MemoizedChild;

星途面试题库

面试题：React 阻止事件默认行为在复杂应用场景中的优化

知识考点

面试题答案

整体思路

关键代码片段