読者です 読者をやめる 読者になる 読者になる

【React入門】 6 state概要 2

JavaScript React 入門

この記事では以下の画面を作成する。

f:id:kosumoro:20160806200954j:plain

※5秒ごとに「人名(年齢)」の要素が追加される。

https://cosmology233.github.io/sandbox/hatena/2016/08/08/

index.html

こちらと同じ。

kosumemo.hatenablog.com

scripts/script.js

const userNames = [ "Taro", "Hanako" ];

class App extends React.Component {
  render() {
    return (
      <div>
        <AppHeader appName="My App" />
        
        <UsersList />
      </div>
    );
  };
};

class AppHeader extends React.Component {
  render() {
    return (
      <header>
        <h1>This is {this.props.appName}ʼs Header!</h1>
      </header>
    );
  };
};

class UsersList extends React.Component {
  constructor() {
    super();
    
    this.state = {
      "users": []
    };
  };
  
  componentDidMount() {
    setInterval(() => {
      this.setState({
        "users": this.state.users.concat({
          "name": userNames[Math.floor(Math.random() * userNames.length)],
          "age": Math.floor(Math.random() * 30)
        })
      });
    }, 5 * 1000);
  };
  
  render() {
    const UserItem = this.state.users.map((user) => {
      return (
        <li>{user.name} ({user.age})</li>
      );
    });
    
    return (
      <ul>
        {UserItem}
      </ul>
    );
  };
};

ReactDOM.render(
  <App />,
  document.getElementById("app")
);

Reactの強みの一つはデータバインディングだと思う。

明示的にDOMを書き換えなくても、stateの変更は自動的に画面に反映される( setState メソッドを使用した場合)。

componentDidMount 内で setInterval を使用し、5秒ごとにstateに値を追加しているだけだ。

ちなみに componentDidMountコンポーネント初回描画後に実行されるメソッドである。Reactはほかにもライフサイクルに応じて発火するメソッドを持っている。