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

react

jbuduoo 2020-07-17 15:06:04 ‧ 980 瀏覽

分享至

三種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}

結果畫面: