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 
    
      { data }
    
}}复制代码

一般情况当然是在 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 
    ;            }        };    };}复制代码

上面涉及到了高阶组件的使用，有兴趣的同学可以研究一下 react 高阶组件，其实 react 的高阶组件就是包装了另外一个组件的 react 组件

然后我们就可以这样来使用封装好的装饰器了

import React, { Component } from 'react';import withPreload from './withPreload';// 虽然我们费了很多功夫完成了装饰器，但是现在我们只需要这样一句话就可以预加载我们需要的数据了，在很多页面都可以复用@withPreload({    url: getData('/xxx/xxx/test')})class index extends Component{    render(){        return 
    
     {this.props.loadData.data}
    
    }}复制代码