阅读 76

react hooks

  • useState
import { useState } from 'react'
function Child () {
    const [count, setCount] = useState(0)
    const changeCount => {
        setCount(count+1)
    }
    return (<button onClick={changeCount}></button>)
}
复制代码

useState方法的第一个参数是count变量的初始值,setCount方法入参直接修改count的值,count值修改会引起页面组件重新渲染

  • useEffect
import { useEffect, useState } from 'react'
function Child () {
    const [count, setCount] = useState(0)
    // 第二个参数不传
    useEffect(()=>{
    })

    const [name, setName] = useState('鲨鱼')
    // 第二个参数为空数组
    useEffect(()=>{
    }, [])

    const [age, setAge] = useState(18)
    // 第二个数组有值
    useEffect(()=>{
    }, [age])
}
复制代码
  1. 第二个参数不传,监听所有useState定义的变量
  2. 第二个参数为空数组,只在组件构建时执行一次
  3. 第二个数组有值,初始化和数组对应的变量更新的时候都会执行
  • useMemo

用法和useEffect一样,不可以在useMemo修改useState的值会导致死循环

import { useMemo, useEffect, useState } from 'react'
function Child () {
    const [count, setCount] = useState(0)
    // useMemo在组件渲染时执行第一次,useEffect在组件挂载后执行第一次
    useEffect(()=>{
        console.log('useEffect')
    }, [])
    useMemo(()=>{
        console.log('useMemo')
    }, []
    return <div>useMemo比useEffect先打印</div>
}
复制代码
  • useRef
// useRef返会的是对象current属性为初始化传入的参数
// 对象在组件的整个生命周期内保持不变
function TestUseRef() {
    const [count, setCount] = useState(0)
    const refTest = useRef(8)
    // refTest.current 8
    const refCount = useRef()
    // refCount.current undefined
    if (!refCount.current) {
        refCount.current = count;
    }
    return <button onClick={() => setCount(count+1)}>add</button>
}
复制代码
// 操控ReactDOM动作
function TestUseRef() {
    const inputRef = useRef()
    input = inputRef
    function getFocus() {
        inputRef.current.focus()
    }
    return (
        <>
            <input type="text" ref={inputRef} />
            <button onClick={getFocus}>获得焦点</button>
        </>
    )
}
复制代码
  • useImperativeMethods

子组件主动暴露方法给父组件调用

function Child (props, parentRef){
    const childRef = useRef()
    useImperativeHandle(parentRef, () => {
        return {
            // 暴露focus
            focus(){
                childRef.current.focus()
            }
        }
    })
    function setValue (){
        childRef.current.value = 33
    }
    return <input ref={childRef} />
}
Child = forwardRef(Child);
function Parent (){
    const parentRef = useRef()
    function getFocus () {
        // 有效
        parentRef.current.focus()
    }
    function setValue(){
        // 无效
        parentRef.current.value = 22
        // 无效并且报错
        parentRef.current.setValue()
    }
    return 
    <>
        <Child ref={parentRef}></Child>
        <button onClick={getFocus}>让输入框获取焦点</button>
        <button onClick={setValue}>设置输入框的值为33</button>
    </>
}
复制代码
  • useMutationEffect

  • useLayoutEffect

  • useContext createContext

const MyContext = createContext()
复制代码
  • useReducer

  • useCallback

文章分类
前端
文章标签