常用 hook

1. useCallback 函数

该方法的返回值是一个函数。

该方法有两个参数，第一个参数是一个函数，第二个参数是记忆的依赖项，只有依赖发生变化之后才会重新缓存。

该方法使用得当确实可以优化性能，使用不当则会降低性能。

  const handleAdd = useCallback(
      () => {
      
  		},
      [依赖项1, 依赖项2, ...]
  )

import React, { useState, useCallback } from "react"

const Pagec = () => {
  const [content, setContent] = useState("")
  const [list, setList] = useState([])
  const [name, setName] = useState("zrs")

  const changeName = () => {
    setName(">>>>>>>>>>>>>>")
    console.log(">>>>>>>>>>>>")
  }

  const handleChange = (e) => {
    setContent(e.target.value)
  }

  // 其实这里降低了性能
  const handleAdd = useCallback(() => {
    setList([...list, content])
    setContent("")
    console.log("handleAdd")
  }, [content, list])

  const handleDel = useCallback(
    (index) => {
      const newList = [...list]
      newList.splice(index, 1)
      setList(newList)
      console.log("handleDel")
    },
    [list]
  )

  return (
    <>
      <div>
        <button onClick={changeName}>changeName</button>
        <div>{name}</div>
      </div>
      <hr />
      <div>
        <input
          value={content}
          type="text"
          onChange={(e) => {
            handleChange(e)
          }}
        />
        <button onClick={handleAdd}>添加</button>
      </div>

      <ul>
        {list.map((item, index) => {
          return (
            <li key={index + item}>
              {item}
              <button
                onClick={() => {
                  handleDel(index)
                }}
              >
                删除
              </button>
            </li>
          )
        })}
      </ul>
    </>
  )
}

export default Pagec

2. useMemo 函数

该方法的返回值是一个数据。类似于vue中的计算属性。

该函数有两个参数，第一个参数是一个函数，第二个参数是依赖数组。

第一个函数的计算返回一个值，给useMemo，然后useMemo返回给newList。

当依赖数组不变化的时候，会一直使用缓存的值。

  const newList = useMemo(
    () =>res
    [依赖项1, 依赖项2, ...]
  )

import React, { useMemo, useEffect, useState, useRef } from "react"

const PageD = () => {
  const [list, setList] = useState([])
  const [content, setContent] = useState("")
  const myRef = useRef()

  useEffect(() => {
    fetch("data.json")
      .then((res) => res.json())
      .then((res) => {
        setList(res)
      })
  }, [])

  const newList = useMemo(
    () =>list.filter(
        (item) => item.name.includes(content) || item.address.includes(content)
      ),
    [list, content]
  )

  return (
    <>
      <div>
        <input ref={myRef} type="text" />
        <button
          onClick={() => {
            setContent(myRef.current.value)
          }}
        >
          确认
        </button>
      </div>
      {newList.map((item) => {
        return (
          <div key={item.cinemaId}>
            <h3>{item.name}</h3>
            {item.address}
          </div>
        )
      })}
    </>
  )
}
export default PageD