react 寫一個預載入表單資料的裝飾器

Pandaaa發表於2018-07-20
React

說明

  • react 初學者
  • 怎麼使用裝飾器？

理解一下 react 中裝飾器的使用

需求分析

  • 每次我們在載入頁面的時候需要載入一些資料
import React, { Component } from 'react';
import http from 'utils/http';

class normalGetData extends Component{
    
componentDidMount() {
    this.getData();
}

getData = async () => {
    try {
        const data = await http(xxx);

        this.setState({
            data
        });
    } catch (error) {
        this.setState({
            error
        });
    }
};

render(){
    const { data } = this.state;
    return <div> { data }</div>
}

}
複製程式碼

一般情況當然是在 componentDidMount 的時候去獲取資料啦，然後放在 state 中，然後再 render 渲染資料。

使用裝飾器的方法，包裹一下我們常用的預載入資料，需要渲染的地方。

  • 這裡的包裹用到了Props Proxy(屬性代理模式 PP)

    • 不明白的同學可以看看 [react 高階元件 代理模式]

  • 新建一個 withPreload.js 檔案

import React, { Component } from 'react';
import http from 'utils/http';

export default function createWithPreload(config) {
//因為我們需要傳一個url 引數，所以暴露一個 func
    return function withPreload(WrappedComponent) {
        return class extends Component {
           
           // 還是和以前的寫法一樣 在 ComponentDidMount 的時候取資料
            componentDidMount() {
                this.getData();
            }

            getData = async () => {
               
                try {
                    // config 作為唯一的傳參
                    const data = await http(config);

                    this.setState({
                        data
                    });
                } catch (error) {
                    this.setState({
                        error
                    });
                }

            };

            render() {
                const { error, data } = this.state;

                if (error) {
                    return '資料錯啦: ' + ${error}
                }

                // 返回的到的資料 loadDtat={data}
                // 因為用到了 WrappedComponent 包裹起來，所以需要使用 {...this.props} 去傳遞 props 的值給子元件
                return <WrappedComponent {...this.props} loadData={data} />;
            }
        };
    };
}

複製程式碼

上面涉及到了高階元件的使用，有興趣的同學可以研究一下 react 高階元件，其實 react 的高階元件就是包裝了另外一個元件的 react 元件

  • 然後我們就可以這樣來使用封裝好的裝飾器了
import React, { Component } from 'react';
import withPreload from './withPreload';

// 雖然我們費了很多功夫完成了裝飾器，但是現在我們只需要這樣一句話就可以預載入我們需要的資料了，在很多頁面都可以複用

@withPreload({
    url: getData('/xxx/xxx/test')
})

class index extends Component{
    render(){
        return <div>{this.props.loadData.data}</div>
    }
}
複製程式碼

相關文章