React Hook概述

Nian糕

修改于 2024-03-19 20:13:01

9340

修改于 2024-03-19 20:13:01

文章被收录于专栏：JavaScript高阶应用JavaScript高阶应用

Hook 是什么？Hook 是 React 16.8 的新增特性，它可以让你在不编写 class 的情况下“钩入” React 的特性，例如，useState 是允许你在 React 函数组件中添加 state 的 Hook

State Hook

useState 是一种新方法，它与 class 里面的 this.state 提供的功能完全相同。一般来说，在函数退出后变量就会“消失”，而 state 中的变量会被 React 保留，useState() 方法里面唯一的参数就是初始 state，我们可以使用 number 或 string 对其进行赋值，其返回值为当前的 state 以及更新 state 的函数

// src/comments/LikeButton.js
import React, { useState } from 'react'

// 函数型组件
const LikeButton = () => {
  const [ like, setLike ] = useState(0)
  console.log(useState(0))
  return (
  <button onClick={() => {setLike(like + 1)}}>
    喜欢数 {like}
  </button>
  )
}

export default LikeButton

随后在 App.js 中引入该组件，效果如下图所示

上面的 Hook 代码通过 class 组件进行编写，如下所示

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      like: 0
    };
  }

  render() {
    return (
      <button onClick={() => this.setState({ like: this.state.like + 1 })}>
        喜欢数 {this.state.like}
      </button>
    );
  }
}

Effect Hook

在 React 更新 DOM 之后我们如果想要运行一些额外的代码，比如发送网络请求，手动变更 DOM，记录日志，订阅外部数据源等等，我们就会使用到 Effect Hook，类似于 Vue 中的 nextTick 方法

而在 React 的 class 组件中，我们会把同样的操作放到 componentDidMount 和 componentDidUpdate 函数中，需要在两个生命周期函数中编写重复的代码

componentDidMount() {
  document.title = `You clicked ${this.state.like} times`;
}
componentDidUpdate() {
  document.title = `You clicked ${this.state.like} times`;
}

使用 useEffect 执行相同的操作，代码如下所示

const LikeButton = () => {
  const [ like, setLike ] = useState(0)
  
  useEffect(() => {
    document.title = `You clicked ${like} times`;
  })
  
  return (
  <button onClick={() => {setLike(like + 1)}}>
    喜欢数 {like}
  </button>
  )
}

useEffect 在默认情况下，在第一次渲染之后以及每次更新之后都会执行，只需要知道 effect 发生在渲染之后，而不用再去考虑是挂载还是更新状态，Effect 组件在需要清除的时候，可以通过返回一个函数进行清除，React 将会在执行清除操作时调用它

// comments/MouseTracker.js
import React, { useState, useEffect } from 'react'

function MouseTracker() {
  const [ positions, setPositions ] = useState({x: 0, y: 0})
  useEffect(() => {
    const updateMouse = e => {
      setPositions({x: e.clientX, y: e.clientY})
    }
    document.addEventListener('click', updateMouse)
    return () => {
      document.removeEventListener('click', updateMouse)
    }
  })
  return (
    <p>X: {positions.x}, Y: {positions.y}</p>
  )
}

export default MouseTracker

如果某些特定值在两次重渲染之间没有发生变化，可以传递数组作为 useEffect 的第二个可选参数，就能够通知 React 跳过对 effect 的调用

useEffect(() => {
  document.title = `You clicked ${like} times`;
}, [count]); // 仅在 like 更改时更新

关于 Hook 的更多使用方法，可在 useHooks 中查看相关例子

自定义 Hook

自定义 Hook，就是将组件逻辑提取到可重用的函数中

// hooks/useURLLoader.js
import { useState, useEffect } from 'react'
import axios from 'axios'

const useURLLoader = (url) => {
  const [data, setData] = useState(null)
  const [loading, setLoading] = useState(false)
  useEffect(() => {
    setLoading(true)
    axios.get(url).then(result => {
      setData(result.data)
      setLoading(false)
    })
  }, [url])
  return [data, loading]
}

export default useURLLoader

// App.js
const CatShowWithHook = () => {
  const [ category, setCategory ] = useState('1')
  const [ data, loading ] = useURLLoader(`https://api.thecatapi.com/v1/images/search?limit=1&category_ids=${category}`)
  return (
    <>
      <button onClick={() => { setCategory('1') }}>帽子猫</button>
      <button onClick={() => { setCategory('5') }}>盒子猫</button>
      {loading ? <p>新猫咪读取中</p>
       : <img src={data && data[0].url} alt="cat" style={{width: 300}} />
      }
    </>
  )
}