React.memo - props比较机制
在使用memo函数缓存组件之后,React会对每一个prop使用Object.is比较老值和新值。只有全部返回true的时候,才表示props没有变化,就会跳过渲染。
当prop是简单类型,比较的是新值和旧值,例如:
当prop是引用类型(对象、数组),比较的是新值和旧值的引用,React只关心引用是否变化,例如:
示例
props是简单类型:当传递给子组件的props发生变化时
import { memo, useState } from "react"
const MemoSon = memo(function Son({ count }) {
console.log('子组件重新渲染了')
return <div>this is son {count}</div>
})
function App() {
const [count, setCount] = useState(0)
console.log('父组件重新渲染了')
return (
<div>
<MemoSon count={count} />
<button onClick={() => setCount(count + 1)}>点击改变count的值</button>
</div >
)
}
export default App
初始展示:
点击按钮,改变count的值,子组件也被重新渲染了:
props是简单类型:当传递给子组件的props没有发生变化时
import { memo, useState } from "react"
const MemoSon = memo(function Son({ count }) {
console.log('子组件重新渲染了')
return <div>this is son {count}</div>
})
function App() {
const [count, setCount] = useState(0)
console.log('父组件重新渲染了')
const num = 100
return (
<div>
<MemoSon count={num} />
<button onClick={() => setCount(count + 1)}>点击改变count的值</button>
</div >
)
}
export default App
初始展示:
点击按钮改变count的值,但因为传递给子组件的props并没有变化,所以子组件不会重新渲染:
传递的props是引用类型:props发生变化,引发子组件重新渲染
import { memo, useState } from "react"
const MemoSon = memo(function Son({ list }) {
console.log('子组件重新渲染了')
return <div>this is son {list}</div>
})
function App() {
const [count, setCount] = useState(0)
console.log('父组件重新渲染了')
// 注意:每次父组件重新渲染,App这个函数会重新执行,list会得到一个全新的引用。
// 当引用发生变化的时候,就认为传递给子组件的props发生了变化,引发子组件的重新渲染
const list = [1, 2, 3]
return (
<div>
<MemoSon list={list} />
<button onClick={() => setCount(count + 1)}>点击改变count的值</button>
</div >
)
}
export default App
初始展示:
点击按钮引起父组件重新渲染,子组件也重新渲染了:
传递的props是引用类型:props没有发生变化,子组件不会重新渲染
import { memo, useMemo, useState } from "react"
const MemoSon = memo(function Son({ list }) {
console.log('子组件重新渲染了')
return <div>this is son {list}</div>
})
function App() {
const [count, setCount] = useState(0)
console.log('父组件重新渲染了')
const list = useMemo(() => {
return [1, 2, 3]
// 传递给useMemo的第二个参数是一个空数组,表示空依赖,表示useMemo第一个参数代表的函数只有在组件渲染完毕后执行一次
}, [])
return (
<div>
<MemoSon list={list} />
<button onClick={() => setCount(count + 1)}>点击改变count的值</button>
</div >
)
}
export default App
初始展示:
点击按钮,引发父组件重新渲染,但因为传递给子组件的props引用并没有发生变化,所以子组件不会重新渲染: