react 寫一個預加載表單數據的裝飾器

說明

• 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>
    }
}
複製代碼