时间戳

首页 > 解决方案 > react js中带参数调用回调的最佳实践

javascript - react js中带参数调用回调的最佳实践

问题描述

我有一个带有 react js 的简单项目。在我的项目中，我有一个带 id 的跨度。当 onMouseEnter 事件发生在 span 的 span id 上时显示。当 onMouseLeave 事件发生时，id 被删除。我有两个函数（showId 和 removeId）。它们是 onMouseEnter 和 onMouseLeave 事件的回调。showId 接受一个参数。我在 onMouseEnter 事件中调用这个函数如下 onMouseEnter(()=>showId(id)) 但我认为这是不是最佳方式。这样做是否更好，因为每次 onMouseEnter 事件发生时都会创建一个新函数。

这是我的 app.js

import './App.css';
import React, {useState} from "react";

function App() {

    const spanId = '1';

    const [id, setId] = useState(null);
    const showId = (id) => {
        setId(id);
    }
    const removeId = () => {
        setId(null);
    }

    return (
        <div>
            <span id={spanId} onMouseEnter={() => {
                showId(spanId)
            }} onMouseLeave={removeId}>Hover me</span>

            {id ? <div>{id}</div> : null}
        </div>
    );
}

export default App;

标签： javascriptreactjscallback

解决方案

用于记忆带有参数React.useCallback的回调。id

const showId = useCallback(()=>{
  setId(spanId)
}, [setId, spanId]);

这个回调现在被记忆并且不接受参数，并且只有在引用setId或spanId更改时才会重新定义。

像这样使用它：

<span id={spanId} onMouseEnter={showId} />

也就是说，这是一个如此简单的函数，最好在每次渲染时简单地重新定义它，因为useCallback它可能比重新定义回调更重 CPU 周期。

推荐阅读