性能优化之memo，相当于函数组件里的shouldComponentUpdate

Author: introvert-y

src/page/memo/index.js

@@ -0,0 +1,17 @@
+
+import React from 'react';
+
+function MyComponent({name}) {
+  /* 使用 props 渲染 */
+  console.log('子组件渲染了');
+  return (
+    <div>
+      {name}
+    </div>
+  )
+}
+function areEqual(prevProps, nextProps) {
+  //true则不重新渲染， 相反则重新渲染
+  return true;
+}
+export default React.memo(MyComponent, areEqual);

src/page/memoParent/index.js

@@ -0,0 +1,19 @@
+
+import React, { useState } from 'react';
+import Memo from '../memo/index'
+
+function Page() {
+  const [name, setName] = useState('Ming');
+  const count = 10;
+  return (
+    <div style={{ marginLeft: 50 }}>
+      <h2>子组件在任何情况下都不重新渲染</h2>
+      <p>{name}</p>
+      <button onClick={() => setName('Ming')}>Ming</button><br/><br/>
+      <button onClick={() => setName('Anny')}>Anny</button><br/><br/>
+      <Memo name={count} />
+    </div>
+  )
+}
+
+export default Page;

src/router/index.js

@@ -12,6 +12,7 @@ import EchartBox from '../page/echartBox/index'
 import ChinaMap from '../page/chinaMap/index'
 import UseMemo from '../page/useMemo/index'
 import UseCallback from '../page/useCallback/index'
+import Memo from '../page/memoParent/index'
 
 function Header() {
   return (
@@ -45,6 +46,9 @@ function Header() {
       <li>
         <Link to="/optimize">性能优化之shouldComponentUpdate,及第三方动画库做简单动画</Link>
       </li>
+      <li>
+        <Link to="/memo">性能优化之memo，相当于函数组件里的shouldComponentUpdate</Link>
+      </li>
       <li>
         <Link to="/echart">echart的简单应用</Link>
       </li>
@@ -81,6 +85,7 @@ function App() {
             <Route path="/map" component={ChinaMap} />
             <Route path="/useMemo" component={UseMemo} />
             <Route path="/useCallback" component={UseCallback} />
+            <Route path="/memo" component={Memo} />
         </Switch>
       </div>
     </BrowserRouter>