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

前言

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种：

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

function Avatar(props) {

 const [user, setUser] = React.useState({...props.user}); // 这里仅仅是给了一个初始值，仅第一次渲染的时候生效，后续都不会再更新了。

 // 用useEffect，第二个参数传入一个数组字段props.user，

 // 表示每次只要传入的props.user有变化，那么就触发setUser这个操作更新状态。

 React.useEffect(() => {

     setUser(props.user);

 }, [props.user])

 return user.avatar ?

        (<img src={user.avatar}/>)

       : (<p>Loading...</p>);

}

由上述例子可以看到，我们用到了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了。



function App(props){

    const [visible,setVisible] = useState(false);// 初始化值为false，隐藏

    const [count,setCount] = useState(0); // 倒计时字段，初始值为0

    // 明确定时器要做什么：我们这里是每秒 -1，小于等于0的时候就自动给隐藏

    // 同时，本此的跟新跟下次的渲染更新要共享状态，记住上次更新这个count减到哪里了

    // 基于上述问题，我们可以使用如下方案：

    // 声明一个useRef对象，初始化为null

    const intervalCb = useRef(null);

    useEffect(()=>{

      // useRef 对象有一个current属性，可以给它赋值为一个函数

      intervalCb.current = () => {

      if(count  <= 0){

        setVisible(false);

      }else{

        setCount(count - 1);

      }

    };

    })

    // 在componentDidMount中设置一个定时器

    useEffect(()=>{

        function itvFn(){

            // 在此前，定时器的回调函数已经声明，这里可以直接调用

            intervalCb.current();

        }

        const itvId = window.setInterval(itvFn,1000);

        // return 一个回调函数，表示清除处理

        return () => window.clearInterval(itvId);

    },[]) // 传入要监听的对象，空数组表示只监听一次，相当于didMounted

}

return (<div className={visible}>

        {count}

    </div>)

}

关于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

暂结

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

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

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