Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 926f0fc

Browse files
使用 react.memo缓存组件
1 parent 9e77732 commit 926f0fc

File tree

10 files changed

+24
-12
lines changed

10 files changed

+24
-12
lines changed

‎README.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,12 +50,17 @@ const B = () => {
5050
- `useEffect` 解决组件产生的副作用
5151
默认情况下,`useEffect()`中的函数,会在组件渲染完成后调用,
5252
并且是每次渲染完成后都会调用
53+
5354
在 `useEffect()`可以传递一个第二个参数,
5455
第二个参数是一个数组,在数组中可以指定 `Effect` 的依赖项
5556
指定后,只有当依赖发生变化时,`Effect` 才会被触发
5657
通常会将 `Effect` 中使用的所有的局部变量都设置为依赖项
5758
这样一来可以确保这些值发生变化时,会触发 `Effect` 的执行
59+
5860
像 `setState()`是由钩子函数 `useState()`生成的
5961
`useState()`会确保组件的每次渲染都会获取到相同 `setState()`对象
6062
所以 `setState()`方法可以不设置到依赖中
6163
如果依赖项设置了一个空数组,则意味 `Effect` 只会在组件初始化时触发一次
64+
65+
- React.memo
66+
memo 只会根据 props 判断是否需要重新渲染,和 state 和 context 无关,state 或 context 发生变化时,组件依然会正常的进行重新渲染

‎src/App.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import Meals from './components/meals'
33
import Search from './components/search'
44
import Cart from './components/cart'
55
import cartContext from './store/cart'
6-
import { useState } from 'react'
6+
import { useCallback,useState } from 'react'
77

88
// 模拟一组食物数据
99
const MEALS_DATA = [
@@ -102,7 +102,8 @@ function App () {
102102
}
103103

104104
// 搜索
105-
const filterData = (keyWord) => {
105+
const filterData = useCallback((keyWord) => {
106+
console.log('callback')
106107
if (!keyWord) {
107108
setMealsData(MEALS_DATA)
108109
} else {
@@ -112,7 +113,7 @@ function App () {
112113
// console.log(meals)
113114
setMealsData(meals)
114115
}
115-
}
116+
},[setMealsData])
116117

117118
return (
118119
<cartContext.Provider value={{ ...cartData, addItem, removeItem, clearCart }}>

‎src/components/cart/detail/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,4 +55,4 @@ function Detail ({ meals }) {
5555
)
5656
}
5757

58-
export default Detail
58+
export default React.memo(Detail)

‎src/components/cart/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ function Cart () {
1111
const [showDetails, setShowDetails] = useState(false)
1212

1313
const toggleDetail = () => {
14+
if (cartData.amount === 0) return
1415
setShowDetails(!showDetails)
1516
}
1617

@@ -21,7 +22,7 @@ function Cart () {
2122
}, [cartData])
2223
return (
2324
<div className={cartCss.cartBox} onClick={toggleDetail}>
24-
{showDetails && <Detail meals={cartData.items}></Detail>}
25+
{showDetails && cartData.amount>0&&<Detail meals={cartData.items}></Detail>}
2526
<div className={cartCss.content}>
2627
<div className={cartCss.tabletBox}>
2728
<TabletFilled className={`${cartCss.tablet} ${(cartData.amount > 0 ? cartCss.active : null)}`}>

‎src/components/meals/counter/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,4 +25,4 @@ function Counter ({ meal }) {
2525
)
2626
}
2727

28-
export default Counter
28+
export default React.memo(Counter)

‎src/components/meals/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react'
22
import Meal from './meal'
33
import mealsCss from './index.module.css'
44

5-
exportdefaultfunction Meals ({ meals }) {
5+
function Meals ({ meals }) {
66
return (
77
<>
88
<div className={mealsCss.meals}>
@@ -14,3 +14,4 @@ export default function Meals ({ meals }) {
1414
</>
1515
)
1616
}
17+
export default React.memo(Meals)

‎src/components/meals/meal/index.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react'
22
import mealCss from './index.module.css'
33
import Counter from '../counter'
44

5-
exportdefaultfunction Meal ({ meal }) {
5+
function Meal ({ meal }) {
66
return (
77
<div className={mealCss.mealBox}>
88
<img className={mealCss.mealImg} src={meal.img} alt={meal.title} />
@@ -18,3 +18,4 @@ export default function Meal ({ meal }) {
1818
</div>
1919
)
2020
}
21+
export default React.memo(Meal)

‎src/components/search/index.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { SearchOutlined } from '@ant-design/icons'
44
import searchCss from './index.module.css'
55

66
function Search ({ filterFn }) {
7+
console.log('Search')
78
const [keyWord, setKeyWord] = useState('')
89

910
// 使用useEffect进行防抖
@@ -13,11 +14,13 @@ function Search ({ filterFn }) {
1314
filterFn(keyWord)
1415
}, 500)
1516

17+
//这个函数可以称其为清理函数,会在下次Effect执行前调用
18+
//可以在这个函数中,做一些工作来清楚上次Effect执行所带来的影响
1619
return () => {
1720
clearTimeout(timer)
1821
}
1922

20-
}, [keyWord])
23+
}, [keyWord,filterFn])
2124

2225
const searchHandle = (e) => {
2326
setKeyWord(e.target?.value?.trim())
@@ -29,4 +32,4 @@ function Search ({ filterFn }) {
2932
)
3033
}
3134

32-
export default Search
35+
export default React.memo(Search)

‎src/components/ui/backdrop/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,4 +12,4 @@ function Backdrop (props) {
1212
)
1313
}
1414

15-
export default Backdrop
15+
export default React.memo(Backdrop)

‎src/components/ui/confirm/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,4 @@ function Confirm ({ confirm, cancel, text = '' }) {
1818
)
1919
}
2020

21-
export default Confirm
21+
export default React.memo(Confirm)

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /