概要

react.jsで実装レンズページを作ったときの

最小実装

class List extend React.Component {
    constructor(props) {
      super(props)
    }
    render(){
      return (<div></div>);
    }
}

ReactDom.render(
   <List />,
   document.getElementById('app')
)

stateとprops

  • stateは変更してよい、propsは変更しちゃダメ
  • 最上位の親はstateを子のpropsとして渡す
  • stateとはトップレベルの親の持ち物
  • propsは親から渡されてきたstate、またはただの値

setState

stateを変更する

  • ポイント
    • this.setState({count: 1})
    • すぐにthis.state自体がかわるわけではない

stateの設計

  • reactはデータバインディング、stateの設計自体が肝だと思ってる
  • 極力シンプル(少なく)にする
  • 同じstateの値であれば、同じ画面の状態になるように意識する
Recent Entries