React state（状态）
程序员文章站
2022-07-03 08:58:32
...
state状态
state和props的区别
props是组件对外的接口state是组件对内的接口
组件内可以引用其他组件组件之间的引用就形成了一个树状的接口如果下层组件需要使用上层组件的数据
上曾组建就可以通过下层组件中props来进行数据的传递因此props就是组件对外的接口
组件除了使用上层组件传递的数据之外他自身也可能有需要管理的数据这个对内管理数据的属性就是state
主要区别：
1.state是可变的
2.props对于当前页面的组件来说他是只读如果我们想修改props中的数据那么我们修改传递给当前组件数据的父组件中的内容
react中我们只需要关心的是数据当数据改变的时候页面就会自动的发生改变
状态等同于页面中的数据状态/数据改变了-—-贞面中对应的数据绑定内容就会被react自动的进行改变
声明式渲染–一切的数据改变操作都不用我们关心只需要我们生命好数据react就会自动的对于数据进行相应的改变
如果想使用状态 那么就不能使用无状态组件
实践
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>state(状态)</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<!--创建dom根节点一个页面中需要有一个根节点 这个节点下的内容就会被react所管理-->
<div id="example">
</div>
<script type="text/babel">
//如果想使用状态，那么不能使用无状态组件
class Com extends React.Component{
//在ES6中不管子类写不写constructor在new实例的时候都会上constructor。
//我们可以不写但是如果我们写了constructor之后就必须在其中写上super（）就是指向父类的构造方法
constructor(props) {
//如果想在constructor使用props 那么super中必须写上props
super(props);
//定义state
this.state={
name:'MW'
}
}
render(){
return(
<div>
<button onClick={()=>{this.setState({name:'CZZ'})}}>点击我改变state.name的数据</button>
<div>我是一个组件---{this.state.name}</div>
</div>
)
}
}
ReactDOM.render(<Com/>,document.getElementById("example"));
</script>
</body>
</html>