useRef, useMomo

useMemo 相当于 vue2 中的computed，依赖项不变，结果不会重新计算。

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

function SearchUserList() {
    console.log(111);
    const [users, setUsers] = useState(null)
    const [searchKey, setSearchKey] = useState('')
    useEffect(() => {
        const doFetch = async ()=> {
            const res = await fetch('https://reqres.in/api/users')
            setUsers(await res.json())
        }
        doFetch()
    }, [])

    // let usersToShow = null
    // if(users) {
    //     usersToShow =users.data.filter(user => {
    //         return user.first_name.includes(searchKey)
    //     })
    // }

  // useMemo 就是 vue2 中的 computed
    const usersToShow = useMemo(() => {
    console.log(111);
        if(!users) return null
        return users.data.filter(user => user.first_name.includes(searchKey))
    }, [users, searchKey])

    return (
        <div>
            <input type="text"
                value={searchKey}
                onChange={(evt) => setSearchKey(evt.target.value)} />
            <ul>
                {usersToShow &&
                    usersToShow.length > 0 &&
                        usersToShow.map(user => {
                            return <li key={user.id}>{user.first_name}</li>
                        })}
            </ul>
        </div>
    )
}

export default SearchUserList

useRef相当于函数组件中的属性，相当于类中的成员变量。

useRef 还可以用来获取组件中的dom

useRef可以在函数内定义有记忆能力的变量，普通函数内的变量在函数执行后会销毁，无法记忆之前的值。

import { useCallback, useRef, useState } from "react";

export default function Timer() {
    const [time, setTime] = useState(0)
  // 
    const timer = useRef(null)

    const handleStart = useCallback(() => {
        timer.current = window.setInterval(() => {
            setTime(prevTime => prevTime + 1)
        }, 100)
    }, [])

    const handlePause = useCallback(() => {
        window.clearInterval(timer.current)
        timer.current = null
    }, [])

    return (
        <div>
            {time/10} seconds.
            <br />
            <button onClick={handleStart}>start</button>
            <button onClick={handlePause}>end</button>
        </div>
    )
}

import { useRef } from "react";

export default function FocusedInput() {
    const input = useRef(null)

    return (
        <div>
            <input type="text" ref={input}/>
            <button onClick={() => input.current.focus()}>focus</button>
        </div>
    );
}

useContext 让react有定义全局响应式数据的能力。全局数据A变了，使用这个数据A的所有组件都会更新。