react 点击下载,后台接到请求,在列表里添加数据,前端获取后台数据实现实时更新

react 本来就可以通过数据来对页面进行更新渲染。

我写了一个例子，你可以看下。我使用setInterval来模拟了数据的更新。

网页链接

import React, { Component } from 'react'

import { render } from 'react-dom'

import Hello from './Hello'

import './style.css'

class Test extends Component {

render() {

 return (

    <div>{this.props.data}</div>

    )

 }

}

class App extends Component {

    constructor() {

        super()

        this.data = 1

        this.state = {

            name: 'React'

        }

    }

    componentDidMount() {

        setInterval(() => {

        this.setState({ data: this.data++ })

        }, 2000)

    }

    render() {

        return (

            <div>

                <Hello name={this.state.name} />

            <p>

                Start editing to see some magic happen :)

            </p>

                <Test data={this.state.data} />

            </div>

        )

    }

}

render(<App />, document.getElementById('root'))

你获取到数据后，然后调用setstate方法，改变状态，然后你的组件要定义个接受状态改变的地方，比如value={this.state.*}，一旦检测到你状态改变就会去render组件重新绘制，并且由于value的值和状态绑定所以value也会变。

---