在React当中，当你更新组件的state，然后新的state就会重新渲染到页面中。在这个时候不需要你操作任何DOM。你也可以认为组件在React当中是一个状态机（State Machines）。当用户进行操作时会实现不同的状态，然后再渲染到你的页面中，让你的页面与数据始终保持一致。
如果对状态不好理解的朋友，你可以认为状态即是数据！
现在我们先来通过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也会发生相对应的变化！
……
今天先到这！哈，未完，待续！
网友评论