【React】开始学习React Hooks（上半部分）【适合初学者】

2 年 ago

宇, 华

3 minutes

React Hooks是什么？

React Hooks的hook是指从2019年2月发布的React 16.8开始新增的一种功能，可以在不编写类的情况下使用React的功能，例如state等。

作为优势，函数组件可以拥有状态并根据生命周期适时实现处理。这样一来，代码更简洁，也能降低React的学习成本。?

让我们试着使用React Hooks。

环境构建

这次为了节省时间，我们将使用一个名为Vite的构建工具。
Vite是由Vue.js的开发者Evan You主导开发的前端构建工具。
如果您想了解更多详情，请参阅下方内容。

$ npx create vite@latest
? Project name:react-hooks-introduction
? Select a freamwork:react
? Select a variand:javascript

您可以使用此来创建框架。
之后，请创建框架并将其移动到目录中进行设置和启动服务器。
以下是命令列表。

$ cd react-hooks-introduction 
$ npm i
$ npm run dev #viteの場合はstartではなくdevなので注意

请打开 src/App.jsc 文件。
当使用构建工具启动时，会导入 useState，但请删除它们并将其修改为以下状态。


import './App.css'

function App() {
  return <div className='App'></div>
}

export default App

现在我们按顺序来学习吧！

使用状态

useState是一个用于保存和更新函数组件状态的钩子。

import { useState } from 'react'
import './App.css'

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

  const handleClick = () => {
    setCount(prev => prev + 1)
  }

  return (
  <>
    <h1>useState</h1>
    <button onClick={handleClick}>count is {count}</button>
  </>
  )
}

export default App

我稍微解释一下代码。

 const [count,setCount] = useState(0)

这里的第一个参数是当前值，第二个参数是返回更新函数的函数。
count将以useState的参数作为初始值储存。

此外，如果您对所谓的分割赋值一词不熟悉，可以参考以下内容，因为我们使用了分割赋值。

  const handleClick = () => {
    setCount(prev => prev + 1)
  }

当点击按钮时，上述的更新函数将被执行并更新数值。

另外，这个时候

    <button onClick={handleClick}>count is {count}</button>

不是

    <button onClick={handleClick()}>count is {count}</button>

如果您写成这样，当渲染时会触发handleClick，所以请注意！

使用useEffect

useEffect是一个可以在函数组件中控制副作用的钩子。

import { useEffect, useState } from 'react'
import './App.css'

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

  const handleClick = () => {
    setCount(prev => prev + 1)
  }

  useEffect(() => {
    console.log('Hello useEffect')
  },[count])

  return (
  <>
    <h1>useState,UseEffect</h1>
    <button onClick={handleClick}>count is {count}</button>
  </>
  )
}
export default App

我会做必要的补充。

  useEffect(() => {
    console.log('Hello useEffect')
  },[count])

请在第1个参数中写下要执行的副作用函数，并在第2个参数中写下控制副作用函数执行时机的依赖数据。

根据这次来说，由于`count`是第二个参数，所以每次点击按钮时，会在控制台打印`Hello useEffect`。

使用上下文

useContext是一个能够管理多个组件之间共享数据的钩子。通过使用它，我们不再需要通过props的方式进行数据传递，而可以在全局范围内进行管理，使数据的管理变得更加清晰易懂。

数据管理的文件可以在App.jsx中实现，但这次我们将存储在main.jsx中。

import React, { createContext } from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

const comicInfo = {
  title: '呪術廻戦',
  author: '芥見下々',
}

// グローバルに管理したいcontextを生成する
const ComicContext = createContext(comicInfo)

ReactDOM.createRoot(document.getElementById('root')).render(
  // valueに共有したいデータも定義する必要があるので注意
  <ComicContext.Provider value={comicInfo}>
    <React.StrictMode>
      <App />
    </React.StrictMode>,
  </ComicContext.Provider>
)

export default ComicContext

那么，让我们实际动手使用它吧！

import { useContext, useEffect, useState } from 'react'
import './App.css'
import ComicContext from './main'

function App() {
  const [count,setCount] = useState(0)
  const comicInfo = useContext(ComicContext)

  const handleClick = () => {
    setCount(prev => prev + 1)
  }

  useEffect(() => {
    console.log('Hello useEffect')
  },[count])

  return (
  <>
    <h1>useState,UseEffect</h1>
    <button onClick={handleClick}>count is {count}</button>
    <hr/>
    <h1>useContext</h1>
    <p>{comicInfo.title}</p>
    <p>{comicInfo.author}</p>
  </>
  )
}

export default App

 const comicInfo = useContext(ComicContext)

在这种情况下，只有main.jsx和App.jsx，因此很难感受到太多好处，用props传递会更快，但当组件结构变得更复杂时，可能会变得混乱，那时才能感受到好处。

在哪些场景下会使用呢，比如在电子商务网站和社交媒体等中，由于认证信息如登录信息等在任何组件中都会被使用，所以会使用useContext或Redux。

仅供参考：在Qiita公司内部，useContext被广泛使用！

最后

这次介绍的是Hooks功能，它是基本且常用的功能。下一次，我打算介绍还未提及的功能，包括useReducer、useCallback、useMemo和useRef。

如果这篇文章能对您有所帮助，我会感到非常幸运。

请参考这篇文章。

フック API 参考文献
快速理解钩子功能 (React 官方)
5分钟了解 React Hooks
【初学者指南】React Hooks 是什么？