面试题：Solid.js JSX事件绑定与性能优化

避免不必要的重新渲染
- 使用 createMemo 包裹事件处理函数：
  - Solid.js 中，createMemo 可以缓存计算结果，只有当依赖发生变化时才会重新计算。对于事件处理函数，如果其依赖没有变化，使用 createMemo 包裹可以避免每次渲染都创建新的函数实例，从而防止不必要的重新渲染。
  - 示例代码：

import { createMemo, createSignal } from'solid-js';

const App = () => {
    const [count, setCount] = createSignal(0);
    const handleClick = createMemo(() => () => {
        setCount(count() + 1);
    });

    return (
        <div>
            <p>Count: {count()}</p>
            <button onClick={handleClick()}>Increment</button>
        </div>
    );
};

export default App;

事件委托：
- 对于具有相同父元素的多个可交互元素，可以使用事件委托。在父元素上绑定一个事件处理器，通过事件对象的 target 属性来判断实际触发事件的元素。这样可以减少事件处理器的数量，从而减少重新渲染的可能性。
- 示例代码：

import { createSignal } from'solid-js';

const App = () => {
    const [message, setMessage] = createSignal('');
    const handleClick = (e) => {
        const target = e.target as HTMLElement;
        if (target.tagName === 'BUTTON') {
            setMessage(`Clicked button: ${target.textContent}`);
        }
    };

    return (
        <div onClick={handleClick}>
            <button>Button 1</button>
            <button>Button 2</button>
            <p>{message()}</p>
        </div>
    );
};

export default App;

高效管理事件处理器
- 防抖（Debounce）与节流（Throttle）：
  - 防抖：对于像输入框的 onChange 事件，用户可能会快速输入多个字符，如果每次输入都触发事件处理函数，可能会导致性能问题。使用防抖可以确保在用户停止输入一段时间后才触发事件处理函数。
  - 示例代码：

import { createSignal } from'solid-js';

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

const App = () => {
    const [inputValue, setInputValue] = createSignal('');
    const handleChange = debounce((value) => {
        console.log('Debounced input:', value);
    }, 300);

    return (
        <div>
            <input
                type="text"
                value={inputValue()}
                onChange={(e) => {
                    setInputValue(e.target.value);
                    handleChange(e.target.value);
                }}
            />
        </div>
    );
};

export default App;

 - **节流**：当某个事件可能会被频繁触发（如窗口滚动事件）时，节流可以限制事件处理函数在一定时间间隔内只触发一次。
 - 示例代码：

import { createSignal } from'solid-js';

const throttle = (func, limit) => {
    let inThrottle;
    return function () {
        const context = this;
        const args = arguments;
        if (!inThrottle) {
            func.apply(context, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
};

const App = () => {
    const [scrollPosition, setScrollPosition] = createSignal(0);
    const handleScroll = throttle(() => {
        setScrollPosition(window.pageYOffset);
    }, 200);

    return (
        <div onScroll={handleScroll}>
            <p>Scroll position: {scrollPosition()}</p>
        </div>
    );
};

export default App;

使用 createEffect 管理副作用：
- 如果事件处理函数有副作用（如网络请求），可以使用 createEffect 来管理。createEffect 会在依赖变化时运行，并且可以在组件卸载时清理副作用。
- 示例代码：

import { createSignal, createEffect } from'solid-js';

const App = () => {
    const [inputValue, setInputValue] = createSignal('');
    const [responseData, setResponseData] = createSignal(null);

    createEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch(`https://example.com/api?query=${inputValue()}`);
                const data = await response.json();
                setResponseData(data);
            } catch (error) {
                console.error('Error fetching data:', error);
            }
        };
        if (inputValue()) {
            fetchData();
        }
    }, [inputValue]);

    return (
        <div>
            <input
                type="text"
                value={inputValue()}
                onChange={(e) => setInputValue(e.target.value)}
            />
            {responseData() && <p>Response data: {JSON.stringify(responseData())}</p>}
        </div>
    );
};

export default App;

星途面试题库

面试题：Solid.js JSX事件绑定与性能优化

知识考点

面试题答案