React Hook常用Api

Hook是React16.8的新增特性，可以在没有class的情况下使用state及其他React特性。

1、useState 声明变量

一、基础用法

const [state, setState] = useState(initialState);

setState(newState);

console.log(state); // 最新的state


二、函数式更新

①. const [count, setCount] = useState(1)
    setCount(prevCount => prevCount + 1);

②. const [filters, setFilters] = useState({page: 1, size: 10});
    setFilters(preState => ({...preState, page: 6}));

2、 useEffect可以让你在函数组件中执行副作用操作
数据获取，设置订阅及手动更改React组件中的DOM都属于副作用。

Tips: 如果你熟悉React class的生命周期函数，可以把useEffect Hook 看做componentDidMount，componentDidUpdate和componentWillUnmount这三个函数的组合。

① 无需清除的effect

useEffect(() => {
    document.title = 'title';
})

② 需清除effect

 useEffect(() => {
     // 相当于 componentDidMount
     const timeout = setTimeout(() => {
        setIsStart(true)
     }, 3000)

     // 相当于 componentWillUnmount
     return () => clearTimeout(timeout)
 })

③ 条件执行

const [visible, setVisible] = useState(false)

useEffect(() => {
    if(visible) {
        // 获取数据
    }
}, [visible])

 会持续更新。。。