react 常见坑集合

# useRef

useRef

在事件callbackRef.current中的值为初始值

export default function App() {
  const callbackRef = React.useRef(() => alert('init'))
  const callback = callbackRef.current
  return (
    <button onClick={() => (callbackRef.current = () => alert('call back'))}>setCallback</button>
  	<button onClick={callbackRef.current}>call callback</button>
  )
}

1
2
3
4
5
6
7
8
9

点击set的时候是更新的callback了的但是没有触发页面重新渲染需要强制读取callback内容而不是拿上次的callback

上次更新: 2022/08/14, 18:25:44

← 常见功能实现 ant design pro 学习→