Hook引起对函数式组件的思考

React Hooks在react v16.8版本横空出世后，带来了新的react编程思想，当你还在为该使用无状态组件（Function）还是有状态组件（Class）而烦恼时，当你搞不清使用哪个生命周期钩子函数时，当你还在为组件中的this指向而晕头转向时，拥抱Hooks，一切问题都会迎刃而解，让我们来看一眼Hooks最初的样子：

import React, { useState } from 'react';

function Example() {
  // 声明一个新的叫做 “count” 的 state 变量
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

没有setState异步刷新render，只需要通过解构拿到你的值(get)和响应(set)，一切看起来都是那么的优雅，下面我们来具体看下Hooks的这种思想如何引起我们对函数式组件的思考。

自定义Hook

通过自定义 Hook，可以将组件逻辑提取到可重用的函数中。

当业务场景下，不会像get和set这么简单，有很多结合Hook使用的地方都需要套用逻辑，比如：

import React, { useState } from "react";

export const testDemo = () => {  
  const [ visible, setVisible ] = useState();

  const openModal = () => {
    setVisible(true);
  }
  const hideModal = () => {
    setVisible(false);
  }
  return (    
    <React.Fragment>      
      <div onClick={openModal}>open Modal!</div>      
      <Modal visible={visible} onCancel={hideModal} />    
    </React.Fragment>  
  );
};

可以发现除了 visible 这个必要的变量外，想要控制modal就必须要有open和close的方法调用，其实如果只是写一个组件看起来代码量还好，但每使用一个Modal，就比定会有一套相同的逻辑需要重写，这势必会增加代码冗余。

那么如果想要解决此类问题，就需要封装逻辑，我们这里使用自定义的Hook useModalVisible。话不多说，我们来看一下封装后的代码：

import React, { useState } from "react";
import {useModalVisible} from '@/utils';
export const testDemo = () => {  
    const { visible, hideModal, openModal } = useModalVisible();
    return (    
      <React.Fragment>      
        <div onClick={openModal}>open Modal!</div>      
        <Modal visible={visible} onCancel={hideModal} />    
      </React.Fragment>  
    );
};