关于React.useCallback传递参数的问题

Question

看到一段代码，有些不理解，candy参数是怎么传到dispense函数里面的?

import React from "react";

export default function App() {
  const initialCandies = ['snickers', 'skittles', 'twix', 'milky way']
  const [candies, setCandies] = React.useState(initialCandies)
  const dispense = candy => {
    setCandies(allCandies => allCandies.filter(c => c !== candy))
  }

  const dispenseCallback = React.useCallback(dispense, []);

  return (
    <div>
      <h1>Candy Dispenser</h1>
      <div>
        <div>Available Candy</div>
        {candies.length === 0 ? (
          <button onClick={() => setCandies(initialCandies)}>refill</button>
        ) : (
          <ul>
            {candies.map(candy => (
              <li key={candy}>
                <button onClick={() => dispenseCallback(candy)}>grab</button> {candy}
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  )
}

Answer 1

useCallback本身就返回传入的函数，根据第二个参数进行变更
usecallback官方文档
但你这边这样写意义不大。。。因为你最后传入button的是一个匿名函数，每一次渲染都会新创建这样一个函数。引用的地址永远在变化。所以useCallback没有起到什么作用。