react house MemoとuseCallbackの違い
15690 ワード
react Hook sが提供する2つのAPIは、データをキャッシュするために使用され、性能を最適化する.
use Memo
データをキャッシュするためには、コンポーネントの内部にレンダリングされたデータが必要です.計算によって、この計算は特定のstate、propsデータに依存しています.私たちはこのデータをuseMemoでキャッシュします.したがって、私たちは彼女たちが依存していないデータソースを修正する場合、この計算関数を何度も呼び出して、計算リソースを浪費します.
直接コード
一つの関数をキャッシュします.この関数が親のコンポーネントからサブコンポーネントに伝達される場合、またはユーザー定義のヤフーksの関数である場合、「一般的にユーザー定義のヤフーの中の関数は、そのコンポーネントの中のデータを参照することに依存しません.」
1,新しい関数を再声明しなくても、メモリを釈放し、メモリを分配する計算資源の浪費を避ける.【React.memoとの併用】
use Memo
データをキャッシュするためには、コンポーネントの内部にレンダリングされたデータが必要です.計算によって、この計算は特定のstate、propsデータに依存しています.私たちはこのデータをuseMemoでキャッシュします.したがって、私たちは彼女たちが依存していないデータソースを修正する場合、この計算関数を何度も呼び出して、計算リソースを浪費します.
直接コード
import React, {
useState, useMemo } from 'react';
function Info(props) {
let [personalInfo , setPersonalInfo] = useState({
name: 'kevin kang',
gender: 'male'
})
function formatGender(gender) {
console.log('--- ---')
return gender === 'male' ? ' ' : ' '
}
// BAD
// useMemo , , formatGender ,
// let gender = formatGender(personalInfo.gender)
// GOOD
let gender = useMemo(()=>{
return formatGender(personalInfo.gender)
},
[personalInfo.gender])
return (
<>
<div>
: {
personalInfo.name} -- : {
gender } <br/>
<button onClick={
()=> {
setPersonalInfo({
...personalInfo,
name: 'Will Kang'
})
}
}> </button>
</div>
</>
)
}
export default Info
useCallback一つの関数をキャッシュします.この関数が親のコンポーネントからサブコンポーネントに伝達される場合、またはユーザー定義のヤフーksの関数である場合、「一般的にユーザー定義のヤフーの中の関数は、そのコンポーネントの中のデータを参照することに依存しません.」
1,新しい関数を再声明しなくても、メモリを釈放し、メモリを分配する計算資源の浪費を避ける.【React.memoとの併用】
import React, {
Component, useState, useEffect, useCallback } from 'react';
// BAD
// function ListItem(props) {
// let addItem = props.addItem
// useEffect(()=>{
// console.log(' ListItem ')
// },[])
// useEffect(()=>{
// console.log(' render')
// })
// return (
// { props.children }
// )
// }
// GOOD shouldComponentUpdate
const ListItem = React.memo((props)=> {
let addItem = props.addItem
useEffect(()=>{
console.log(' ListItem ')
},[])
useEffect(()=>{
console.log(' render')
})
return (
<div onClick={
addItem }> {
props.children } </div>
)
})
let count = 0
function List(props) {
let [list, setList] = useState([])
let [name, setName] = useState('Kevin')
useEffect(()=>{
setList([
'6 ',
'7 ',
'8 '
])
}, [])
const addI = useCallback(()=>{
list.push(' '+ count)
setList([...list])
}, [list])
const modifyName = () => {
setName('K3VIN' + (++count))
}
return (
<>
{
list.map((item, index) => {
return <ListItem key={
index} addItem = {
addI }>
{
item}
</ListItem>
})
}
: {
name} <button onClick={
modifyName}> </button>
</>
)
}
export default List
練習セット:倉庫住所