一文归纳 React Hooks 常用场景

2. 组件树层级变浅，在原本的代码中，我们经常使用 HOC/render props 等方式来复用组件的状态，增强功能等，无疑增加了组件树层数及渲染，而在 React Hooks 中，这些功能都可以通过强大的自定义的 Hooks 来实现；

关于这方面的文章，我们根据使用场景分别进行举例说明，帮助你认识理解并可以熟练运用 React Hooks 大部分特性。辛苦整理良久，还望手动点赞鼓励~

一、State Hook

1、基础用法

function State(){

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

return (

You clicked {count} times

<button onClick={() => setCount(count + 1)}>

Click me

)

}

2、更新

更新分为以下两种方式，即直接更新和函数式更新，其应用场景的区分点在于：

直接更新不依赖于旧 state 的值；函数式更新依赖于旧 state 的值；

// 直接更新

setState(newCount);

// 函数式更新

setState(prevCount => prevCount - 1);

3、实现合并

与 class 组件中的 setState 方法不同，useState 不会自动合并更新对象，而是直接替换它。我们可以用函数式的 setState 结合展开运算符来达到合并更新对象的效果。

setState(prevState => {

// 也可以使用 Object.assign

return {…prevState, …updatedValues};

});

4、惰性初始化 state

initialState 参数只会在组件的初始渲染中起作用，后续渲染时会被忽略。其应用场景在于：创建初始 state 很昂贵时，例如需要通过复杂计算获得；那么则可以传入一个函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用：

const [state, setState] = useState(() => {

const initialState = someExpensiveComputation(props);

return initialState;

});

5、一些重点

• （1）不像 class 中的 this.setState ，Hook 更新 state 变量总是替换它而不是合并它；

• （2）推荐使用多个 state 变量，而不是单个 state 变量，因为 state 的替换逻辑而不是合并逻辑，并且利于后续的相关 state 逻辑抽离；

• （3）调用 State Hook 的更新函数并传入当前的 state 时，React 将跳过子组件的渲染及 effect 的执行。（React 使用 Object.is 比较算法 来比较 state。）

二、Effect Hook

1、基础用法

function Effect(){

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

useEffect(() => {

<