React入門0x006: State

TNFE 發布于2019-08-23 11:29 / 2299人閱讀

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

0x000 概述

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

0x001 問題

在上一章節的栗子中，我們取出一個栗子稍作修改：

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

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

let date=Date()

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

查看瀏覽器：

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

setInterval(() => {
    date = Date()
    ReactDom.render(
        ,
        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 {this.state.date}
    }
}
ReactDom.render(
    ,
    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

源碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97045.html

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

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

yiliang 2019-08-23 12:16 評論0 收藏0
React入門0x008: 生命周期

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

loonggg 2019-08-23 11:31 評論0 收藏0
Router入門0x204: react-route簡單栗子

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

番茄西紅柿 2019-08-23 12:16 評論0 收藏0
Router入門0x203: react、react-route、react-route-dom

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

luxixing 2019-08-23 12:15 評論0 收藏0
Redux入門0x101: 簡介及`redux`簡單實現

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

ssshooter 2019-08-23 11:40 評論0 收藏0