學習React(23) - memo 的介紹

創建一個文件，MemoComponent.js

// MemoComponent.js 文件
import React from 'react'

function MemoComponent({name}) {
    console.log("Memo Component")
    return (
        <div>
            {name}
        </div>
    )
}

// react-dom: 16.6.0 以上的版本才能用
export default React.memo(MemoComponent)

在ParentComponent.js 文件裏：

// ParentComponent.js 文件
import React, { Component } from 'react'
import MemoComp from './MemoComponent'

class ParentComponent extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
             name: "World"
        }
    }
    
    componentDidMount() {
        setInterval(() => {
            this.setState({
                name: "World"
            })
        }, 2000)
    }

    render() {
        console.log("*******This is the parent component*********")
        return (
            <div>
                Parent Component
                <MemoComp name={this.state.name}/>
            </div>
        )
    }
}

export default ParentComponent

在App.js 文件中

// App.js 文件
import React from 'react';
import './App.css';
import Parentcom from './ParentComponent'

function App() {
  return (
    <div className="App">
      <Parentcom/>
    </div>
  );
}

export default App;

結果如下：

在Chrome的console裏顯示的結果如下:

---

如果覺得寫的不錯的，就用點贊來代替五星好評吧！