国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Ant Design Pro - 實(shí)踐React Hooks - 頁(yè)面

wangbjun / 1934人閱讀

摘要：背景目前是社區(qū)最炙手可熱的新技術(shù)，我們準(zhǔn)備追一下熱度，在當(dāng)前的項(xiàng)目中實(shí)踐一下技術(shù)。我們的項(xiàng)目使用的腳手架是，初步想法是把現(xiàn)有的一個(gè)有狀態(tài)頁(yè)面組件重構(gòu)成函數(shù)組件。存放表單值的狀態(tài)是聲明在列表組件，傳給表單組件。

背景

React Hooks目前是React社區(qū)最炙手可熱的新技術(shù)，我們準(zhǔn)備追一下熱度，在當(dāng)前的項(xiàng)目中實(shí)踐一下Hooks技術(shù)。
我們的項(xiàng)目使用的腳手架是Ant Design Pro 2.0，初步想法是把現(xiàn)有的一個(gè)有狀態(tài)頁(yè)面組件重構(gòu)成Hooks函數(shù)組件。

設(shè)計(jì)

動(dòng)手之前，先理一下思路，用Hook函數(shù)重構(gòu)的話，需要調(diào)整哪些部分：

組件類要拆解成Hooks函數(shù)

組件狀態(tài)改成Hooks狀態(tài)

類屬性改成Hooks函數(shù)本地變量

類方法改成Hooks函數(shù)的嵌套函數(shù)，可公用的也可以作為Hooks函數(shù)平級(jí)的函數(shù)

再理一下過(guò)程中的問(wèn)題：

函數(shù)和類不一樣，它的this是由調(diào)用方?jīng)Q定的，是不確定的，所以不要使用this（Hooks函數(shù)里面也沒(méi)必要用this）。

沒(méi)有this，就需要用傳參了，Hooks函數(shù)就是props轉(zhuǎn)遞。

Dva的使用，Ant Design Pro使用的Dva來(lái)管理數(shù)據(jù)（里面封裝的是Redux），這里我們還是可以繼續(xù)使用，通過(guò)connect把Redux管理的model數(shù)據(jù)注入props。

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

狀態(tài)共享，Hooks狀態(tài)如何共享給其他Hooks函數(shù)或普通函數(shù)？Hooks狀態(tài)聲明時(shí)會(huì)返回：狀態(tài)、修改此狀態(tài)的方法，這兩個(gè)返回值是可以傳遞和共享的。

這里也補(bǔ)充一個(gè)小知識(shí)，我們是可以聲明一個(gè)服務(wù)類的Hooks，然后把狀態(tài)和狀態(tài)修改器返回來(lái)，這個(gè)是可以共享和傳遞的，可以實(shí)現(xiàn)類似全局狀態(tài)管理器的功能，Hooks也提供了額外的輔助方法：useReducer。這里可以深入去學(xué)習(xí)一下。

解決了這些問(wèn)題，我們就可以實(shí)踐了。

實(shí)現(xiàn)

我們拆成了兩個(gè)Hooks組件：分頁(yè)列表 + 查詢表單，來(lái)看看最終實(shí)現(xiàn)的代碼。

入口 - 分頁(yè)列表Hooks組件 
function TableList(props) {
  const {
    dispatch,
    account: { accountList },
    loading,
  } = props;

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

  const columns = [
    {
      title: "序號(hào)",
      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",
    });
    // 自動(dòng)查詢
    handleSearch();
  }, []);

  return (
    
      
        

          

            
          

          
        

      
    
  );
}

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

export default tableList;

這里我們注意幾個(gè)點(diǎn)：

props我們是透?jìng)鹘o列表查詢表單的。

查詢方法也是傳過(guò)去的。

存放表單值的狀態(tài)是聲明在列表組件，傳給表單組件。

這里的userEffect實(shí)現(xiàn)了之前ComponentDisMount的功能，注意：依賴傳入了一個(gè)空數(shù)組，這里表示不依賴任何狀態(tài)，所以只會(huì)在初次加載時(shí)執(zhí)行，否則會(huì)出現(xiàn)死循環(huán)。

組件導(dǎo)出前，有個(gè)model和form的注入。

列表查詢表單 
function SearchForm(props) {
  const {
    account: { accountList },
    form,
    formValues,
    handleSearch,
  } = props;
  const { getFieldDecorator } = form;

  return (
    

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

  );
}

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

想法

其實(shí)整個(gè)實(shí)現(xiàn)下來(lái)，并不難。但是還有些問(wèn)題需要我們考慮一下：

使用Hooks之后，帶來(lái)了哪些改變？

代碼邏輯是不是更優(yōu)了？

代碼結(jié)構(gòu)是否清晰？

什么樣是最佳實(shí)踐？

歡迎討論。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/106278.html

相關(guān)文章

  • Ant Design Pro - 實(shí)踐React Hooks - 組件

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

    twohappy 評(píng)論0 收藏0

  • TypeScript 、React、 Redux和Ant-Design的最佳實(shí)踐

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

    wangbinke 評(píng)論0 收藏0

  • TypeScript 、React、 Redux和Ant-Design的最佳實(shí)踐

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

    codeKK 評(píng)論0 收藏0

  • 在react-control-center里玩轉(zhuǎn)無(wú)狀態(tài)組件

    摘要：類組件中的增加學(xué)習(xí)成本，類組件在基于現(xiàn)有工具的優(yōu)化上存在些許問(wèn)題。由于業(yè)務(wù)變動(dòng)，函數(shù)組件不得不改為類組件等等。那么可愛(ài)的各位看官，還不趕緊使用起來(lái)在線示例點(diǎn)我版本基礎(chǔ)入門項(xiàng)目錄像教程 視圖與業(yè)務(wù)，好一對(duì)冤家 業(yè)務(wù)型model model是需要精心的設(shè)計(jì)和合理的劃分的，這是我們之前開(kāi)發(fā)大型的redux+react單頁(yè)面應(yīng)用，大家都認(rèn)同的真理，同樣的，在react-control-cent...

    xiangzhihong 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<