欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

記錄一次完整的react hooks實(shí)踐

 更新時(shí)間:2019年03月11日 14:23:07   作者:CoyPan  
這篇文章主要介紹了記錄一次完整的react hooks實(shí)踐,通過一個(gè)簡(jiǎn)單示例,介紹了react hooks,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

寫在前面

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

需求描述

需求很簡(jiǎn)單,部門內(nèi)部的一個(gè)數(shù)據(jù)查詢小工具。大致長(zhǎng)成下面這樣:

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

需求實(shí)現(xiàn)

使用React Class Component的寫法

如果使用以前的class寫法,簡(jiǎn)單寫一下,代碼可能大概長(zhǎng)成下面這樣:

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="標(biāo)題" 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的寫法

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

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

本次需求其實(shí)就兩個(gè)邏輯:1、輸入篩選項(xiàng) 。2、查詢數(shù)據(jù)

主頁(yè)面一個(gè)hooks,處理篩選項(xiàng)以及數(shù)據(jù)展示。數(shù)據(jù)請(qǐng)求邏輯單獨(dú)弄一個(gè)hooks。

主頁(yè)面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('');
  // 標(biāo)題
  const [title, setTitle] = useState('');
  // 時(shí)間區(qū)間, 默認(rèn)為至今一周時(shí)間
  const now = Date.now();
  const [timeRange, setTimeRange] = useState([now - 1000 * 60 * 60 * 24 * 7, now]);
  // 數(shù)據(jù)列表
  const [dataList, setDataList] = useState([]);

  // 點(diǎn)擊搜索按鈕
  function handleBtnClick() {
    // 請(qǐng)求數(shù)據(jù)
    ...
  }

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

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

數(shù)據(jù)請(qǐng)求hooks:

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


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

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

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


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

  return {
    isLoading,
    data,
    doGet
  }
}

export default MyFecth;

在主頁(yè)面中,引用數(shù)據(jù)請(qǐng)求hooks:

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

const App = () => {

  // ①使用數(shù)據(jù)請(qǐng)求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('');
  // 標(biāo)題
  const [title, setTitle] = useState('');
  // 時(shí)間區(qū)間, 默認(rèn)為至今一周時(shí)間
  const now = Date.now();
  const [timeRange, setTimeRange] = useState([now - 1000 * 60 * 60 * 24 * 7, now]);
  // 數(shù)據(jù)列表
  const [dataList, setDataList] = useState([]);
  
  
  
  // 點(diǎn)擊搜索按鈕
  function handleBtnClick() {
    // ②點(diǎn)擊按鈕后請(qǐng)求數(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改變后,重新渲染列表。
  // 這里相當(dāng)于 componentDidUpdate。當(dāng)data發(fā)生改變時(shí),重新渲染頁(yè)面
  useEffect(() => {
    setDataList(data);
  }, [data]);
  
  // ④首次進(jìn)入頁(yè)面時(shí),無任何篩選項(xiàng)。拉取數(shù)據(jù),渲染頁(yè)面。
  // useEffect第二個(gè)參數(shù)為一個(gè)空數(shù)組,相當(dāng)于在 componentDidMount 時(shí)執(zhí)行該「副作用」
  useEffect(() => {
    doGet({});
  }, []);


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

關(guān)于React Hooks的一些思考

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

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

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

關(guān)于hooks的一些FAQ,官方也有很棒的文檔:https://reactjs.org/docs/hooks-faq.html

寫在后面

本文通過工作中的一個(gè)小需求,完成了一次react hooks的實(shí)踐,不過上述代碼依然有很多需要優(yōu)化的地方。這次實(shí)踐讓我最直觀的接觸了react hooks,也幫助自己進(jìn)一步理解了react團(tuán)隊(duì)的一些思想。符合預(yù)期。

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • 教你快速搭建 React Native 開發(fā)環(huán)境

    教你快速搭建 React Native 開發(fā)環(huán)境

    這篇文章主要介紹了搭建 React Native 開發(fā)環(huán)境的詳細(xì)過程,本文通過圖文指令給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2022-08-08
  • 使用Redux處理異步問題

    使用Redux處理異步問題

    這篇文章主要介紹了使用Redux處理異步問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • React中redux的使用詳解

    React中redux的使用詳解

    Redux 是一個(gè)狀態(tài)管理庫(kù),它可以幫助你管理應(yīng)用程序中的所有狀態(tài),Redux的核心概念之一是Store,它表示整個(gè)應(yīng)用程序的狀態(tài),這篇文章給大家介紹React中redux的使用,感興趣的朋友一起看看吧
    2023-12-12
  • useEffect支持async及await使用方式

    useEffect支持async及await使用方式

    這篇文章主要為大家介紹了useEffect支持async及await的使用方式示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-07-07
  • React使用Context與router實(shí)現(xiàn)權(quán)限路由詳細(xì)介紹

    React使用Context與router實(shí)現(xiàn)權(quán)限路由詳細(xì)介紹

    這篇文章主要介紹了React使用Context與router實(shí)現(xiàn)權(quán)限路由的詳細(xì)過程,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧
    2023-01-01
  • React中進(jìn)行條件渲染的實(shí)現(xiàn)方法

    React中進(jìn)行條件渲染的實(shí)現(xiàn)方法

    React是一種流行的JavaScript庫(kù),它被廣泛應(yīng)用于構(gòu)建Web應(yīng)用程序,在React中,條件渲染是一個(gè)非常重要的概念,它允許我們根據(jù)不同的條件來呈現(xiàn)不同的內(nèi)容,在本文中,我們將探討React如何進(jìn)行條件渲染,需要的朋友可以參考下
    2023-11-11
  • react antd實(shí)現(xiàn)動(dòng)態(tài)增減表單

    react antd實(shí)現(xiàn)動(dòng)態(tài)增減表單

    antd是react流行的ui框架庫(kù),本文主要介紹了react antd實(shí)現(xiàn)動(dòng)態(tài)增減表單,分享給大家,感興趣的小伙伴們可以參考一下
    2021-06-06
  • React 三大屬性之state的使用詳解

    React 三大屬性之state的使用詳解

    這篇文章主要介紹了React 三大屬性之state的使用詳解,幫助大家更好的理解和學(xué)習(xí)使用React,感興趣的朋友可以了解下
    2021-04-04
  • react-router-dom v6版本跳轉(zhuǎn)路徑的實(shí)現(xiàn)方法

    react-router-dom v6版本跳轉(zhuǎn)路徑的實(shí)現(xiàn)方法

    這篇文章主要介紹了react-router-dom v6版本跳轉(zhuǎn)路徑的實(shí)現(xiàn)方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-03-03
  • React中常見的動(dòng)畫實(shí)現(xiàn)的幾種方式

    React中常見的動(dòng)畫實(shí)現(xiàn)的幾種方式

    本篇文章主要介紹了React中常見的動(dòng)畫實(shí)現(xiàn)的幾種方式,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2018-01-01

最新評(píng)論