React的props和state

  React 为构建UI同时提供了props和state作为数据的传递使用。props和state都可以用来表示组件的状态，而props是作为父组件传递给子组件的数据，所以这就可以形成一个数据流，而state是作为组件内部使用的数据或者状态，下面通过实例说明这两者的区别。

  在src目录小新建一个名为NameList.js的文件，作为App.js组件的子组件：

写入代码：

//引入react
import React,{Component} from 'react';

//构建类

class NameList extends Component{
    //构造函数
    constructor(){
        
        super();
        //定义初始化的state
        
        this.state={show:true}
    }
    
    del =()=> {
        this.setState({show:false})
        
    }
    //定义render方法
    render(){
        //定义样式
        const style ={
            display:'inline-block',
            width:'100px',
            paddingRight:'20px',
            height:'50px',
        };
        //根据state的值判断是否显示
        if(this.state.show){
            
            return(
                <div>
                
                <span style={style}>{this.props.username}</span>
                <span style={style}>{this.props.age}</span>
                <input type="button" onClick={this.del} value="删除"/>
                </div>
            )
        }else{
            
            return null;
        }
    }
}

//导出类
export default NameList;

 

 

 

同时修改App.js的代码：

//引入react
import React ,{Component} from 'react';

//引入NameList类
import NameList from './NameList'

//引入样式文件
import './App.css';

//构建APP类



class App extends Component{
    
    
    //定义render方法
    
    render(){
        
        
        return (
            
            <div className='App'>
             <NameList username="student" age="12"/>
            
            
            </div>
            
        );
}
}
        
  


export default App;

          在这段代码中，子组件的username和age都是props数据的一部分，而这些数据都是由父组件传递过来的，这些数据是子组件初始化数据，不能修改； state数据是由子组件自己来维护的，同时子组件可以修改state来改变自身的状态，所以说state是组件的私有数据。

 

使用npm start,在浏览器中的效果：

    使用上一篇博文提到的map方法可以很轻松的使用这个组件，一个很简单的列表就可以这样进行书写：

 

App.js

//引入react
import React ,{Component} from 'react';

//引入NameList类
import NameList from './NameList'

//引入样式文件
import './App.css';

//构建APP类



class App extends Component{
    
    
    //定义render方法
    
    render(){
        
        
        const store=[
    {username:'java',age:'20'},
    {username:'JavaScript',age:'23'},
    {username:'css',age:'19'},
    {username:'node',age:'22'},
    {username:'vue',age:'21'},
        
        ]
        
        return (
            
            <div className='App'>
            
            {
                
                
                store.map((item,i)=>{
                    
                     return (<NameList username={item.username} key={i} />)
                    
                })
            }
            
            
            
            </div>
            
        );
}
}
        
      


export default App;

浏览器中的效果图：

 

 

 

总结：因为props是由父组件传递给子组件的，所以props的改变只能寄希望于父组件传递新的props，而state是组件自己负责维护和更新，所以React提供了setState()这个方法来跟新组件的state，注意的是这个方法是异步的。