Skip to content

Commit 64e8c0e

Browse files
committed
useCallback替换成useEffect
1 parent 9816cd4 commit 64e8c0e

File tree

5 files changed

+107
-32
lines changed

5 files changed

+107
-32
lines changed

src/page/chinaMap/index.js

Lines changed: 26 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, {
2-
useCallback, useRef,
2+
useEffect, useRef,
33
} from 'react';
44
import echarts from '../../echarts';
55

@@ -87,7 +87,7 @@ function initChart(inst, opt = {}) {
8787
emphasis: {
8888
show: false
8989
}
90-
},
90+
},
9191
data: mydata.map(item => ({
9292
name: replaceProvinceName(item.name),
9393
value: item.value,
@@ -104,25 +104,35 @@ inst.setOption(optionMap, opt);
104104

105105
function DataChart() {
106106
const myChart = useRef(null);
107-
const chartDOMRef = useCallback((el) => {
108-
if (el) {
109-
if (!myChart.current) {
110-
myChart.current = echarts.init(el);
111-
}
112-
initChart(myChart.current, {
113-
notMerge: true,
114-
});
115-
} else {
116-
if (!myChart.current) {
117-
return;
118-
}
107+
useEffect(() => {
108+
myChart.current = echarts.init(myChart.current);
109+
initChart(myChart.current, {
110+
notMerge: true,
111+
});
112+
return () => {
113+
// console.log('销毁时');
119114
myChart.current.dispose();
120-
}
115+
};
121116
}, []);
117+
// const chartDOMRef = useCallback((el) => {
118+
// if (el) {
119+
// if (!myChart.current) {
120+
// myChart.current = echarts.init(el);
121+
// }
122+
// initChart(myChart.current, {
123+
// notMerge: true,
124+
// });
125+
// } else {
126+
// if (!myChart.current) {
127+
// return;
128+
// }
129+
// myChart.current.dispose();
130+
// }
131+
// }, []);
122132

123133
return (
124134
<>
125-
<div ref={chartDOMRef} style={{ height: 300, backgroundColor: '#dedede' }} />
135+
<div ref={myChart} style={{ height: 300, backgroundColor: '#dedede' }} />
126136
</>
127137
);
128138
}

src/page/echartBox/index.js

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, {
2-
useCallback, useRef,
2+
useRef, useEffect,
33
} from 'react';
44
import echarts from '../../echarts';
55

@@ -154,26 +154,20 @@ function initChart(inst, opt = {}) {
154154

155155
function DataChart() {
156156
const myChart = useRef(null);
157-
const chartDOMRef = useCallback((el) => {
158-
if (el) {
159-
if (!myChart.current) {
160-
myChart.current = echarts.init(el);
161-
}
162-
initChart(myChart.current, {
163-
notMerge: true,
164-
});
165-
} else {
166-
if (!myChart.current) {
167-
return;
168-
}
157+
useEffect(() => {
158+
myChart.current = echarts.init(myChart.current);
159+
initChart(myChart.current, {
160+
notMerge: true,
161+
});
162+
return () => {
163+
// console.log('销毁时');
169164
myChart.current.dispose();
170-
}
165+
};
171166
}, []);
172-
173167
return (
174168
<>
175169
<div style={{ marginLeft: 50 }}>series数组里的对象可以有formatter</div>
176-
<div ref={chartDOMRef} style={{ height: 300, backgroundColor: 'lightpink' }} />
170+
<div ref={myChart} style={{ height: 300, backgroundColor: 'lightpink' }} />
177171
</>
178172
);
179173
}

src/page/useCallback/index.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import React, { useCallback, useState } from 'react';
2+
3+
class Child extends React.Component {
4+
shouldComponentUpdate(nextProps) {
5+
return nextProps.flag !== this.props.flag;
6+
}
7+
8+
render() {
9+
console.log('Child render');
10+
return <div>Child Count: {this.props.count}</div>;
11+
}
12+
}
13+
14+
const UseCallBack = () => {
15+
const [count, setCount] = useState(0);
16+
const [selfCount, setSelfCount] = useState(100);
17+
18+
const memoizedCallback = useCallback(() => {
19+
console.log('count change', count);
20+
}, [count]);
21+
22+
return (
23+
<div style={{ marginLeft: 40 }}>
24+
<h2>useCallback缓存函数</h2>
25+
<Child count={count} flag={memoizedCallback} />
26+
<p>self Count:{selfCount}</p>
27+
<button onClick={() => setCount(count + 1)}>child count add</button><br/><br/>
28+
<button onClick={() => setSelfCount(selfCount + 1)}>self count add</button><br/><br/>
29+
<button onClick={() => memoizedCallback()}>callback click</button>
30+
</div>
31+
)
32+
}
33+
export default UseCallBack;

src/page/useMemo/index.js

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
2+
import React, { useState, useMemo } from 'react';
3+
4+
function Page() {
5+
const [count, setCount] = useState(1);
6+
const [val, setValue] = useState('');
7+
const expensive = useMemo(() => {
8+
console.log('compute');
9+
let sum = 0;
10+
for (let i = 0; i < count * 100; i++) {
11+
sum += i;
12+
}
13+
return sum;
14+
}, [count]);
15+
16+
return <div style={{ marginLeft: 40 }}>
17+
<h2>类似vue的计算属性,函数只依赖按钮的点击事件</h2>
18+
<h4>{count}-{expensive}</h4>
19+
{val}
20+
<div>
21+
<button onClick={() => setCount(count + 1)}>+c1</button>
22+
<input value={val} onChange={event => setValue(event.target.value)}/>
23+
</div>
24+
</div>;
25+
}
26+
27+
28+
export default Page;

src/router/index.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import Single from '../page/Single/index'
1010
import Optimize from '../page/Optimize/index'
1111
import EchartBox from '../page/echartBox/index'
1212
import ChinaMap from '../page/chinaMap/index'
13+
import UseMemo from '../page/useMemo/index'
14+
import UseCallback from '../page/useCallback/index'
1315

1416
function Header() {
1517
return (
@@ -49,6 +51,12 @@ function Header() {
4951
<li>
5052
<Link to="/map">echart实现中国地图</Link>
5153
</li>
54+
<li>
55+
<Link to="/useMemo">hook之useMemo</Link>
56+
</li>
57+
<li>
58+
<Link to="/useCallback">hook之useCallback</Link>
59+
</li>
5260
</ul>
5361
);
5462
}
@@ -71,6 +79,8 @@ function App() {
7179
<Route path="/optimize" component={Optimize} />
7280
<Route path="/echart" component={EchartBox} />
7381
<Route path="/map" component={ChinaMap} />
82+
<Route path="/useMemo" component={UseMemo} />
83+
<Route path="/useCallback" component={UseCallback} />
7484
</Switch>
7585
</div>
7686
</BrowserRouter>

0 commit comments

Comments
 (0)