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用于组件通讯进行传值。

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