Ant Design Pro - 實踐React Hooks - 頁面

wangbjun 發布于2019-08-26 10:30 / 1926人閱讀

摘要：背景目前是社區最炙手可熱的新技術，我們準備追一下熱度，在當前的項目中實踐一下技術。我們的項目使用的腳手架是，初步想法是把現有的一個有狀態頁面組件重構成函數組件。存放表單值的狀態是聲明在列表組件，傳給表單組件。

背景

React Hooks目前是React社區最炙手可熱的新技術，我們準備追一下熱度，在當前的項目中實踐一下Hooks技術。
我們的項目使用的腳手架是Ant Design Pro 2.0，初步想法是把現有的一個有狀態頁面組件重構成Hooks函數組件。

設計

動手之前，先理一下思路，用Hook函數重構的話，需要調整哪些部分：

組件類要拆解成Hooks函數

組件狀態改成Hooks狀態

類屬性改成Hooks函數本地變量

類方法改成Hooks函數的嵌套函數，可公用的也可以作為Hooks函數平級的函數

再理一下過程中的問題：

函數和類不一樣，它的this是由調用方決定的，是不確定的，所以不要使用this（Hooks函數里面也沒必要用this）。

沒有this，就需要用傳參了，Hooks函數就是props轉遞。

Dva的使用，Ant Design Pro使用的Dva來管理數據（里面封裝的是Redux），這里我們還是可以繼續使用，通過connect把Redux管理的model數據注入props。

這里有個小知識點，組件類的model注入，使用了注解形式的裝飾器，函數是不能使用裝飾器的，所以需要我們手工注入。理解一點：這里的裝飾器就是高階函數。

狀態共享，Hooks狀態如何共享給其他Hooks函數或普通函數？Hooks狀態聲明時會返回：狀態、修改此狀態的方法，這兩個返回值是可以傳遞和共享的。

這里也補充一個小知識，我們是可以聲明一個服務類的Hooks，然后把狀態和狀態修改器返回來，這個是可以共享和傳遞的，可以實現類似全局狀態管理器的功能，Hooks也提供了額外的輔助方法：useReducer。這里可以深入去學習一下。

解決了這些問題，我們就可以實踐了。

實現

我們拆成了兩個Hooks組件：分頁列表 + 查詢表單，來看看最終實現的代碼。

入口 - 分頁列表Hooks組件

function TableList(props) {
  const {
    dispatch,
    account: { accountList },
    loading,
  } = props;

  const [formValues, setFormValues] = useState({});
  const [selectedRows] = useState([]);

  const columns = [
    {
      title: "序號",
      dataIndex: "_index",
    },
    {
      title: "賬戶名稱",
      dataIndex: "accountName",
    },
  ];

  function handleSearch(e) {
    e && e.preventDefault();
    const { form } = props;

    form.validateFields((err, fieldsValue) => {
      if (err) return;

      dispatch({
        type: "account/accountList",
        payload: fieldsValue,
      });
    });
  }

  function handleStandardTableChange(pagination, filtersArg, sorter) {
    const filters = Object.keys(filtersArg).reduce((obj, key) => {
      const newObj = { ...obj };
      newObj[key] = getValue(filtersArg[key]);
      return newObj;
    }, {});

    const params = {
      pageNumber: pagination.current,
      pageSize: pagination.pageSize,
      ...formValues,
      ...filters,
    };
    if (sorter.field) {
      params.sort = sorter.order === "ascend" ? "asc" : "desc";
    }

    dispatch({
      type: "account/accountList",
      payload: params,
    });
  }

  useEffect(() => {
    dispatch({
      type: "account/clear",
    });
    // 自動查詢
    handleSearch();
  }, []);

  return (
    
      
        
          
            
          
          
        
      
    
  );
}

const tableList = connect(({ accountaging, loading }) => ({
  accountaging,
  loading: loading.models.accountaging,
}))(Form.create()(TableList));

export default tableList;

這里我們注意幾個點：

props我們是透傳給列表查詢表單的。

查詢方法也是傳過去的。

存放表單值的狀態是聲明在列表組件，傳給表單組件。

這里的userEffect實現了之前ComponentDisMount的功能，注意：依賴傳入了一個空數組，這里表示不依賴任何狀態，所以只會在初次加載時執行，否則會出現死循環。

組件導出前，有個model和form的注入。

列表查詢表單

function SearchForm(props) {
  const {
    account: { accountList },
    form,
    formValues,
    handleSearch,
  } = props;
  const { getFieldDecorator } = form;

  return (
    
      
        
          
            {getFieldDecorator("accountName", {
              initialValue: "",
            })()}
          
        
        
          
        
      
    
  );
}

表單組件這塊，東西不多，理解props就好。

想法

其實整個實現下來，并不難。但是還有些問題需要我們考慮一下：

使用Hooks之后，帶來了哪些改變？

代碼邏輯是不是更優了？

代碼結構是否清晰？

什么樣是最佳實踐？

歡迎討論。

GPU云服務器云服務器 Ant Design ant-design React hooks react-hooks

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106278.html

Ant Design Pro - 實踐React Hooks - 組件

摘要：另外，監聽事件，更新寬度狀態。文本真實寬度渲染完成后，通過獲取元素寬度。是否超長比較文本真實寬度和組件的寬度。設置為其他狀態或中的狀態時，只在這些狀態變化時觸發注意，依賴為對象時，不會深比較。得益于的用法靈活，組件寫法上確實簡潔不少。需求后臺項目，使用Ant Design Pro, 有這樣一個需求：有一個表格，寬度是自適應的，表格中有一列是備注，文本長度不定，我們希望在文本過長的時...

twohappy 2019-08-26 10:40 評論0 收藏0
TypeScript 、React、 Redux和Ant-Design的最佳實踐

摘要：使用官方的的另外一種版本和一起使用自動配置了一個項目支持。需要的依賴都在文件中。帶靜態類型檢驗，現在的第三方包基本上源碼都是，方便查看調試。大型項目首選和結合，代碼調試維護起來極其方便。 showImg(https://segmentfault.com/img/bVbrTKz?w=1400&h=930); 阿特伍德定律，指的是any application that can be wr...

wangbinke 2019-08-23 17:10 評論0 收藏0
TypeScript 、React、 Redux和Ant-Design的最佳實踐

摘要：使用官方的的另外一種版本和一起使用自動配置了一個項目支持。需要的依賴都在文件中。帶靜態類型檢驗，現在的第三方包基本上源碼都是，方便查看調試。大型項目首選和結合，代碼調試維護起來極其方便。 showImg(https://segmentfault.com/img/bVbrTKz?w=1400&h=930); 阿特伍德定律，指的是any application that can be wr...

codeKK 2019-08-29 18:42 評論0 收藏0
在react-control-center里玩轉無狀態組件

摘要：類組件中的增加學習成本，類組件在基于現有工具的優化上存在些許問題。由于業務變動，函數組件不得不改為類組件等等。那么可愛的各位看官，還不趕緊使用起來在線示例點我版本基礎入門項目錄像教程視圖與業務，好一對冤家業務型model model是需要精心的設計和合理的劃分的，這是我們之前開發大型的redux+react單頁面應用，大家都認同的真理，同樣的，在react-control-cent...

xiangzhihong 2019-08-26 13:33 評論0 收藏0