react state状态

ゝ一世哀愁。 2021-07-24 22:27 436阅读 0赞

state
    		(1)存储组件内部状态数据
    		(2)setState修改值会引起视图重绘	
    
    	(1)设置state(设置后必须return,否则会报错)
    
    		1、getInitialState:function(){
    	
    			return {
    				对象格式内容数据
    			}
    		}
    		
    		2、state={键值对};  给组件对象添加state属性
    		3、constructor(props){super(props); this.state={键值对}}
    
    	(2)修改或添加state
    		this.setState是异步操作
    		
    		this.setState({
    			对象格式内容数据
    		},改变后的回调函数)
    
    	(3)获取state内的值
    
    		this.state.键名

代码示例:

<html>
    <head>
    	<meta charset="utf-8">
    	<title></title>
    	<script src="js/libs/browser.min.js"></script>
    	<script src="js/libs/react.js"></script>
    	<script src="js/libs/react-dom.js"></script>
    	<script src="js/libs/jquery-3.4.1.js"></script>
    
    	<style>
    		.d1{ 
    			color:orange;
    		}
    	</style>
    	
    </head>
    <body>
      <div class="big">
    
      </div>
      <div class="big2">
    
      </div>
      <div class='big3'>
    
      </div>
    
    	<script type="text/babel">
    		
    		var arr=[1,2,3,4,5];
    		var arr1=[<p>p1</p>,<p>p2</p>,<p>p3</p>];
    		var obj=[{ name:'jeff',age:18},{ name:'mike',age:19}]
    
       		var Hello=React.createClass({ 
    			render:function(){ 
    				
    				var value=this.state.value;
    				var info=value?'jeff':'mike';
    
    				return (
    
    					<div>
    					<p>{ info}</p>
    					<button onClick={ this.change}>点我</button>
    					</div>
    				)
    			},
    			change:function()
    			{ 
    				this.setState({ 
    					value:!this.state.value
    				})
    			},
    			//初始化state
    			getInitialState:function(){ 
    				return{ 
    					value:true
    				}
    			}
    
       		})
    		
    		ReactDOM.render(<Hello />,document.querySelector(".big"))
    
    
    
    	</script>
    	
    </body>
    
    </html>