ahooks处理effect

1. 使用useUpdateEffect

useUpdateEffect用法等同于useEffect，但是会忽略首次执行，只在依赖更新时执行。

import { Button, Row, Col  } from 'antd'
import { useUpdateEffect } from 'ahooks'
import { useEffect, useState } from 'react'

function App() {
  const [count, setCount] = useState(0)
  useUpdateEffect(()=>{
    console.log("useUpdateEffect")
  })
  useEffect(() => {
    console.log("useEffect")
  })
  const handleClick = () =>{
    setCount(count + 1)
  }
  return (
    <>
      <Row>
        <Col span={24}>
          {count}
        </Col>
      </Row>
      <Row>
        <Col span={24}>
          <Button type="primary" onClick={handleClick}>点击</Button>
        </Col>
      </Row>
    </>
  )
}
export default App

运行效果：

3. 使用useLockFn

useLockFn常用来作为防重复提交功能：

import { Button, Row, Col, message } from 'antd'
import { useLockFn } from 'ahooks'
import axios from 'axios'
import { useState } from 'react'

const dataUrl = 'https://api.seniverse.com/v3/location/search.json?key=S9TdqSWVKQAmPmXmB&q=北京'

function App() {
  const [count, setCount] = useState([])
  const mockApiRequest = async () => {
    const data = await axios.get(dataUrl)
    return data.data.results
  }

  const handleClick = useLockFn(async () => {
    message.info('Start to submit')
    const result = await mockApiRequest()
    setCount(result)
    message.success('Submit finished')
  })
  return (
    <>
      <Row>
        <Col span={24}>
          {JSON.stringify(count, null, 2)}
        </Col>
      </Row>
      <Row>
        <Col span={24}>
          <Button type="primary" onClick={handleClick}>点击</Button>
        </Col>
      </Row>
    </>
  )
}

export default App

它不同useEffect，它useLockFn支持直接使用async和await的问题。

4. 使用useUpdate

useUpdate会返回一个函数，调用该函数会强制组件重新渲染。

import { Row, Col, Button } from 'antd'
import { useState } from 'react'
import { useUpdate } from 'ahooks'

function App() {
  const [count, setCount] = useState(1)
  const update = useUpdate();
  
  return (
    <>
      <Row>
        <Col span={24}>
          {count}, {Date.now()}
        </Col>
        <Col span={24}>
          <Button type='primary' onClick={update}>点击</Button>
        </Col>
      </Row>
    </>
  )
}
export default App

运行发现count的值并未发生改变，但是页面被强制渲染了：