基础

useState

声明：

const [state, setState] = useState(initialState)

赋值：

setState(newState)

setState(prevCount => preCount - 1)

setState(prevState => {
    return {...prevState, ...updatedValues}
})

useEffect:

完成副作用操作： 比如改变dom 添加订阅、设置定时器、记录日志

清除effect: 返回一个清除函数

执行时机： 在浏览器完成布局与绘制之后

执行条件：依赖发生变化， 第二个参数若是空数组，则只运行一次effect

useEffect(() => {
    const [data, setData] = useState({hits: []});
    const [query, setQuery] = useState('react');
    
    
    function fetchData() {
        let ignore = false;
        const data = {
            hits: [
            ]
        }
        
        if(!ignore)  setData(data)
        
    }
    fetchData();
    rerturn () =>  ignore = true;
}, [query])

useContext

const ThemeContext = React.createContext('light');
classApp extends React.Component {
    render() {
        return (
            <ThemeContext.Provider value="dark">
                <Toolbar />
            </ThemeContext>
        )
    }
}

function Toolbar(props) {
    <div>
        <ThemeButton />
    </div>
}

function ThemeButton() {
    const contextType = useContext(ThemeContext);
    render() {
        return <Button theme={this.context} />
    }
}

额外的Hook

useReducer

const [state, dispatch] = useReducer(reducer, initialArg, init)

const initialState = {count: 0};

function reducer(state, action) {
    swtich(action.type) {
        case 'increment':
            return {count: state.count + 1}
        case 'decrement':
            return {count: state.count -1}
        default: 
            throw new Error();
    }
}
function Counter() {
    const [state, dispatch] = useReducer(reducer, initialState);
    
    return (
        <>
            Count: {state.count}
            <button onClick={() => dispatch({type: 'increment'})}>+</button>
            
            <button onClick={() => dispatch({type: 'decrement'})}>-</button>
        </>
    )
}

useCallback

const memoizedCallback = useCallback(() => {
    doSomething(a, b);
}, [a, b])

将memoizedCallback传给子组件， 只有a或者b（即依赖项）改变时才会更新

useMemo

const memoizedValue = useMemo() => computeExpensiveValue(a, b), [a, b])

useRef

function TextInputWithFocusButton() {
    const inputEl = useRef(null);
    const onButtonClick = () = > {
        inputEl.current.focus();
    }
    return(
        <>
            <input ref={inputEl} type="text" />
            <button onClick={onButtonClick}>focus th button</button>
        </>
    )
}

useImperativeHandle

useLayoutEffect

useDebugValue