React.js 的 5 种主要 hooks 的用法介绍

1.useState()

hook 到底是什么呢? 一个 hook 是一个特殊的方法，可以让你"hook into"react.js 的特性。 useState()方法可以添加给一个函数组件添加 React 状态。

useState()的用处

为了让 UI 更具交互性，你需要在数据变动的时候更改底层的数据模型或者组件。React 则使用 state 实现了这一点。
useState()提供了简洁方式来处理这个状态。

const [count,setCount] = useState(0);
...
setCount(1);

2.useEffect()

在 react 中我们通过需要处理一些被称作"副作用"的操作。列如获取数据、订阅、手动修改 dom 之类的操作。我们称这些操作为副作用，并且这些操作无法在 dom 渲染的时候完成。

useEffect()在每次渲染完成之后进行。如果某些值在渲染的时候没有改变的化，useEffect()也可以跳过这个副作用。

useEffect(()=>{
    fetchUserInfo(userID);
},[userID]);

different 参数有不用的渲染次数

useEffect(() => {
  // runs
  // - on mount
  // - on every render
})

useEffect(() => {
  // runs
  // - on mount only
}, [])

useEffect(() => {
  // runs
  // - on mount
  // - on renders where varA and/or varB change
}, [varA, varB])

3.useMemo()

有些函数调用的时候会比较麻烦。有时候我们不需要一个函数来执行重渲染，当一个确定的值发生改变的时候。这就是 useMemo() 的用武之地。它只会在依赖项之一发生更改的时候重新计算内存中的变量值。

const area = useMemo(()=>{
    return calcSurfaceArea(size);
},[size])

每当 size 变量发生改变的时候，area 也会随之改变。

4.useCallback()

useCallback()和 useMemo()具有相同的运行方式。除了 useCallback 返回的是一个函数而不是一个固定值。

const area = useCallback(()=>{
     calcSurfaceArea(size);
},[size])

5.useContext()

有一种场景是不同的组件需要同一个变量值。最简洁的处理方式就是使用 useContext(). Context 提供一组值给所有的组件去消费。

const value = useContext(ThemeContext)