公式サイトのアドレス:https://zh-hans.reactjs.org/docs/glossary.html#components(コンポーネント)
　　　　   https://zh-hans.reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class(state)
参考ブログ:https://blog.csdn.net/duola8789/article/details/90142891

state

1、概要（作用）

state(ステータス)は、classのインスタンス属性であり、コンポーネント自体が管理し、データの変化を追跡するためのステータスマシン(State Machine)である.

2、作用

自分の状態を制御し、状態の動作制御、データ更新、インタフェースレンダリング、自分のデータの変化を記録するなどを完了します.簡単に言えば、内部状態を記録することです

3、特性

変更可能、読み取り可能

4、使用方法

(1)初期化方式
1)constructorclassコンストラクション関数を追加し、この関数でthis.state初期値付

class Clock extends React.Component { constructor(props) { // constructor  class  super(props); // super    this.state = {date: new Date()}; } render() { return ( 
>  
>Hello, world!
>  
>It is {this.state.date.toLocaleTimeString()}.
>  
> ); } }

2)Classで直接定義

class App extends React.Component {
  state = {
    loggedIn: false,
    currentState: "not-panic",
    someDefaultThing: this.props.whatever
  }

  render() {
    // whatever you like
  }
}

(2)呼び出し方式
this.state.xxx

5、stateの正しい使い方

(1)Stateを直接修正しない
理由:コンポーネントは再レンダリングされません.例:this.state.comment = 'Hello';   // Wrong解決策:setStateを使用します.例:this.setState({comment: 'Hello'});(2)stateの更新は非同期である可能性がある
Reactは、複数のsetStateを1つの呼び出しにマージする場合があります.this.propsとthis.stateは非同期で更新される可能性があるので、彼らの値に依存して次のステータスを更新しないでください.
たとえば、このコードではカウンタを更新できない場合があります.

// Wrong
this.setState({
  counter: this.state.counter + this.props.increment,
});

解決策:setStateはオブジェクトではなく関数を受け入れることができます.この関数は前のstateを最初のパラメータとして用い,今回の更新が適用されたときのpropsを2番目のパラメータとする.

// Correct  &&   
this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

// Correct  &&   
this.setState(function(state, props) {
  return {
    counter: state.counter + props.increment
  };
});

(3)stateの更新がマージされる
setStateを呼び出すと、Reactは提供したオブジェクトを現在のstateにマージします.
たとえば、stateにはいくつかの独立した変数が含まれています.

constructor(props) {
    super(props);
    this.state = {
      posts: [],
      comments: []
    };
  }

setState()を呼び出して個別に更新できます.

componentDidMount() {
    fetchPosts().then(response => {
      this.setState({
        posts: response.posts
      });
    });

    fetchComments().then(response => {
      this.setState({
        comments: response.comments
      });
    });
  }

ここでの合併は浅い合併であるため、this.setState({comments})はthis.state.postsを完全に保持しているが、this.state.commentsは完全に置換されている.
6、短所
(1)管理の複雑さをもたらす;
解決策:
1)無状態コンポーネントをできるだけ多く書くことで、コードメンテナンスの難易度を低減し、コンポーネントの多重性をある程度強化することができる.
2)できるだけ関数式コンポーネントを作成し、関数式コンポーネントはpropsのみstateがない

props

1、紹介

propsは、Reactコンポーネント入力であり、親コンポーネントがサブコンポーネントにデータを伝達する媒体である.

2、作用

親コンポーネントから子コンポーネントへのデータの転送(外部インタフェースの定義)

3、特性

読み取り専用、変更不可
例:props.number = 42;  // すべてのReactコンポーネントは、純粋な関数のようにpropsを変更しないように保護する必要があります.

4、使用方法

(1)関数コンポーネント

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

関数コンポーネントでpropsを使用する方法は:props.xxx
(2)クラスコンポーネント

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

    render() {
         return 
Hello, {this.props.name}
;
    }
} 

クラスコンポーネントでpropsを使用する方法は:this.props.xxx

5、props.children

各コンポーネントは、props.childrenを取得することができる.コンポーネントの開始ラベルと終了ラベルの間の内容が含まれます.
例:

Hello world!

Welcomeコンポーネントでprops.childrenを取得すると、文字列Hello world!が得られます.

function Welcome(props) {
  return 
{props.children}
;
}

classコンポーネントの場合は、this.props.childrenを使用して取得します.

class Welcome extends React.Component {
  render() {
    return 
{this.props.children}
;
  }
}

6、短所

欠点:親コンポーネントの転送データが更新された場合、ページに更新できません.
解決方法:
(1)コンポーネントが新しいprops(更新後)を受信したときに呼び出される.このメソッドはrenderを初期化するときに呼び出されません.
(2)componentWillUpdateは、コンポーネントが新しいpropsまたはstateを受信したがrenderがない場合に呼び出される.初期化時に呼び出されません.
注意:親コンポーネントから渡されたデータが更新される場合は、props値の付与をstateに推奨します.propsが更新されるとsetStateを実行し、ページをタイムリーに更新します.
親コンポーネントから渡されたデータが更新されない場合は、propsの値をstateに割り当てることをお勧めしません.データの混乱が発生しやすいです.