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 (
      <div>
        //render中通過 name 和 site 來獲取內部state傳遞過來的數據
        <Name name={this.state.name} />
        <Link site={this.state.site} />
      </div>
    );
  }
}

props則顯然的，類如外部傳入的、從父類中繼承來的屬性數值，則通過props進行傳遞。

//通過props 在組件間進行數據傳遞
class Name extends React.Component {
  render() {
    return (
      <h1>{this.props.name}</h1>
    );
  }
}
 
class Link extends React.Component {
  render() {
    return (
      <a href={this.props.site}>
        {this.props.site}
      </a>
    );
  }
}
 
ReactDOM.render(
  <WebSite />,
  document.getElementById('example')
);

所以：props負責接收傳遞屬性值；state來對屬性值進行修改，渲染頁面

二、props使用細節

1.入參類型聲明

//規定title屬性必傳，且是字符串
MyTitle.propTypes = {
  title: PropTypes.string.isRequired
};
ReactDOM.render(
    <MyTitle title={title} />,
    document.getElementById('example')
);