ReactJS编程（四）——state 和props数据传递

一、state vs props

state对象，可以理解为组件内置的对象，通过更新赋值给state 类改变、重新渲染用户界面。类似java类中private属性的载体，用于传递类私有的数值。

class WebSite extends React.Component {
  constructor() {
      super();
      this.state = {
        name: "max",
        site: "https://www.max.com"
      }
    }

  render() {
    return (
      

        //render中通过 name 和 site 来获取内部state传递过来的数据
        
        
      
    );
  }
}

props则显然的，类如外部传入的、从父类中继承来的属性数值，则通过props进行传递。

//通过props 在组件间进行数据传递
class Name extends React.Component {
  render() {
    return (
      
{this.props.name}
    );
  }
}
 
class Link extends React.Component {
  render() {
    return (
      
        {this.props.site}
      
    );
  }
}
 
ReactDOM.render(
  ,
  document.getElementById('example')
);

所以：props负责接收传递属性值；state来对属性值进行修改，渲染页面

二、props使用细节

1.入参类型声明

//规定title属性必传，且是字符串
MyTitle.propTypes = {
  title: PropTypes.string.isRequired
};
ReactDOM.render(
    ,
    document.getElementById('example')
);