React-State状态的使用

导语:在React中,核心的思想就是组件化思想,而组件中最重要的概念是Sate(状态),state是组件渲染时的数据依据。

上节我们使用的props也可以为组件提供数据,它们之间的区别是State是可变的,Props对于使用它的组件来说,是只读的,要想修改Props,只能通过该组件的父组件修改。

本节内容我们来看一下state是如何使用的。

回顾上节内容,我们再向组件传值时,在调用时定义内容是在字符串中写死的,只能手动进行修改:

非常感谢大家支持我们的课程

如果要动态修改组件内容,我们就要使用state。

注意:要想定义state,需要在继承自Component的组件的类中。目前我们有App.js和Person.js两个组件, 来看一下各自定义形式:

classAppextendsComponent{}

constperson= (props)=>{}

我们可以在App.js组件中进行定义state,Person.js组件如要需要定义,需要引入Component并继承。

定义state,首先来到App.js,具体实现代码如下:

classAppextendsComponent{

state= {

persons:[

{name:'Lucy',age:18},

{name:'Lily',age:28},

{name:'Mary',age:38},

{name:'Candy',age:22}]

}

render() {

return(...);

}

}

exportdefaultApp;

接下来是State的使用, 具体定义代码如下:

render() {

return(

非常感谢大家支持我们的课程

)

}

效果图如下:

如果要修改state,首先定义button并添加点击事件,具体代码定义如下:

更改状态值

// 在render上面定义方法,用来更改state

switchNameHandler= ()=>{

console.log('hello')

}

调用方法

更改状态值

这里调用时,方法名后面并没有添加'()',如果添加括号,事件会自执行一次。接下来点击按钮并查看效果:

因此事件可以正常执行,接下来在事件中进行state更改,在react中,并不能直接更改state,需要通过setState(),具体代码定义如下:

switchNameHandler= ()=>{

// console.log('hello')

this.setState({

persons:[

{name:'Lucy',age:100},

{name:'Lily',age:28},

{name:'Mary',age:38},

{name:'Candy',age:22}]

})

}

点击按钮,效果图如下:

最后我们可以总结一下state和props的使用区别:state用于改变组件内容状态的值,props用于组件通讯进行传值。

结语:下节内容我们将介绍组件通讯-事件的传递。感谢大家的关注!

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180725G0NKVB00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券