Reactでコンポーネントが更新された際にDOMの更新をかけたい
Reactでpropsに変更があった際にDOMの更新も行いたい。
例えば、親からもらったpropsに変更があった時、ajaxでリクエストをかけてその結果をもとにDOMの更新を行いたい場合など。
そんなことに直面した場合は、componentDidUpdateメソッドを使えば解決するようだ。
class Hoge extends React.Component { constructor(props) { this.state = { hoge:1 } } render(){ <Foo value={this.state.hoge}></Foo> } } class Foo extends React.Component { constructor(props) { this.state = { bar: 'hello' } } //Hogeコンポーネントのhogeに変更があった場合に呼ばれる componentDidMount(prevProps, prevState, snapshot) { if(prevProps.hoge !== this.props.hoge){ this.setState({ bar: 'Good Bye' }); } } render(){ <div>{this.props.hoge}<br>{this.state.bar}</div> } }
propsに変更があった際にDOMに更新かけたい場合にこのやり方を覚えておきたい。