Ract基础之恰当的获取数据二

1、创建一个组件来从服务端获取数据，并展示，如下

import React from 'react'

class Gists extends React.Component{
    constructor(props) {
        super(props);
        this.state = {
            gists:[]
        }
    }
    componentDidMount() {
        console.log('向服务端发起请求获取数据，并更新状态')
        this.setState({
            gists:[{id:1,username:'张三',age:11}, {id:2,username: '李四', age: 12}]
        })
    }
    render() {
        return (
            <ul>
                {
                    this.state.gists.map(gist => <li key={gist.id}>{gist.username}:{gist.age}</li>)
                }
            </ul>
        )
    }
}

以上组件可以工作正常，不过正如前一章所说，我们可以将渲染逻辑放入一个独立的子组件，现在，常见的一个需求是多出代码都要从服务端获取数据，但我们并不想复制代码。要想从组件中移除数据逻辑并在整个应用中复用，其中一个解决方案就是创建高阶组价。
高阶组件替代增强后的组件来加载数据，然后以prop的形式向子组件提供数据
将用户信息用表格形式展示，把获取数据的逻辑抽出来，用withData高阶函数实现

import React from 'react'

// dealReaultFn: 对返回后的数据进行解析封装
export const withData = (url, dealReaultFn) => Component => (
    class extends React.Component{
        constructor(props) {
            super(props);
            this.state = {
                data:[]
            }
        }
        componentDidMount() {
            console.log('向服务端发起请求，URL 是' + url)
            let gists = dealReaultFn();
            this.setState({
                data:gists
            })
        }
        render() {
            return <Component {...this.props} {...this.state}/>
        }
    }
)


import React from 'react'
import {withData} from "./WithData";
import Table from "./Table";



export const TablewithUserInfo = (props) => {
    const UserInfoTable = withData("/website/userinfo", dealReaultFn)(Table)

    function dealReaultFn(result){
        console.log("对result进行解析处理后返回结果")
        return [{id:1,username:'张三',age:11}, {id:2,username: '李四', age: 12}]
    }

    return (
        <UserInfoTable />
    )
}

import React from 'react'

export default class Table extends React.Component{
    constructor(props) {
        super(props);
    }
    render() {
        const {data} = this.props
        return (
            <table>
                <tbody>
                    <tr>
                        <td>用户名</td>
                        <td>年龄</td>
                    </tr>
                    {
                        data.map(obj => <tr key={obj.id}>
                            <td>{obj.username}</td>
                            <td>{obj.age}</td>
                        </tr>)
                    }
                </tbody>

            </table>
        )
    }
}