React入门0x006: State

0x000 概述

这一章讲state，state是MVVM的核心，也算是React的核心思想......都很核心啊。

0x001 问题

在上一章节的栗子中，咱们取出一个栗子稍做修改：

class App extends React.Component {
    constructor() {
        super()
    }

    render() {
        return <p>{this.props.date}</p>
    }
}

let date=Date()

ReactDom.render(
    <App date={date}></App>,
    document.getElementById('app')
)

查看浏览器：

已经知道了如何渲染数据，可是怎样更新数据呢？好比我但愿栗子中的date根据时间变化，咱们能够以下作：

setInterval(() => {
    date = Date()
    ReactDom.render(
        <App date={date}></App>,
        document.getElementById('app')
    )
}, 1000)

可是React提供了一个更优雅的方式，那就是state。

0x002 state

看栗子：

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            date: Date()
        }
        setInterval(() => {
            this.setState({
                date: Date()
            })
        }, 1000)
    }

    render() {
        return <p>{this.state.date}</p>
    }
}
ReactDom.render(
    <App></App>,
    document.getElementById('app')
)

咱们声明了一个state为{date:Date()}，而后绑定到视图上，这样视图就显示了state.date了，这是毋庸置疑的，咱们一直都是这么作。可是接着咱们又搞了一个定时器，每秒执行一直setState函数，将date修改成最新的时间。就完成了视图的更新。

0x003 setState

查看setState文档：

React.Component.setState(updater[,callback])
- updater: 更新的数据
- callback: 可选，更新以后的回调

该函数是由React.Component提供的，而咱们在声明该组件的时候继承了Component，因此也就有了这个方面。
参数一是要更新的数据，咱们只须要传输咱们要更新的数据便可，对于不须要更新的数据，则不须要理睬。
参数二是可选的，接受一个回调函数，由于该方法是异步的，若是须要再数据更新完成以后再执行某些操做，能够在这里完成

咱们能够这么理解这个函数，咱们是这么调用的:

this.setState({
    date: Date()
})

咱们假想它在执行的时候是这么执行的

this.state.date=Date()
this.render()

还能够假想他的实现是这么实现的：

class Component{
    ...
    setState(updator, callback){
        this.state={...this.state, ...updator}
        this.callback?callback():null
    }
    ...
}

固然无论是setState的执行流程，仍是完整声明，都不是这样的，可是如今咱们都没必要深刻，只是为了简单而这么理解而已。

0x004 资源

• react
• transform-react-jsx
• 源码