[TASK] React 1-4. Props と State [State]

Wikiの項目

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>React Test</title>
  </head>
  <body>
    <div id="app" />
  </body>
</html>

import React from 'react';
import {render} from 'react-dom';

class App extends React.Component {

    // 　　　　　値を指定するタイミング 値の変更可否
    // props    コンポーネント作成時  NO
    // state    コンポーネント作成後  YES    

    constructor(props) {
        super(props);
        this.state = {id: 2, text: "state"};
    }

    componentDidMount() {
        // componentのアウトプットがされたときに実行される
        console.log("didmount: "+this.state.id);
    }

    static getDerivedStateFromProps(prevProps, prevState) {
            console.log(prevProps);
            console.log(prevState);
        if (prevProps.id !== prevState.id) {
            return {
                //this.setStateのように働く
                id: 3
            };
        }

    }

    //componentWillMount(), componentWillReceiveProps() は非推奨。getDerivedStateFromPropsが推奨

    render () {
    return <p> Hello React!! 
      propsId : {this.props.id} ,
      statesId : {this.state.id} , 
      propsText : {this.props.text},
      statesText : {this.state.text}</p>;
  }
}

render(<App  id={"1"} text={"props"}/>, document.getElementById('app'));

実行結果 console

{id: "1", text: "props"} state.jsx:64 
{id: 2, text: "state"} state.jsx:63
didmount: 3 state.jsx:52

HTML Hello React!! propsId : 1 , statesId : 3 , propsText : props, statesText : state

sumakokima2 / resium-sample2

[TASK] React 1-4. Props と State [State] #16

Wikiの項目