浅谈React之状态(State)
在react当中，当你更新组件的state，然后新的state就会重新渲染到页面中。在这个时候不需要你操作任何dom。你也可以认为组件在react当中是一个状态机（state machines）。当用户进行操作时会实现不同的状态，然后再渲染到你的页面中，让你的页面与数据始终保持一致。
如何定义state
定义一个合适的state，是正确创建组件的第一步。state必须能代表一个组件ui呈现的完整状态集，即组件的任何ui改变，都可以从state的变化中反映出来；同时，state还必须是代表一个组件ui呈现的最小状态集，即state中的所有状态都是用于反映组件ui的变化，没有任何多余的状态，也不需要通过其他状态计算而来的中间状态。
组件中用到的一个变量是不是应该作为组件state，可以通过下面的4条依据进行判断：
1.这个变量是否是通过props从父组件中获取？如果是，那么它不是一个状态。
2.这个变量是否在组件的整个生命周期中都保持不变？如果是，那么它不是一个状态。
3.这个变量是否可以通过其他状态（state）或者属性(props)计算得到？如果是，那么它不是一个状态。
4.这个变量是否在组件的render方法中使用？如果不是，那么它不是一个状态。这种情况下，这个变量更适合定义为组件的一个普通属性，例如组件中用到的定时器，就应该直接定义为this.timer，而不是this.state.timer。
如果对状态不好理解的朋友，你可以认为状态即是数据！
state 与 props 区别
props 是组件对外的接口，state 是组件对内的接口。组件内可以引用其他组件，组件之间的引用形成了一个树状结构（组件树），如果下层组件需要使用上层组件的数据或方法，上层组件就可以通过下层组件的props属性进行传递，因此props是组件对外的接口。组件除了使用上层组件传递的数据外，自身也可能需要维护管理数据，这就是组件对内的接口state。根据对外接口props 和对内接口state，组件计算出对应界面的ui。
主要区别：
- state是可变的，是一组用于反映组件ui变化的状态集合；
- 而props对于使用它的组件来说，是只读的，要想修改props，只能通过该组件的父组件修改。
在组件状态上移的场景中，父组件正是通过子组件的props, 传递给子组件其所需要的状态
现在我们先来通过es6类react.component完成一个通过点击按钮对div进行显示与隐藏的操作，效果如下：
咱们先将页面进行初始化：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
#mydiv{
width:200px;
height:400px;
background:red;
color:yellow;
border:1px solid green;
}
</style>
<script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react.development.js"></script>
<script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react-dom.development.js"></script>
<script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/babel.min_.js"></script>
</head>
<body>
<div id="wrap"></div>
</body>
<script type="text/babel">
class mycomponent extends react.component{
constructor(props){
super(props);
// 为当前状态添加isshow属性
this.state={
// 值为true显示，false为隐藏。默认值为true。
isshow:true
}
}
render(){
//返回组件的初始内容
return <div>
<input type="button" value="显示与隐藏"/>
<div id="mydiv">我在这里呀！</div>
</div>
}
}
reactdom.render(
<mycomponent/>,
document.queryselector("#wrap")
)
</script>
</html>
到目前为止，页面已经初始化完毕了。在上面的代码中为state添加了一个默认值为true的属性isshow。isshow用来控制div的显示与隐藏！当isshow为true时显示，为false时隐藏
接下来要完成的二件事。
第一件事是要为按钮增加一个点击事件，事件与changestate方法进行绑定。当点击按钮时改变isshow的状态，也就是要为 isshow进行取反操作。
注意：
1、onclick中的c要大写。
2、onclick后跟的方法不要用引号包裹，而是用{}
3、在es6的class中react是不会自动绑定this的，所以需要自己通过bind绑定。
4、changestate方法中，不能直接修改isshow的值，而是需要借助setstate方法来进行设置。
第二件事是要为id为mydiv的div增加一个style属性，该属性要根据isshow的状态来对div进行显示与隐藏
注意：
1、style的值不要用双引号，而是用{}，否则会报错
最终版代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<style>
#mydiv{
width:200px;
height:400px;
background:red;
color:yellow;
border:1px solid green;
}
</style>
<script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react.development.js"></script>
<script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/react-dom.development.js"></script>
<script src="https://zhangpeiyue.com/wp-content/uploads/2018/08/babel.min_.js"></script>
</head>
<body>
<div id="wrap"></div>
</body>
<script type="text/babel">
class mycomponent extends react.component{
constructor(props){
super(props);
// 为当前状态添加isshow属性
this.state={
// 值为true显示，false为隐藏。默认值为true。
isshow:true
}
}
changestate(){
//此处不能直接修改isshow的值。而是需要借助setstate方法！
this.setstate({
//取反操作
isshow:!this.state.isshow
});
}
render(){
//返回组件的初始内容
return <div>
{/*在es6的class中react是不会自动绑定this的，所以需要自己绑定*/}
<input type="button" value="显示与隐藏" onclick={this.changestate.bind(this)} />
<div id="mydiv" style={{display:this.state.isshow?'block':'none'}}>
我在这里呀！
</div>
</div>
}
}
reactdom.render(
<mycomponent/>,
document.queryselector("#wrap")
)
</script>
</html>
由上面的示例可以发现，当你改变isshow的状态时，div也会发生相对应的变化！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： vue实现选项卡及选项卡切换效果
下一篇： 宝宝不宜吃的5种水果