React Hooks简单业务场景实战（非源码解读）

╰半夏微凉° 2021-11-26 18:52 224阅读 0赞

前言

React Hooks 是React 16.7.0-alpha 版本推出的新特性。从 16.8.0 开始，React更稳定的支持了这一新特性。

它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

> 注意：React 16.8.0 是第一个支持 Hook 的版本。升级时，请注意更新所有的 package，包括 React DOM。React Native 将在下一个稳定版本中支持 Hook。

如果说promise是JavaScript异步的终极解决方案，那么React Hooks从某种意义上来说，也是react状态管理的终极解决方案。

### 为什么用 React Hooks？与其他状态管理方案有什么区别？ ###

在react hooks，react态管理方案主要有如下2种：

*  [render-props][]
 *  [HOC][]

这两种状态解决方案其实已经很不错，可以满足绝大多数状态共享的业务场景。 当然，像FB这样优秀的团队优秀的人总喜欢钻研，不断优化。认为这两种状态解决方案嵌套太多，很多业务逻辑可以抽象出来。不仅仅是共享状态就完事了，还得共享出处理逻辑。为了减少不必要的组件嵌套写法，实现更扁平、颗粒化的状态 + 逻辑的复用，于是便推出了 React Hooks。

关于react hooks，具体可以多看看[React Hooks官方文档][React Hooks]，理解会更深。

### 业务实战1：实现一个简单的显示隐藏弹出框 ###

1、基于 render-props实现：

// 将父组建的 on状态 和toggle 事件，共享给嵌套下的子组件
    function App() { return ( <Toggle initial={ false}> {({ on, toggle }) => ( <Button type="primary" onClick={toggle}> Open Modal </Button> <Modal visible={on} onOk={toggle} onCancel={toggle} /> )} </Toggle> ) }

2、用react hooks实现

import React, { useState } from 'react'; function Example() { // 声明一个新的叫做 “visible” 的 state 变量 const [visible, setVisible] = useState(false); return ( <div> <Modal onClick={() => setVisible(!visible)}> Click me </Modal> </div> ); }

### 业务实战2: 接收传入props后立马更新自有的State状态（received passed props and updated） ###

由上述例子可以看到，我们用到了useEffect这个hooks。

> Effect Hook 可以让你在函数组件中执行副作用操作

什么叫副作用呢？ 数据获取，设置订阅以及手动更改 React 组件中的 DOM 都属于副作用。

如果实在理解不了副作用，你可以理解为，在我们在写传统的react class组件里面的生命周期钩子函数componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合中处理的相关逻辑，就是副作用。

也就是说，任何你想在页面首次加载完（componentDidMount），后续每次更新完（componentDidUpdate），亦或者是组件卸载前（componentWillUnmount），这三个勾子中加入你自己的逻辑处理，就得用到useEffect

### 业务实战3：显示后，倒计时自动隐藏（与setInterval结合） ###

业务场景具体如下：实现一个倒计时30秒，每秒钟减1，然后倒计时完毕这个组件自动隐藏。

function App() { const [count, setCount] = useState(30); useEffect(() => { setInterval(() => { setCount(count - 1); }, 1000); }); return <div className="App">{count}</div>; }

看看上述的写法，自己运行一下就只知道了，肯定是大错特错的。 最基本的，setInterval这个删除定时器都没有做相关处理。 其次，每次都会生成不同都setInterval实例。那么如何加以控制呢？

来看看正确都写法，这里要用到useRef这种类型都hooks了。

关于useRef 更多的请看[useRef官方文档][useRef]

### 业务实战4: 自定义hooks ###

基于上述setInterval的业务功能实现，我们简单的来写一个自定义的hooks

export default function useInterval(callback) { const savedCallback = useRef(); useEffect(() => { savedCallback.current = callback; }); useEffect(() => { function tick() { savedCallback.current(); } let id = setInterval(tick, 1000); return () => clearInterval(id); }, []); }

然后在你需要用到的地方引入:

import useInterval from 'xx/self_hooks'; function App(){ useInterval(()=>{ // ... 跟useEffect写法类似，目前只支持传入一个function类型的参数，如果要接收多个参数，那么在自定义hooks那里去自行处理一下。 }) }

关于自定义hooks，更多请查看[自定义hooks][hooks]

### 暂结 ###

关于react hooks 简单的使用，此篇就暂时写到这里，当然，复杂一点的，可以使用useReducer、useContext和useEffect代替Redux方案。后续我们应该单独来研究这块。 回顾一下，如何才能说我们会用react hooks 呢？

*  第一、明白概念，干什么用的，解决哪些痛点？
 *  第二、useEffect传入几个参数？分表表示声明？useRef作用是什么？这些可以解决我们基本的业务需求。
 *  第三、useReducer、useContext 怎么替换 redux？
 *  读源码，搞清楚为什么useEffect不能卸载if嵌套中等之类的问题？

今天先把问题抛出，后续按照这个，循序渐进的学习掌握react hooks。

转载于:https://www.cnblogs.com/ldld/p/11069906.html

[render-props]: https://reactjs.org/docs/render-props.html
[HOC]: https://reactjs.org/docs/higher-order-components.html
[React Hooks]: https://zh-hans.reactjs.org/docs/hooks-intro.html
[useRef]: https://zh-hans.reactjs.org/docs/hooks-reference.html#useref
[hooks]: https://zh-hans.reactjs.org/docs/hooks-custom.html