成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

React入門0x006: State

TNFE / 2333人閱讀

摘要：概述這一章講，是的核心，也算是的核心思想都很核心啊。但是接著我們又搞了一個定時器，每秒執(zhí)行一直函數(shù)，將修改為最新的時間。就完成了視圖的更新。參數(shù)一是要更新的數(shù)據(jù)，我們只需要傳輸我們要更新的數(shù)據(jù)即可，對于不需要更新的數(shù)據(jù)，則不需要理睬。

0x000 概述

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

0x001 問題

在上一章節(jié)的栗子中，我們?nèi)〕鲆粋€栗子稍作修改：

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

    render() {
        return 
{this.props.date}

    }
}

let date=Date()

ReactDom.render(
    ,
    document.getElementById("app")
)

查看瀏覽器：

已經(jīng)知道了如何渲染數(shù)據(jù)，但是怎樣更新數(shù)據(jù)呢？比如我希望栗子中的date根據(jù)時間變化，我們可以如下做：

setInterval(() => {
    date = Date()
    ReactDom.render(
        ,
        document.getElementById("app")
    )
}, 1000)

但是React提供了一個更優(yōu)雅的方式，那就是state。

0x002 state

看栗子：

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

    render() {
        return 
{this.state.date}

    }
}
ReactDom.render(
    ,
    document.getElementById("app")
)

我們聲明了一個state為{date:Date()}，然后綁定到視圖上，這樣視圖就顯示了state.date了，這是毋庸置疑的，我們一直都是這么做。但是接著我們又搞了一個定時器，每秒執(zhí)行一直setState函數(shù)，將date修改為最新的時間。就完成了視圖的更新。

0x003 setState

查看setState文檔：

React.Component.setState(updater[,callback])
- updater: 更新的數(shù)據(jù)
- callback: 可選，更新之后的回調(diào)

該函數(shù)是由React.Component提供的，而我們在聲明該組件的時候繼承了Component，所以也就有了這個方面。
參數(shù)一是要更新的數(shù)據(jù)，我們只需要傳輸我們要更新的數(shù)據(jù)即可，對于不需要更新的數(shù)據(jù)，則不需要理睬。
參數(shù)二是可選的，接受一個回調(diào)函數(shù)，因為該方法是異步的，如果需要再數(shù)據(jù)更新完成之后再執(zhí)行某些操作，可以在這里完成

我們可以這么理解這個函數(shù)，我們是這么調(diào)用的:

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

我們假想它在執(zhí)行的時候是這么執(zhí)行的

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

還可以假想他的實現(xiàn)是這么實現(xiàn)的：

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

當(dāng)然不管是setState的執(zhí)行流程，還是完整聲明，都不是這樣的，但是現(xiàn)在我們都不必深入，只是為了簡單而這么理解而已。

0x004 資源

react

transform-react-jsx

源碼

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97045.html

相關(guān)文章

  • Router入門0x205: react-route + redux + react 集成

    摘要：概述這一章終于大集成了集成源碼效果說明集成主要是用到庫集成源碼效果說明主要用到庫，是針對庫在環(huán)境下的封裝組件，注入等屬性接管跟組件指定路由和組件的對應(yīng)關(guān)系集成源碼引入相關(guān)的包和鏈接組件效果說明主要用到庫都是用的接 0x000 概述 這一章終于大集成了 0x001 集成react 源碼 import React from react import ReactDom from rea...

    yiliang 評論0 收藏0

  • React入門0x008: 生命周期

    0x000 概述 上一章說明了生命周期的概念，本質(zhì)上就是框架在操作組件的過程中暴露出來的一系列鉤子，我們可以選擇我們需要的鉤子，完成我們自己的業(yè)務(wù)，以下講的是react v16.3以下的生命周期，v16.3以及以上的版本有所不同 0x001 組件掛載 以下是組件掛載的過程中觸發(fā)的聲明周期： class App extends React.Component { constructor(pr...

    loonggg 評論0 收藏0

  • Router入門0x204: react-route簡單栗子

    摘要：概述這一章仔細講一講的使用栗子簡單使用源碼簡單使用首頁文章我的首頁文章我的效果帶導(dǎo)航激活效果源碼帶導(dǎo)航效果首頁文章我的首頁文章我的效果說明增強版，如果當(dāng)前路由命中，將會啟用或者。 0x000 概述 這一章仔細講一講 react-route 的使用栗子 0x001 簡單使用 源碼 import React from react import ReactDom from react-d...

    番茄西紅柿 評論0 收藏0

  • Router入門0x203: react、react-route、react-route-dom

    摘要：概述上一章使用的是自己實現(xiàn)的，當(dāng)然已經(jīng)有現(xiàn)成的庫給我們用了，那就是?？偨Y(jié)看透它，然后掌握它資源源碼 0x000 概述 上一章使用的是自己實現(xiàn)的route，當(dāng)然已經(jīng)有現(xiàn)成的庫給我們用了，那就是react-route。 0x001 history Api說明 在說這個庫之前，得先對history新的api做一個了解 window.history.pushState(data,title...

    luxixing 評論0 收藏0

  • Redux入門0x101: 簡介及`redux`簡單實現(xiàn)

    摘要：在我看來它們的關(guān)系不會比共用開頭更深了，所以我就重新開了一個頭，但其實是基于前面寫的資源中文文檔英文文檔官方視頻學(xué)習(xí)歷程當(dāng)初為了學(xué)習(xí)，看了許多的材料，中途曾經(jīng)放棄兩次，但是最后還是勇敢的拿起了它，現(xiàn)在終于勉強弄懂。 0x000 概述 這一章開始講redux，其實是承接前面的react，但其實作為一個框架來說，redux和react并沒有太多的關(guān)系，本身是獨立存在的。在我看來它們的關(guān)系不...

    ssshooter 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<