反応器の中のPropsとState

01反応の核心

データ変更時に画面(構成部品)を再読み込み
このため、レスポンスではPropsとStateを使用して変更したデータをチェックします.

02 stateとpropsの違い

PropsはStateと似ていますが、使用目的に差があります.
stateはデータを構成部品に格納する
propsは素子間でデータを伝達する

03コンストラクション関数を使用してValue属性値を渡す

  <script type="text/babel">

    class C extends React.Component {
      render(){
        const { text } = this.props
        return(
          <span>Hello World { text }</span>
        )
      }
    }

    class B extends React.Component {
      render(){
        const { value } = this.props //js영역
        return( //jsx영역

          <div className="c_Component"> 
            <C text={value} />
          </div>
        )
      }
    }

    class A extends React.Component {
      render(){
        const { name } = this.props
        return(
          <div>
            <B value={name}/>
          </div>
        )
      }
    }


    class App extends React.Component {
      render(){
        return(
          <div>
            <A name={"heidi"} />
          </div>
        )
      }
    }

    ReactDOM.render(<App />, document.querySelector("#root"));
  </script>

サブエレメントはvalueで親エレメントに値を渡すことができます
ここでvalueはinput属性のvalueではなく,反応器が伝達するprops属性の名前を指す.
親コンポーネントの値はhtml
ㄴサブエレメントの値は属性値です

04クラスの構造関数とprops

親エレメントにコンストラクション関数(props){supet(props)}を与えることで、サブエレメントのプロパティ値を取得できます.
(最近は省略可能)

注意:input type=「text」とinput value={1}の式の違い

"と{}

jsx構文と重複しない

は、変数を含むProps値であるため、要素に依存する

である.

属性値を読み込むとpropsになります.

の欠点は、親アセンブリが重なるほど、支柱を伝達する過程が面倒になるため、Reduxが改善する必要があるということです((後で勉強するのは難しいそうです))

注意:JSX構文のため、class属性を与えるときにclassNameを与える必要があります。

ブラウザはclassと見なしているからです.

propsは親から子供に属性を伝える方法です。

渡された属性値の名前はvalueではなく他の値に渡すことができます.
render部分のjs領域の{}オブジェクトとreturnのjsx領域の{}変数記号を区別することが重要である.

05ステータス

デフォルトのステータス

反応で使用される変数として理解される.

反応器は、すべての変数をオブジェクトに含めて使用することができ、構造関数を省略することができる.

セグメントで、変数名はstateとしてのみ使用できます.反応器はstateに固定された変数によって変化の値を調べるからだ.
ㄴstateのみを使用する必要があります.stateを変更すると作業できません.

 <script type="text/babel">

    class Login extends React.Component {
      // constructor(props){
      //   super(props)
      //   this.state = {}
      // }

      state = {
        isLogin : false
      }
      // setState({
      //   ...state,
      //   name : 'heidi2'
      // })

      

      render(){
        const obj = {
          ...this.stste,
          isLogin : !this.state.isLogin
        }
        return(
          <button onClick={ () => {this.setState(obj)} }>
            {this.state.isLogin ? '로그아웃' : '로그인' }
          </button>
        )
      }
    }
    
    class App extends React.Component {
      render(){
        return(
          <div>
            <Login />
          </div>
        )
      }
    }

    ReactDOM.render(<App />, document.querySelector("#root"));
  </script>

アテンションレンダリング()

render()は、構成部品の実行時に実行される関数です.ランダー関数に関数を入れると、実行が続行されるため、stateはできるだけコンストラクション関数に配置されます.

注意:反応器でデータの変更を検出する原理

      {} === {} //false

      state.name = 'heidi'
      const a = state
      state.name = 'heidi2'
      a === state // true

データ型がオブジェクトの場合、内容が変更された場合は、変更事実を確認できません.
オブジェクトの内容を変更すると...演算子とthis.setState()を使用します.
setStateはstate変数を変更する関数です.
すなわち、反応液は状態値を変化させる過程が必要である.

06イベントによるsetStateの実装

  <script type="text/babel">

    class Counter extends React.Component {
      state = {
        number : 0,
      }

      increase = (index) => {
        const increase = {
          ...this.state,
          number : this.state.number +index
        }

        this.setState(increase)
      }

      decrease = (index) => {
        const decrease = {
          ...this.state,
          number : this.state.number -index
        }
        this.setState(decrease)
      }

      render(){
 

        return(
          <div>
            <h3>{this.state.number}</h3>
            <button onClick={ ()=> {this.increase(2)} }>+</button>
            <button onClick={ ()=> {this.decrease(2)} }>-</button>
          </div>
        )
      }
    }
    
    class App extends React.Component {
      render(){
        return(
          <div>
            <Counter />
          </div>
        )
      }
    }

    ReactDOM.render(<App />, document.querySelector("#root"));
  </script>

イベントを使用してsetStateを実行する際の注意点

1)onClick=""イベントを使用するなど、通常のElementによってイベントが実装される場合、""内部はjs領域である.したがって、「」ラップの代わりに{}を反応に適用する.
2)onClickのようにcammel形式で使うべきです.js領域は関係ありませんが、反応器では起動できず、デバッグ時に大きな困難が発生します.
3)onClick関数をrenderに配置した場合、クリックせずに実行します.事前に宣言したり、匿名関数として記述したりすると、問題は解決されます.
4)3)の匿名関数でsetState()を使用すると、値の変化に伴って画面が変わります!
5)応答の最大の欠点(応答内条件演算子を使用する規則)
ㄴreactionでは条件文を3つの演算子として使用する必要があります.