React VS React Hooks

3527 ワード
インフラストラクチャ ノードの反応の基本的な知識を学習し、学習します。 テキストリンク

レスポンス作成順序



作成:まずconstructorを実行してステータス->プレゼンテーション(HTML、jsxをDOMに割り当てます.スクリーンレンダリング)->コンポーネントDidMount(データインポートなど)を取得します.
変更へんこう:プレゼンテーションからコンポーネントDidUpdateプロシージャへのプレゼンテーション
削除さくじょ:ComponentWillUnmount

React Component


Class Component
  • より多くの機能
  • コードは金
  • コード複雑
  • パフォーマンスが遅い
    • import React, {Component} from 'react'

export default class Hello extends Component{
    render(){
        return(
        	<div>
            	hello my friends!
            </div>
        )
    }
}
    Functional Component
  • の利用可能な機能は
    • に限られる.
  • コード単純
  • 性能良好
    • import React from 'react'

export default function Hello(){
    return(
    	<div>
        	hello my friends
        </div>
    )
}
    =>少ない機能しか使用できない機能性コンポーネントよりも、主により多くの機能を使用するクラスコンポーネント

    React Hooks


    React 16.8以降、機能コンポーネントの使用量が増加するにつれて、「クラス」コンポーネントでのみ使用可能なライフサイクルなど、機能コンポーネントの使用量も増加します.Class Component 
    import React, {Component} from 'react'
import Axios from 'axios'

export default class Hello extends Component{
    constructor(props){
        super(props);
        //상태 지정
        this.state={name:""}; 
    }
    
    //Life Cycle(데이터 가져오기 등등)
    componentDidMount(){
        Axios.get('/api/user/name')
        .then(response=>{
            this.setState({name:response.data.name});
        });
    }
    
    render(){
        return(
        	<div>
            	My name is {this.name}
            </div>
        )
    }
}
    Functional Component 
    import React, {useEffect, useState} from 'react'
import Axios from 'axios'

export default function Hello(){
    //상태 지정(Hooks전에 사용 불가했던 기능)
    const [Name, setName]=useState("") 
   
    //Life Cycle(Hooks전에 사용 불가했던 기능)
    useEffect(()=>{
        Axios.get('/api/user/name')
        .then(response=>{
            setName(response.data.name);
        });
    },[]);
    
    return(
    	<div>
        	My name is {Name}
        </div>
    )
}

    リファレンス


    www.inflearn.com/course/学習-ノード-反応-基本
    Ubuntuのダウンロードが遅いという問題を解決する
    [CS]Flexプロパティ(1)