iT邦幫忙

0

三種React Componemt元件,功能類似,但有一些微妙的不同

三種React Componemt元件,通通都可以使用,但有一些微妙的不同

以下這三個元件的功能是相類似的。
以class 建立的元件
1.需要繼承React.Component
2.需要實作方法render(){return ......}
3.具有state與生命周期
4.使用props需再多加this.

class Test extends React.Component {
    render() {
      return <h1>Hello , {this.props.name}</h1>;
    }
  }

以 JavaScript 函數定義元件
1.無生命周期。

  function Test01(props) {
    return <h1>Hello , {props.name}</h1>;
  }

Pure Componemt箭頭函數
不需生命周期,不用state,不需處理資料或元件內部的狀態,官方建議此種做法。

  const Test02 =(props)=>(
      <h1>Hello , {props.name}</h1>
      //不需要return 
  )	    

完整代碼

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Test,Test01,Test02} from './test';//test.js中有多個元件,所以用大括號。

ReactDOM.render(
  <div>
    <Test name='Test'/>
    <Test01 name='Test01'/>
    <Test02 name='Test02'/>
  </div>
  ,document.getElementById('root')
   );

test.js

import React from "react";

class Test extends React.Component {
    render() {
      return <h1>Hello , {this.props.name}</h1>;
    }
  }
  
  function Test01(props) {
    return <h1>Hello , {props.name}</h1>;
  }
  
  const Test02 =(props)=>(
      <h1>Hello , {props.name}</h1>
  )	  

  export {Test,Test01,Test02};//一個js檔輸出多個元件就用export {a,b,c}

結果畫面:
https://ithelp.ithome.com.tw/upload/images/20200717/20122648YkPScEsteF.jpg


尚未有邦友留言

立即登入留言