這篇文章將為大家詳細講解有關react hooks的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)建站服務項目包括江州網(wǎng)站建設、江州網(wǎng)站制作、江州網(wǎng)頁制作以及江州網(wǎng)絡營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關系等，向廣大中小型企業(yè)、政府機構等提供互聯(lián)網(wǎng)行業(yè)的解決方案，江州網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務的客戶以成都為中心已經(jīng)輻射到江州省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！

React在16.8版本正式發(fā)布了Hooks。關注了很久，最近正好有一個小需求，趕緊來試一下。

需求描述

需求很簡單，部門內(nèi)部的一個數(shù)據(jù)查詢小工具。大致長成下面這樣：

用戶首次訪問頁面，會拉取數(shù)據(jù)展示。輸入篩選條件，點擊查詢后，會再次拉取數(shù)據(jù)在前端展示。

需求實現(xiàn)

使用React Class Component的寫法

如果使用以前的class寫法，簡單寫一下，代碼可能大概長成下面這樣：

import React from 'react';
import { Tabs, Input, RangeTime, Button, Table } from './components';

class App extends React.Component {
  ...
  state = {
    type: [],
    id: '',
    title: '',
    date: [],
    dataList: []
  }
  componentDidMount() {
    this.fetchData();
  }
  render() {
    <Tabs value={this.state.type} onChange={this.handleTypeChange}/>
    <Input value={this.state.id} label="ID" onChange={this.handleIdChange}/>
    <Input value={this.state.id} label="標題" onChange={this.handleTitleChange}/>
    <RangeTime value={this.state.date} onChange={this.handleRangeTimeChange}/>
    <Button onClick={this.handleQueryBtnClick}>查詢</Button>
    <Table dataList={this.state.dataList} />
  }
  
  fetchData() {
    ...
    this.setState({
      dataList
    });
  }

  handleTypeChange() {
    ...
    this.setState({
      type,
    });
  }
  
  handleIdChange() {
    ...
    this.setState({
      id,
    });
  }

  handleTitleChange() {
    ...
    this.setState({
      title,
    });
  }

  handleRangeTimeChange() {
    ...
    this.setState({
      date,
    });
  }

  handleQueryBtnClick() {
    ...
  }
  ...
}

使用React Hooks的寫法

關于React hooks的相關內(nèi)容，這里就不贅述了。可以直接查看react官方文檔，寫得非常好。

https://reactjs.org/docs/hooks-intro.html

本次需求其實就兩個邏輯：1、輸入篩選項 。2、查詢數(shù)據(jù)

主頁面一個hooks，處理篩選項以及數(shù)據(jù)展示。數(shù)據(jù)請求邏輯單獨弄一個hooks。

主頁面hooks：

import React, { useState, useEffect} from 'react';
import { Tabs, Input, RangeTime, Button, Table } from './components';

const App = () => {
  // 數(shù)據(jù)類型
  const tabs = [{ key: 1, value: '類型1' }, { key: 0, value: '類型2' }];
  const [tab, setTab] = useState(1);
  // 數(shù)據(jù)ID
  const [dataId, setDataid] = useState('');
  // 標題
  const [title, setTitle] = useState('');
  // 時間區(qū)間, 默認為至今一周時間
  const now = Date.now();
  const [timeRange, setTimeRange] = useState([now - 1000 * 60 * 60 * 24 * 7, now]);
  // 數(shù)據(jù)列表
  const [dataList, setDataList] = useState([]);

  // 點擊搜索按鈕
  function handleBtnClick() {
    // 請求數(shù)據(jù)
    ...
  }

  return <section className="app">
    <Title title="數(shù)據(jù)查詢" />
    <Tabs label="類型" tabs={tabs} tab={tab} onChange={setTab} />
    <Input value={dataId} placeholder="請輸入數(shù)據(jù)ID" onChange={setDataid}>ID</Input>
    <Input value={title} placeholder="請輸入數(shù)據(jù)標題" onChange={setTitle}>標題</Input>
    <TimeRange label="數(shù)據(jù)時間" value={timeRange} onChange={handleTimeChange}/>
    <article className="btn-container">
      <Button type="primary" onClick={handleBtnClick}>
        查詢          
      </Button>
    </article>
    <Table dataList={dataList}></Table>
  </section>
};

上面的代碼，完成了篩選項的處理邏輯。下面來實現(xiàn)負責數(shù)據(jù)請求的hooks.

數(shù)據(jù)請求hooks：

import React, { useState, useEffect } from 'react';
import jsonp from '../tools/jsonp';


function MyFecth(url) {
  // 是否正在請求中
  const [isLoading, setIsLoanding] = useState(false);
  // 請求參數(shù)
  const [queryParams, setQueryParams] = useState(null);
  // 請求結果
  const [data, setData] = useState(null);

  // 向接口發(fā)起請求
  const fetchData = async () => {
    if(queryParams === null) {
      return;
    }
    setIsLoanding(true);
    const res = await jsonp({
      url: url,
      data: queryParams
    });
    setData(res);
    setIsLoanding(false);
  }

  // 只要queryParams改變，就發(fā)起請求
  useEffect(()=> {
    fetchData();
  }, [queryParams]);


  // 供外部調(diào)用
  const doGet = (params) => {
    setQueryParams(params);
  }

  return {
    isLoading,
    data,
    doGet
  }
}

export default MyFecth;

在主頁面中，引用數(shù)據(jù)請求hooks：

import React, { useState, useEffect} from 'react';
import { Tabs, Input, RangeTime, Button, Table } from './components';
import MyFecth from './MyFetch';

const App = () => {

  // ①使用數(shù)據(jù)請求hooks
  const { isLoading, data, doGet } = MyFecth('http://xxx');
  
  // 數(shù)據(jù)類型
  const tabs = [{ key: 1, value: '類型1' }, { key: 0, value: '類型2' }];
  const [tab, setTab] = useState(1);
  // 數(shù)據(jù)ID
  const [dataId, setDataid] = useState('');
  // 標題
  const [title, setTitle] = useState('');
  // 時間區(qū)間, 默認為至今一周時間
  const now = Date.now();
  const [timeRange, setTimeRange] = useState([now - 1000 * 60 * 60 * 24 * 7, now]);
  // 數(shù)據(jù)列表
  const [dataList, setDataList] = useState([]);
  
  
  
  // 點擊搜索按鈕
  function handleBtnClick() {
    // ②點擊按鈕后請求數(shù)據(jù)
    const params = {};
    title && (params.title = title);
    dataId && (params.dataId = dataId);
    params.startTime = String(timeRange[0]);
    params.endTime = String(timeRange[1]);
    doGet(params);
  }
  
  // ③data改變后，重新渲染列表。
  // 這里相當于 componentDidUpdate。當data發(fā)生改變時，重新渲染頁面
  useEffect(() => {
    setDataList(data);
  }, [data]);
  
  // ④首次進入頁面時，無任何篩選項。拉取數(shù)據(jù)，渲染頁面。
  // useEffect第二個參數(shù)為一個空數(shù)組，相當于在 componentDidMount 時執(zhí)行該「副作用」
  useEffect(() => {
    doGet({});
  }, []);


  return <section className="app">
    <Title title="數(shù)據(jù)查詢" />
    <Tabs label="類型" tabs={tabs} tab={tab} onChange={setTab} />
    <Input value={dataId} placeholder="請輸入數(shù)據(jù)ID" onChange={setDataid}>ID</Input>
    <Input value={title} placeholder="請輸入數(shù)據(jù)標題" onChange={setTitle}>標題</Input>
    <TimeRange label="數(shù)據(jù)時間" value={timeRange} onChange={handleTimeChange}/>
    <article className="btn-container">
      <Button type="primary" isLoading={isLoading} onClick={handleBtnClick}>
        查詢          
      </Button>
    </article>
    <Table dataList={dataList}></Table>
  </section>
};

關于React Hooks的一些思考

使用hooks寫完這個需求，最直觀的感受就是，代碼寫起來很爽。不需要像以前那樣寫很多的setState。其次就是

hooks的api設計得很優(yōu)秀，一個useState的就能將【狀態(tài)】和【變更狀態(tài)的邏輯】兩兩配對。React的基本思想就是【數(shù)據(jù)到視圖的映射】，在hooks中，使用useEffect來表明其中的【副作用】，感覺react官方也傾向于不區(qū)分componentDidMount和componentDidUpdate。

從api設計就能看出，hooks提倡組件狀態(tài)細粒度地拆分。在一個hooks組件中，可能包含很多的狀態(tài)，如果用戶的某些操作，需要同時修改兩個狀態(tài)，那么我需要分別調(diào)用這兩個狀態(tài)的修改邏輯，這樣會導致組件被重新render兩次。而在使用class寫法的組件中，只需要一次setState就好。這樣看來，hooks中render兩次的操作，可能會帶來些許的性能問題 ? 這就要求我們在設計組件結構和state時，多斟酌，多抽象。

關于“react hooks的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

當前名稱：reacthooks的示例分析-創(chuàng)新互聯(lián)
標題路徑：http://chinadenli.net/article0/cespoo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供關鍵詞優(yōu)化、品牌網(wǎng)站建設、搜索引擎優(yōu)化、商城網(wǎng)站、網(wǎng)站設計、云服務器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)