useCallback替换成useEffect

Author: introvert-y

src/page/chinaMap/index.js

@@ -1,5 +1,5 @@
 import React, {
-  useCallback, useRef,
+  useEffect, useRef,
 } from 'react';
 import echarts from '../../echarts';
 
@@ -87,7 +87,7 @@ function initChart(inst, opt = {}) {
           emphasis: {  
               show: false  
           }  
-        },  
+        },
         data: mydata.map(item => ({
           name: replaceProvinceName(item.name),
           value: item.value,
@@ -104,25 +104,35 @@ inst.setOption(optionMap, opt);
 
 function DataChart() {
   const myChart = useRef(null);
-  const chartDOMRef = useCallback((el) => {
-    if (el) {
-      if (!myChart.current) {
-        myChart.current = echarts.init(el);
-      }
-      initChart(myChart.current, {
-        notMerge: true,
-      });
-    } else {
-      if (!myChart.current) {
-        return;
-      }
+  useEffect(() => {
+    myChart.current = echarts.init(myChart.current);
+    initChart(myChart.current, {
+      notMerge: true,
+    });
+    return () => {
+      // console.log('销毁时');
       myChart.current.dispose();
-    }
+    };
   }, []);
+  // const chartDOMRef = useCallback((el) => {
+  //   if (el) {
+  //     if (!myChart.current) {
+  //       myChart.current = echarts.init(el);
+  //     }
+  //     initChart(myChart.current, {
+  //       notMerge: true,
+  //     });
+  //   } else {
+  //     if (!myChart.current) {
+  //       return;
+  //     }
+  //     myChart.current.dispose();
+  //   }
+  // }, []);
 
   return (
     <>
-      <div ref={chartDOMRef} style={{ height: 300, backgroundColor: '#dedede' }} />
+      <div ref={myChart} style={{ height: 300, backgroundColor: '#dedede' }} />
     </>
   );
 }

src/page/echartBox/index.js

@@ -1,5 +1,5 @@
 import React, {
-  useCallback, useRef,
+  useRef, useEffect,
 } from 'react';
 import echarts from '../../echarts';
 
@@ -154,26 +154,20 @@ function initChart(inst, opt = {}) {
 
 function DataChart() {
   const myChart = useRef(null);
-  const chartDOMRef = useCallback((el) => {
-    if (el) {
-      if (!myChart.current) {
-        myChart.current = echarts.init(el);
-      }
-      initChart(myChart.current, {
-        notMerge: true,
-      });
-    } else {
-      if (!myChart.current) {
-        return;
-      }
+  useEffect(() => {
+    myChart.current = echarts.init(myChart.current);
+    initChart(myChart.current, {
+      notMerge: true,
+    });
+    return () => {
+      // console.log('销毁时');
       myChart.current.dispose();
-    }
+    };
   }, []);
-
   return (
     <>
       <div style={{ marginLeft: 50 }}>series数组里的对象可以有formatter</div>
-      <div ref={chartDOMRef} style={{ height: 300, backgroundColor: 'lightpink' }} />
+      <div ref={myChart} style={{ height: 300, backgroundColor: 'lightpink' }} />
     </>
   );
 }

src/page/useCallback/index.js

@@ -0,0 +1,33 @@
+import React, { useCallback, useState } from 'react';
+
+class Child extends React.Component {
+  shouldComponentUpdate(nextProps) {
+    return nextProps.flag !== this.props.flag;
+  }
+
+  render() {
+    console.log('Child render');
+    return <div>Child Count: {this.props.count}</div>;
+  }
+}
+
+const UseCallBack = () => {
+  const [count, setCount] = useState(0);
+  const [selfCount, setSelfCount] = useState(100);
+
+  const memoizedCallback = useCallback(() => {
+    console.log('count change', count);
+  }, [count]);
+
+  return (
+    <div style={{ marginLeft: 40 }}>
+      <h2>useCallback缓存函数</h2>
+      <Child count={count} flag={memoizedCallback} />
+      <p>self Count：{selfCount}</p>
+      <button onClick={() => setCount(count + 1)}>child count add</button><br/><br/>
+      <button onClick={() => setSelfCount(selfCount + 1)}>self count add</button><br/><br/>
+      <button onClick={() => memoizedCallback()}>callback click</button>
+    </div>
+  )
+}
+export default UseCallBack;

src/page/useMemo/index.js

@@ -0,0 +1,28 @@
+
+import React, { useState, useMemo } from 'react';
+
+function Page() {
+  const [count, setCount] = useState(1);
+  const [val, setValue] = useState('');
+  const expensive = useMemo(() => {
+      console.log('compute');
+      let sum = 0;
+      for (let i = 0; i < count * 100; i++) {
+          sum += i;
+      }
+      return sum;
+  }, [count]);
+
+  return <div style={{ marginLeft: 40 }}>
+      <h2>类似vue的计算属性，函数只依赖按钮的点击事件</h2>
+      <h4>{count}-{expensive}</h4>
+      {val}
+      <div>
+          <button onClick={() => setCount(count + 1)}>+c1</button>
+          <input value={val} onChange={event => setValue(event.target.value)}/>
+      </div>
+  </div>;
+}
+
+
+export default Page;

src/router/index.js

@@ -10,6 +10,8 @@ import Single from '../page/Single/index'
 import Optimize from '../page/Optimize/index'
 import EchartBox from '../page/echartBox/index'
 import ChinaMap from '../page/chinaMap/index'
+import UseMemo from '../page/useMemo/index'
+import UseCallback from '../page/useCallback/index'
 
 function Header() {
   return (
@@ -49,6 +51,12 @@ function Header() {
       <li>
         <Link to="/map">echart实现中国地图</Link>
       </li>
+      <li>
+        <Link to="/useMemo">hook之useMemo</Link>
+      </li>
+      <li>
+        <Link to="/useCallback">hook之useCallback</Link>
+      </li>
     </ul>
   );
 }
@@ -71,6 +79,8 @@ function App() {
             <Route path="/optimize" component={Optimize} />
             <Route path="/echart" component={EchartBox} />
             <Route path="/map" component={ChinaMap} />
+            <Route path="/useMemo" component={UseMemo} />
+            <Route path="/useCallback" component={UseCallback} />
         </Switch>
       </div>
     </BrowserRouter>