‘Hooks‘的单词意思为“钩子”。React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。而React Hooks 就是我们所说的“钩子”。
常用的钩子
useState()
useEffect()
userReducer()
useCallback()
useMemo()
useRef()
纯函数组件没有状态，useState()用于为函数组件引入状态。在useState()中，数组第一项为一个变量，指向状态的当前值。类似this.state,第二项是一个函数，用来更新状态,类似setState。
import React, {useState} from ‘react‘ const AddCount = () => { const [ count, setCount ] = useState(0) return ( <div> <button onClick={setCount(count++)}>加一</button> </> ) } export default AddCount
useEffect()接受两个参数，第一个参数是你要进行的异步操作，第二个参数是一个数组，用来给出Effect的依赖项。只要这个数组发生变化，useEffect()就会执行
useEffect()可以看做 componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合。
useEffect( () => { const subscription = props.source.subscribe(); return () => {//相当于ComponentWillUnmount subscription.unsubscribe(); }; }, [props.source],//相当于ComponentDidUpdate );
const [state, dispatch] = useReducer(reducer, initialState)
它接受reducer函数和状态的初始值作为参数，返回一个数组，其中第一项为当前的状态值，第二项为发送action的dispatch函数。下面我们依然用来实现一个计数器。
const reduer = (state, action) => { switch(action) { case ‘add‘: return state + 1; case ‘reduce‘: return state - 1; case ‘reset‘: return 0; default:return state; } }
函数组件：
import React,{useReducer} from ‘react‘ export default function Counter() { const [counter, dispatch] = useReducer(reduer, 0); } return ( <div > <div>{counter}</div> <Button onClick={() => dispatch(‘add‘)}>递增</Button> <Button onClick={() => dispatch(‘reduce‘)}>递减</Button> <Button onClick={() => dispatch(‘reset‘)}>重置</Button> </div> ); }
useState是useReducer的一个子集，useState 返回的函数内部封装了一个 dispatch。useReducer( 单个组件中用的少，太重了）
官方的定义：在某些场景下，useReducer 会比 useState 更适用，例如 state 逻辑较复杂且包含多个子值（注意且字），或者下一个 state 依赖于之前的 state 等。
useMemo 和 useCallback 接收的参数都是一样,第一个参数为回调，第二个参数为要依赖的数据
共同作用：仅仅依赖数据发生变化, 才会调用，也就是起到缓存的作用。useCallback缓存函数，useMemo 缓存返回值。
useCallback使用场景是：有一个父组件，其中包含子组件，子组件接收一个函数作为props；通常而言，如果父组件更新了，子组件也会执行更新；所有依赖本地状态或props来创建函数，需要使用到缓存函数的地方，都是useCallback的应用场景。
父组件：
import React, { useCallback } from ‘react‘
function ParentComp () {
// ...
const [ name, setName ] = useState(‘hi~‘)
// 每次父组件渲染，返回的是同一个函数引用
const changeName = useCallback((newName) => setName(newName), [])
return (
<div>
<button onClick={increment}>点击次数：{count}</button>
<ChildComp name={name} onClick={changeName}/>
</div>
);
}
子组件
import React, { memo } from ‘react‘
const ChildComp = memo(function ({ name, onClick }) {
console.log(‘render child-comp ...‘)
return <>
<div>Child Comp ... {name}</div>
<button onClick={() => onClick(‘hello‘)}>改变 name 值</button>
</>
})
点击父组件按钮，控制台不会打印子组件被渲染的信息了。
究其原因：useCallback() 起到了缓存的作用，即便父组件渲染了，useCallback() 包裹的函数也不会重新生成，会返回上一次的函数引用。
import React, { useCallback } from ‘react‘
function ParentComp () {
// ...
const [ name, setName ] = useState(‘hi~‘)
const [ age, setAge ] = useState(20)
const changeName = useCallback((newName) => setName(newName), [])
const info = { name, age } // 复杂数据类型属性
return (
<div>
<button onClick={increment}>点击次数：{count}</button>
<ChildComp info={info} onClick={changeName}/>
</div>
);
}
父组件渲染，const info = { name, age } 一行会重新生成一个新对象，导致传递给子组件的 info 属性值变化，进而导致子组件重新渲染。
function ParentComp () { // .... const [ name, setName ] = useState(‘hi~‘) const [ age, setAge ] = useState(20) const changeName = useCallback((newName) => setName(newName), []) const info = useMemo(() => ({ name, age }), [name, age]) // 包一层 return ( <div> <button onClick={increment}>点击次数：{count}</button> <ChildComp info={info} onClick={changeName}/> </div> ); }
点击父组件按钮，控制台中不再打印子组件被渲染的信息了。
参考：
https://www.jianshu.com/p/d600f749bb19
https://www.jianshu.com/p/014ee0ebe959
React hooks解析（useState() useEffect() userReducer() useCallback() useMemo()）
原文：https://www.cnblogs.com/liangtao999/p/14703705.html