React-(五-4)三種組件

(一) Class Component

透過繼承 React 的 Component，所創建出來的組件

// Progress.js
import React,{Component} from "react";

class Progress extends Component{
  render(){
    const {value} = this.props;
    return (
      <div className="bar-outer">
        <div 
          className="bar-inner"
          style={{width:`${value}%`}}/>
        <span>{value}%</span>
      </div>
    )
  }
}

export default Progress;

(二) Functional Component

相較於 Class Component，在Functional Component 中，props 是當作一個參數傳進函式中

使用情境： 當這個 Component 中沒有使用到 state ，只有 render 函式而沒有其他自定義方法

因此，Functional Component 又稱作 Stateless Component

import React from "react";

const ProgressBar = (props) =>{
  const {value} = props;
    return (
      <div className="bar-outer">
        <div 
          className="bar-inner"
          style={{width:`${value}%`}}/>
        <span>{value}%</span>
      </div>
    )
}

export default ProgressBar;

(三) Pure Component

Pure Component 跟 Class Component 很相似，最主要是差在效能上。

只要 props 裡面的值沒有改變，Pure Component 就不會重新 render

//ProgressBar.js
//Class Component：
import React,{PureComponent} from "react";

class ProgressBar extends PureComponent{
    state:{
        count {value} = this.props;
    };
    render(){
        const {value} = this.props;
        console.log("Re-render Progress")
        return (
            ...略
        )
    }    
}

此外，Pure Component 也會去比對自己的 state，在每一次決定是否要重新 render，是採取 shallow compare 的方式是去比對，也就是僅針對 state 中的第一層值是否改變

所以在下方程式碼中，即使每次重複點按 button 觸發 add()，卻因為 count 沒有被改變值，且第一層的 people 也沒有被改變，所以並不會重新 render

//Progress.js
import React,{PureComponent} from "react";

class Progress extends PureComponent{
    state:{
        count:0,
        people:{
            age:10
        },
    };
    add:()=>{
        this.setState({
            count:0,
            people:this.state.people
        });
    };
    render(){
        const {value} = this.props;
        console.log("Re-render Progress")
        return (
            <div>
                <button onClick={this.add}></button>
            </div>
        )
    }    
}

即使把第一層的 people 拿出來，重新setState，也第9行的 people 跟第4行的 people 是同一個 people，所以也不會重新render

// ...略
class Progress extends PureComponent{
    state:{
        people:{
            age:10
        },
    };
    add:()=>{
        const {people} = this.state;
        people.age += 1;
        this.setState({
            people:people,
        });
    };
    render(){
        const {value} = this.props;
        console.log("Re-render Progress")
        return (
            <div>
                <button onClick={this.add}></button>
            </div>
        )
    }    
}

但是如果把上述案例都改為繼承 Component 而非 PureComponent，不論值 props 跟 state 中的值是否改變，都會重新 render