首页 > 代码库 > React的state属性与props属性

React的state属性与props属性

 技术分享      

 

state属性props属性隶属于React的component的两个重要属性

 

在React中,每一个class(类)和面向对象的函数一样,都有一个构造函数constructor(),可以对对象、属性等进行初始化,因此要初始化state,可以将其放在:

  state属性    

constructor(){
      //初始化对象、属性等

}

 

import React from ‘react‘;

export default class BodyIndex extends React.Component{
   constructor(){//每一个react类都有一个constructor(),可用于初始化对象、属性等
           super();   //调用基类的所有初始化方法
           this.state={username:‘Jeanne‘};  //初始化state,即为state赋初值,state属性的作用域,仅为当前所在class的作用域,即只在class BodyIndex中起作用
      }
    render(){
      setTimeout(()=>{
          this.setState({username:‘Michael‘});   //更改state属性的值,可以使用setState()方法
      },4000)
      return(

         <div>
           <h3>页面主体内容</h3>
           <p>my name is {this.state.username}</p>
         </div>
      )
    }
}

注:state的作用域只属于当前类,不污染其他模块

state属性相对于模块而言,属于自身属性

 

props属性

作用:外部组件给当前组件传递值,以及当前组件接收传递过来的

props属性相对于模块而言,属于外来属性

模块中接收参数:this.props.username

 

index.js

 

var React=require(‘react‘);
var ReactDom=require(‘react-dom‘);

import ComponentHeader from ‘./components/header‘;
import ComponentFooter from ‘./components/footer‘;
import BodyIndex from ‘./components/bodyindex‘;

class Index extends React.Component{
     render(){
        return(
           <div>
             <ComponentHeader/>
             <BodyIndex id={123}/>   {/*父组件index.js向子组件bodyindex传递参数*/}
             <ComponentFooter/>
           </div>
        )
     }
}

ReactDom.render(<Index/>,document.getElementById(‘example‘))

 

 

bodyindex.js

import React from ‘react‘;

export default class BodyIndex extends React.Component{
   constructor(){//每一个react类都有一个constructor(),可用于初始化对象、属性等
           super();   //调用基类的所有初始化方法
           this.state={username:‘Jeanne‘};  //初始化state,即为state赋初值,state属性的作用域,仅为当前所在class的作用域,即只在class BodyIndex中起作用
      }
    render(){
      setTimeout(()=>{
          this.setState({username:‘Michael‘});   //更改state属性的值,可以使用setState()方法
      },4000);

      return(

         <div>
           <h3>页面主体内容</h3>
           <p>my name is {this.state.username}, my id is {this.props.id}</p>
         </div>
      )
    }
}

  

 

React的state属性与props属性