在 react hooks 中用 const 声明的变量，useEffect 传入的函数在前面可以使用后面的变量声明

Question

问题描述

handleResize 是在后面用 const 声明的变量，useEffect在前面却可以使用，太诡异了，超出了我的理解

相关代码

  const [count, setCount] = useState(0)

  useEffect(() => {
    handleResize()
  }, [ ])

  const handleResize = () => {
    console.log(`count is ${count}`)
  }

补充：用函数试了下也不会报错，说明和 React 没关系

function test () {
    handleResize()
  }

  test() // 会报错

  const handleResize = () => {
    console.log(`count is 1`)
  }

  test() // 能正常工作

你期待的结果是什么？

报错

Answer 1

基于词法作用域, useEffect 的函数会在它的作用域查找, handleResize 是在 它的上一层作用域, 是可以的

Answer 2

useEffect执行前并没有使用handleResize吧

Answer 3

你看看是不是编译到 es5 了。

啊，包了一层函数是在下级的作用域了。调用的时候往上找所以不冲突。而 useEffect 是异步的，所以调用的时候上层作用域里 handleResize 已经初始化。