ReactJS笔记03--状态

最新推荐文章于 2024-08-17 20:24:22 发布

greenboy1

最新推荐文章于 2024-08-17 20:24:22 发布

阅读量180

点赞数 1

CC 4.0 BY-SA版权

分类专栏： reactjs

本文链接：https://blog.youkuaiyun.com/greenboy1/article/details/51914043

reactjs 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了React中的状态管理概念，包括getInitialState和setState两个关键函数的作用及使用方法，并通过一个计数器示例展示了如何利用这两个函数进行状态管理和UI更新。

在说状态之前先了解两个函数

一个是：getInitialState

FB的解释：

Invoked once before the component is mounted. The return value will be used as the initial value of this.state.

翻译过来就是：

在组件挂载之前调用一次。返回值将会作为 this.state 的初始值

第二个函数：setState

FB的解释：

Performs a shallow merge of nextState into current state. This is the primary method you use to trigger UI updates from event handlers and server request callbacks.

翻译：

合并 nextState 和当前 state（PS：这里其实就是将下一个状态的值赋值给当前状态）。这是在事件处理函数中和请求回调函数中触发 UI 更新的主要方法。另外，也支持可选的回调函数，该函数在 setState 执行完毕并且组件重新渲染完成之后调用。

**注意：
绝对不要直接改变 this.state，因为在之后调用 setState() 可能会替换掉你做的更改。把 this.state 当做不可变的**

好吧了解了函数后咱们来个代码：

var ClcikApp = React.createClass({
        getInitialState:function() {
            return {
                clickCount: 0,
            }
        },
        handleClick:function(){  //注意这里只能通过setstate方法更改this.state的值
            this.setState({
                clickCount: this.state.clickCount + 1
            })
        },
        render:function(){
            return(
                <div>
                    <h2> click </h2>
                    <button onClick={this.handleClick}>click me</button>
                    <p> all click count:{this.state.clickCount}</p>
                </div>
            )
        }
    })
var clickCom = ReactDOM.render(
    <ClcikApp/>,
    document.getElementById("content")
)

这里写图片描述