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
• 源碼