在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时隐藏 接下来要完成的二件事。
<!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也会发生相对应的变化! …… 今天先到这!哈,未完,待续!