React入门0x006: State

TNFE 发布于2019-08-23 11:29 / 2194人阅读

摘要：概述这一章讲，是的核心，也算是的核心思想都很核心啊。但是接着我们又搞了一个定时器，每秒执行一直函数，将修改为最新的时间。就完成了视图的更新。参数一是要更新的数据，我们只需要传输我们要更新的数据即可，对于不需要更新的数据，则不需要理睬。

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

源码

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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