Reactクラス構成部品

7778 ワード

  • 段の素子は依然として難しい.
  • import React from "react";
    
    export default class App extends React.Component {
    	constructor(props){
        	super(props)
          	this.state ={
            	name:"pandaman",
              	age : 27,
              	job:"PM"
              
            }
          
          render
        }
      
      redner(){
      	const {name,age,job} = this.state;
        
        return (
        	<div>
          	<div>name:{name}</div>
    		<div>age:{age}</div>
    		<div>job:{job}</div>
          </div>
        )
      }
    }

  • クラスでextendsキーで継承するクラスを指定する

  • コンストラクション関数ジェネレータでスーパー()演算子を使用してリカバリします.コンポーネントthisを継承します.stateの有効化

  • setState()
    -ステータスを非同期で実行するにはsetState()関数を使用する必要があります.
  • 直ちに反映できない意味
  • 1) setState(updater,[callback]
  • 2) updater:(state,props) => stateChange
    updater関数に渡されるstate、propは最新値でステータスを更新します
    2番目のパラメータcallbackは、setStateの実行が完了し、構成部品がレンダリングされた後に実行される関数
  • です.
    onAgeHandler = () => {
    	this.steState((state) => {age:state.age +1})
    }
    
    onAgeHandler = () => {
      const {age} = this.state;
    	this.steState({age:age +1})
    }
    
    
    //age가 업데이트되면 callback 작동하여 업데이트된 age가 로그에 남기게 됨
    onAgeHandler = () => {
      
    	this.steState(prevState => ({
        	age:prevSTate.age + 1
        }),
        () => console.log(this.state.age)
       );
    }
    
    
    ソース:https://oyg0420.tistory.com/entry/Reactjs-%EB%A6%AC%EC%95%A1%ED%8A%B8-state%EC%99%80-props