从功能组件中的闭包函数访问道具

Question

我有一个使用 create-react-app 创建的非常简单的 React App。该应用程序显示一个传入 value 和 onClick 回调的组件，并在触发回调时递增值。

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

const App = () => {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
      <Block
        value={count}
        onClick={ () => setCount(count + 1) }
      />
    </div>
  );
}

export default App;

Block 组件采用value 和onClick 函数，并在中心显示一个带有值的正方形，并在单击该正方形时调用onClick。

const Block = ({ value, onClick }) => {
    return (
        <div
            onClick={onClick}
            style={{
                width: 200,
                height: 200,
                margin: 50,
                background: 'yellow',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                fontSize: 36,
            }}
        >
            {value}
        </div>
    );
}

export default Block;

正如描述的那样，这非常有效。

然后我扩展了这个组件以记录mouseenter 和mouseleave 事件的值，方法是在组件挂载时调用的useEffect 挂钩中添加相关事件处理程序。

import React, { useEffect, useRef } from 'react';


const Block = ({ value, onClick }) => {
    const divRef = useRef();

    const mouseEnter = () => {
        console.log('mouse enter', value);
    }

    const mouseLeave = () => {
        console.log('mouse leave', value);
    }

    useEffect(() => {
        console.log('addEventListeners');
        divRef.current.addEventListener('mouseenter', mouseEnter);
        divRef.current.addEventListener('mouseleave', mouseLeave);
    }, [])

    return (
        <div
            ref={divRef}
            onClick={onClick}
            style={{
                width: 200,
                height: 200,
                margin: 50,
                background: 'yellow',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                fontSize: 36,
            }}
        >
            {value}
        </div>
    );
}

export default Block;

我遇到的问题是这两个事件处理程序是闭包，所以总是打印组件安装时的值。我可以将组件重写为类组件并通过 this 访问道具，但项目中没有其他任何东西使用类组件。我可以将该值复制到一个全局变量中，但这会将我限制在一个实例中。

在闭包中访问一个或多个道具的推荐方法是什么？

我应该补充一点，这是为了演示问题而编写的。在我的应用程序中，值是传入的一个大对象，而 div 是一个画布，上面绘制了数据。

Answer 1

最简单的解决方案是使用 React 合成事件并删除 useEffect:

  return <div onMouseEnter={mouseEnter} onMouseLeave={mouseLeave} ... />

Answer 2

我将创建由useCallback 钩子创建的mouseEnter 和mouseLeave 函数，将value 作为依赖项。然后useEffect 也会将这两个函数作为依赖项。

然后，您可以使用 useEffect 的返回函数在更改依赖项时执行这一事实，就在调用新的useEffect 之前。现在在返回的函数中只需删除监听器，这样总是只有两个监听器。

看起来像这样：

   const mouseEnter = useCallback(() => {
        console.log('mouse enter', value);
    }, [value]);

    const mouseLeave = useCallback(() => {
        console.log('mouse leave', value);
    }, [value]);

    useEffect(() => {
        console.log('addEventListeners');
        divRef.current.addEventListener('mouseenter', mouseEnter);
        divRef.current.addEventListener('mouseleave', mouseLeave);
        return () => {
            divRef.current.removeEventListener('mouseenter', mouseEnter);
            divRef.current.removeEventListener('mouseenter', mouseEnter);
        };
    }, [mouseEnter, mouseLeave])

Answer 3

你需要使用useRef

const countRef = React.useRef(count);

将setCount 替换为

setCountRef = (value) => {
    countRef.current = value;
    setCount(value);
}

然后

const mouseLeave = () => {
    console.log('mouse leave', countRef.current);
}

Answer 4

如果你想将 MouseEnetr 和 MouseLeave 事件添加到 div 元素，你可以很好地实现，如下所示。不需要任何参考。

  return (
      <div
         onClick={() => setValue(value + 1)}
         onMouseEnter={() => mouseEnter(value)}
         onMouseLeave={() => mouseLeave(value)}
          style={{
              width: 200,
              height: 200,
              margin: 50,
              background: 'yellow',
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              fontSize: 36,
          }}
      >
         {value} 
      </div>

如果您正在使用 ref 进行相同的探索，那么据我所知，这可以实现如下所示。

  useEffect(() => {
      console.log('addEventListeners');
      // Remove listeners
      divRef.current.removeEventListener('mouseenter', mouseEnter);
      divRef.current.removeEventListener('mouseleave', mouseLeave);

      // Add listeners
      divRef.current.addEventListener('mouseenter', mouseEnter);
      divRef.current.addEventListener('mouseleave', mouseLeave);
  }, [value]) // Pass value as argument, then it behaves as componentDidUpdate