React Hooks的介绍

1. 类组件的不足

• 缺少逻辑复用机制：为了复用逻辑增加无实际效果的组件，增加了组件层级，显示十分臃肿，增加了调试的难度以及运行效率的降低。
• 类组件经常会变得很复杂难以维护：将一组相关的业务逻辑拆分到不同的生命周期函数中；在一个生命周期函数内存在多个不相关的业务逻辑
• 类成员的方法不能保证this指向的正确性

2. useState()

初始值是动态值的情况，传入函数形式，函数只会调用一次。如果传入动态获取的变量，变量获取值的逻辑会调用多次。

fucntion App(props) {
    // bad
    // const propsCount = props.count || 0
    // const [count, setCount] = useState(propsCount)
    const [count, setCount] = useState(() => {
        return props.count || 0
    })
}

3. useEffect()

如何使用异步函数

fucntion App(props) {
    useEffect(() => {
        (async () => {
            await axios.get()
        })()
    })
}

4. useMemo()

类似于vue的计算属性，会缓存计算结果

fucntion App(props) {
    const result = useMemo(() => {
        return result
    }, [count])
}

5. memo()

性能优化，如果本组件中的数据没有发生变化，阻止组件更新。类似类组件中的PureComponent和ShouldComponentUpdate

import React, { memo } from 'react'

fucntion Counter() {
  return <div></div>
}

export default memo(Counter)

6. useCallback()

性能优化，缓存函数，使组件重新渲染时得到相同的函数实例

import React, { useCallback } from 'react'

fucntion Counter() {
  const [count, setCount] = useState(0)
  const resetCount = useCallback(() => setCount(0), [setCount])
  return <div></div>
}

export default memo(Counter)

7. useRef()

获取DOM元素；保持数据（跨组件周期）：即使组件重新渲染，保存的数据仍然还在。保持的数据被更新不会触发组件重新渲染

function App() {
    const [count, setCount] = useState(0)
    let timerId = useRef()
    
    useEffect(() => {
        timerId.current = setInterval(() => {
            setCount(count => count + 1)
        }, 1000)
    })
    
    const stopCount = () => {
        clearInterval(timerId.current)
    }
    
    return <div></div>
}

8. 自定义hook函数

import React, { useState, useEffect } from 'react'

function useChangeInput(initialValue) {
    const [value, setValue] = useState(initialValue)
    
    return {
        value,
        onChange: (event) => setValue(event.target.value)
    }
}

function App() {
    const usernameInput = useChangeInput('')
    const passwordInput = useChangeInput('')
    
    const submitForm = (event) => {
        event.preventDefault()
    }
    
    return <form onSubmit={submitForm}>
        <input type="text" name="username" {...usernameInput} />
        <input type="password" name="password" {...passwordInput} />
        <input type="submit" />
    </form>
}

9. 路由的hook函数