一次完整的react hooks實踐

時間  2019-11-06
標籤 一次 完整 react hooks 實踐 欄目 React 简体版
原文   原文鏈接

寫在前面

本文首發於公衆號：符合預期的CoyPanjavascript

React在16.8版本正式發佈了Hooks。關注了好久，最近正好有一個小需求，趕忙來試一下。html

需求描述

需求很簡單，部門內部的一個數據查詢小工具。大體長成下面這樣：前端

用戶首次訪問頁面，會拉取數據展現。輸入篩選條件，點擊查詢後，會再次拉取數據在前端展現。java

需求實現

使用React Class Component的寫法

若是使用之前的class寫法，簡單寫一下，代碼可能大概長成下面這樣：react

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的相關內容，這裏就不贅述了。能夠直接查看react官方文檔，寫得很是好。json

reactjs.org/docs/hooks-…api

本次需求其實就兩個邏輯：一、輸入篩選項 。二、查詢數據數組

主頁面一個hooks，處理篩選項以及數據展現。數據請求邏輯單獨弄一個hooks。app

主頁面hooks：async

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

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

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

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

上面的代碼，完成了篩選項的處理邏輯。下面來實現負責數據請求的hooks.

數據請求hooks：

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


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

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

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


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

    return {
        isLoading,
        data,
        doGet
    }
}

export default MyFecth;
複製代碼

在主頁面中，引用數據請求hooks：

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

const App = () => {

    // ①使用數據請求hooks
    const { isLoading, data, doGet } =  MyFecth('http://xxx');
    
    // 數據類型
    const tabs = [{ key: 1, value: '類型1' }, { key: 0, value: '類型2' }];
    const [tab, setTab] = useState(1);
    // 數據ID
    const [dataId, setDataid] = useState('');
    // 標題
    const [title, setTitle] = useState('');
    // 時間區間, 默認爲至今一週時間
    const now = Date.now();
    const [timeRange, setTimeRange] = useState([now - 1000 * 60 * 60 * 24 * 7, now]);
    // 數據列表
    const [dataList, setDataList] = useState([]);
    
    
    
    // 點擊搜索按鈕
    function handleBtnClick() {
        // ②點擊按鈕後請求數據
        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發生改變時，從新渲染頁面
    useEffect(() => {
        setDataList(data);
    }, [data]);
    
    // ④首次進入頁面時，無任何篩選項。拉取數據，渲染頁面。
    // useEffect第二個參數爲一個空數組，至關於在 componentDidMount 時執行該「反作用」
    useEffect(() => {
        doGet({});
    }, []);


    return <section className="app">
        <Title title="數據查詢" />
        <Tabs label="類型" tabs={tabs} tab={tab} onChange={setTab} />
        <Input value={dataId} placeholder="請輸入數據ID" onChange={setDataid}>ID</Input>
        <Input value={title} placeholder="請輸入數據標題" onChange={setTitle}>標題</Input>
        <TimeRange label="數據時間" 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設計得很優秀，一個useState的就能將【狀態】和【變動狀態的邏輯】兩兩配對。React的基本思想就是【數據到視圖的映射】，在hooks中，使用useEffect來代表其中的【反作用】，感受react官方也傾向於不區分componentDidMount和componentDidUpdate。

從api設計就能看出，hooks提倡組件狀態細粒度地拆分。在一個hooks組件中，可能包含不少的狀態，若是用戶的某些操做，須要同時修改兩個狀態，那麼我須要分別調用這兩個狀態的修改邏輯，這樣會致使組件被從新render兩次。而在使用class寫法的組件中，只須要一次setState就好。這樣看來，hooks中render兩次的操做，可能會帶來些許的性能問題 ? 這就要求咱們在設計組件結構和state時，多斟酌，多抽象。

關於hooks的一些FAQ，官方也有很棒的文檔：

reactjs.org/docs/hooks-…

寫在後面

本文經過工做中的一個小需求，完成了一次react hooks的實踐，不過上述代碼依然有不少須要優化的地方。此次實踐讓我最直觀的接觸了react hooks，也幫助本身進一步理解了react團隊的一些思想。符合預期。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程