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>  
    );
};複製代碼

能夠看到

useModalVisible

是咱們自定義的一個Hook，它返回了咱們所須要的visible，hideModal，openModal，一次封裝，全部Modal受用。

咱們來看下自定義的Hook內部實現：

這樣就完成了一個自定義的Hook。

目前看到了一個比較有意思的庫，根據場景利用Hooks造了不少輪子《react-hanger》

函數式組件

咱們發現若是複用邏輯能夠經過封裝Hooks函數來造輪子，若是用來寫組件是否能夠呢？

答案是必須的。

咱們先來看一個實際業務下函數式組件的代碼：

能夠看到咱們的組件接收props，組件經過對象包裹的dom對應的value值返回，還能夠將組件產生的一些數據和dom打包成對象一同返回。

調用函數式組件：

這樣咱們完成了一個函數式組件封裝，咱們看一下最後咱們封裝的組件長什麼樣子：

能夠看到當我選擇了排序方式或者勾選選擇框時，組件內部會產生邏輯和數據，經過retrun咱們能夠像Hooks同樣直接告訴父類咱們經過邏輯產生了什麼數據，不再須要像類組件同樣callback傳來傳去，是否是方便不少呢？

結尾

不知道你閱讀完整篇文章的感覺如何，或者對hooks有任何角度的見解和思考都歡迎在評論區一塊兒討論。我的感受Hooks帶來的不單單是代碼上的優雅，仍是一種對代碼的思考方式。若是文章中有錯誤或者排版問題請大佬輕噴😂，小老弟這是第一次寫文章，但願從代碼的索取者變爲代碼貢獻者。最後借用大佬的一句名言：

「外在轉變過程指的是，創建起一個有潛力或有能力的好名聲，這可以在很大程度上改變咱們的自我認知； 而內在轉變過程涉及內在動機和自我定位的轉變，這種轉變並非獨立發生的，而是在與他人所創建的關係中漸漸發生的轉變。」 ——《能力陷阱》