react hooks 入门

我就是我 2022-11-29 12:59 201阅读 0赞

# [react hooks][] #

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

### useState 定义状态 ###

实例

import React, { useState } from 'react'
    const Demo = () => {
    	let [count, setCount] = useState(0)
    	return <div onClick={_=> setCount(count + 1)}>{ count }</div>
    }

### useEffect 生命周期钩子 ###

// 相当于 componentDidMount
    useEffect(()=>{
        fetch('xxx').then(res => {
            // 正确使用方法，不然获取到的值会慢一拍，会拿到最新的 count
            setCount((count)=>{
                return count + 1
            })
            // 或者使用 ref 替换
        })
    }, [])
    
    useEffect(()=>{
        // 相当于 componentDidMount
        //  return 在 componentWillUnmount 时触发
        return () => {
    
        }
    }, [])
    useEffect(()=>{
        // componentDidUpdate
    }, [count])
    // 替代 willreceiveProps
    useEffect(()=>{
    
    }, [props.name])

### memo 解决组件重复渲染问题 ###

const Parent = () => {
        return (
            <div
                οnclick={ changeCount(count++) }
            >
                {count}
                <Child changeCount={changeCount} />
            </div>
        )
    }
    const Child = memo(({changeCount})=> {
    
    })

### useRef 还是一样的 ref 功能 ###

let btn = useRef(null)
    <div ref={btn}>btn</div>

### useMemo 缓存变量状态 （谨慎使用） ###

### useCallback 缓存函数（谨慎使用） ###

### useContext \\ useReducer 可以创建数据仓库 ###

### useImperativeHandle 在使用 ref 时自定义暴露给父组件的实例值 ###

### useLayoutEffect ###

需要注意 useLayoutEffect 与 componentDidMount、componentDidUpdate 的调用阶段是一样的。但是，我们推荐你一开始先用 useEffect，只有当它出问题的时候再尝试使用 useLayoutEffect

### useDebugValue 可用于在 React 开发者工具中显示自定义 hook 的标签 ###

[react hooks]: https://zh-hans.reactjs.org/docs/hooks-intro.html