学习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里显示的结果如下:

---

如果觉得写的不错的，就用点赞来代替五星好评吧！