javascript - React Hooks 在声明之前从 useState 访问状态

Question

我正在尝试了解 React Hook 如何与我设置的简单例份验证模式一起工作。我有一个处理表单状态的自定义 useForm Hook ，我很好奇我如何在声明 values 之前访问它。

function LoginModal () {
   console.log('outside values', values) // undefined
   const submitForm = async () => {
     console.log('inside values', values) // email, password values exist
     const request = {
        method: 'POST',
        url: '/auth/login',
        data: {
           email: values.email,
           password: values.password
        }
    }
    await axios(request)
  }

  const [values, handleChange, handleSubmit] = useForm(submitForm)

  return <div>some form stuff</div>
}

`useForm.js`

import { useState } from 'react'

const useForm = submitForm => {
  const [state, setState] = useState({})

  const handleChange = event => {
    event.persist()
    setState(state => ({ ...state, [event.target.name]: event.target.value }))
  }

  const handleSubmit = event => {
    event.preventDefault()
    submitForm()
  }

  return [state, handleChange, handleSubmit]
}

export default useForm

谁能给我解释一下为什么 values 只存在于 submitForm 函数中，以及它是如何在 const [values] 声明之前可用的？我相信 const 声明没有被提升。谢谢!

Answer 1

当你声明一个函数时，JS 会将该函数声明保存在内存中，并提供对其各自局部和全局作用域的访问。这就是您的 submitForm 函数所发生的情况。在下面代码片段的示例中，这是 someFunc 函数。

正如您在下面的示例中看到的，如果您在变量values 声明之前执行该函数，您将得到undefined。因为它不在范围内。

但是如果您像现在这样通过点击事件执行函数，在变量 values 被定义后，您的函数将能够“看到”变量，因为它已经在范围内。

注意:您是对的。 const 声明未提升。

function App() {
  
  // WHEN YOU CALL IT THROUGH A CLICK EVENT, THE VARIABLE `values` WILL BE IN SCOPE
  function someFunc() {
    console.log('State from someFunc(): ' + values);
  }
  
  console.log('State from component body BEFORE variable "values" declaration: ' + values);
  
  someFunc(); // WHEN EXECUTED AT THIS POINT. IT HAS NO ACCESS TO 'values' BECAUSE IT'S STILL undefined
  
  const [values,setValues] = React.useState(['a','b','c']);
  
  console.log('State from component body AFTER variable "values" declaration: ' + values);
  
  return(
    <button onClick={someFunc}>Click to run someFunc()</button>
  );
}

ReactDOM.render(<App/>,document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>