React Hooks学习

useState

案例 让页面动起来

import React, { useState } from 'react'

const List1 = () => {
  const [count, setCount] = useState(0) // 可以触发组件的更新

  function add() {
    setCount(count + 1) // 这个count+1的操作是异步的
    console.log('current count', count) // 打印的count是之前的count
  }

  return (
    <>
      <div>hello world</div>
      <button onClick={add}> add {count}</button>
    </>
  )
}

export default List1

state 组件内部的状态信息

• state变化，触发组件更新，重新渲染rerender页面
• 异步更新，还可能有合并更新的问题（使用传入函数更新）
• 如果说一个变量不用于jsx中显示，那就不要用useState管理，用useRef
• 不可变数据，不去修改state的值，而是传入一个新的值

immer

Immer是一个JavaScript库，它可以帮助你更容易地编写可变的JavaScript代码。它通过提供一组API，使得可以在不直接修改原始对象的情况下，创建或更新一个对象的副本。这样做的好处是，能够更好地管理状态，避免副作用和意外的变化，并且更容易实现时间旅行等高级功能。在React中使用Immer可以让你更轻松地处理组件的状态管理。

import React, { useState } from 'react'
import { produce } from 'immer'

const List1 = () => {
  const [userInfo, setUserInfo] = useState({ name: 'menqi', age: 21 })
  function ChangeAge() {
    setUserInfo(
      // 通过immer可以更方便修改数据
      produce(draft => {
        draft.age = 30
      })
    )
  }

  return (
    <>
      <h2> immer </h2>
      <div>{JSON.stringify(userInfo)}</div>
      <button onClick={ChangeAge}> change age</button>
    </>
  )
}

export default List1

useEffect

• 当组件渲染完成时，加载一个Ajax网络请求
• 当某个state更新时，加载一个Ajax网络请求

seEffect​ 是 React 中的一个 Hook，它允许你在组件渲染后执行一些副作用操作（例如：数据获取、修改 DOM 等）。
​​useEffect​ 接收两个参数：第一个参数是一个函数，这个函数会在组件挂载后和每次更新后都会被执行。第二个参数是一个数组，它包含了需要监控变化的依赖项。当依赖项发生变化时，​useEffect​ 就会重新执行。

import React, { useEffect } from 'react'

const List1 = () => {
  useEffect(() => {
    console.log('加载网络请求')
    return () => {
      console.log('组件被销毁') // 组件被销毁时调用
    }
  }, [])

  return <></>
}

export default List1

useRef

使用 useRef 可以在函数组件中获取组件或 DOM 元素的引用，并且不会触发组件重新渲染。它返回一个对象，对象中包含了一个名为 current 的属性，这个属性可以存储任何值。

以下是一个使用 useRef 获取 DOM 元素的示例：

import { useRef } from 'react';

function MyComponent() {
  const myRef = useRef(null);

  function handleClick() {
    // 使用 current 属性获取 DOM 元素
    myRef.current.style.color = 'red';
  }

  return (
    <div ref={myRef} onClick={handleClick}>
      Click me!
    </div>
  );
}

在上面的例子中，我们使用 useRef 创建了一个名为 myRef 的引用，然后将其传递给了 <div> 元素的 ref 属性中。当用户点击 <div> 元素时，我们可以通过 myRef.current 获取到这个元素的 DOM 对象，并修改其样式。

除了获取 DOM 元素的引用，useRef 还可以用来存储任何需要在组件生命周期中保持不变的数据，类似于类组件中的实例变量。

自定义Hook

抽离公共部分，复用代码

案例 获取鼠标位置

import { useState, useEffect } from 'react'

function useMouse() {
  const [position, setPosition] = useState({ x: 0, y: 0 })

  useEffect(() => {
    function handleMouseMove(event: MouseEvent) {
      setPosition({ x: event.clientX, y: event.clientY })
    }

    window.addEventListener('mousemove', handleMouseMove)

    return () => {
      window.removeEventListener('mousemove', handleMouseMove)
    }
  }, [])

  return position
}

export default useMouse

在上面的例子中，我们首先使用 ​useState​ 创建了一个名为 ​position​ 的状态变量，用于保存鼠标的位置。然后，我们使用 ​useEffect​ 监听 ​mousemove​ 事件，并将鼠标的坐标更新到 ​position​ 变量中。

最后，我们通过返回 ​position​ 变量，使得该 Hook 可以在组件中被使用。例如：

import React from 'react'
import useMouse from './hooks/useMouse'
const List1 = () => {
  const { x, y } = useMouse()

  return (
    <div>
      The mouse position is ({x}, {y})
    </div>
  )
}

export default List1

第三方Hooks

• ahooks
• react-use