PropsとStateとは何か？

Props（プロパティ）とState（状態）は、Reactコンポーネントのデータ管理に使用されます。Propsは外部から受け取るデータで、Stateはコンポーネント内部で管理するデータです。

  
  function Welcome(props) {
    return 
Hello, {props.name}!
;
  }

  class Clock extends React.Component {
    constructor(props) {
      super(props);
      this.state = { date: new Date() };
    }

    render() {
      return 
It is {this.state.date.toLocaleTimeString()}.
;
    }
  }
  

PropsとStateの違い

PropsとStateは似ていますが、いくつかの違いがあります。Propsは親コンポーネントから子コンポーネントにデータを渡すために使用され、Stateはコンポーネント内でデータを管理し、時間とともに変化するデータを扱います。

  
  function Greeting(props) {
    return 
Hello, {props.name}
;
  }

  class Toggle extends React.Component {
    constructor(props) {
      super(props);
      this.state = { isToggleOn: true };
    }

    handleClick = () => {
      this.setState(state => ({
        isToggleOn: !state.isToggleOn
      }));
    }

    render() {
      return (
        
          {this.state.isToggleOn ? 'ON' : 'OFF'}
        
      );
    }
  }
  

実際の例でPropsとStateを使ってみよう

PropsとStateの違いを理解した上で、実際にそれらを使用してコンポーネントを作成してみましょう。

  
  function App() {
    return (
      

        
        
      
    );
  }

  ReactDOM.render(, document.getElementById('root'));
  

React.jsのPropsとStateを理解しようのまとめ

この記事では、React.jsにおけるPropsとStateの違いについて学びました。Propsは親コンポーネントからのデータを受け取る際に使われ、Stateはコンポーネント内部でデータを管理します。これらの概念を理解することで、Reactコンポーネントを効率的に扱えるようになります。