React Hooks ---useMemo
摘要：
useMemo
下面我們通過一個例項，來理解下 useMemo的用法。
父元件
function App() {
const [name, setName] = useState('名稱')
const [content,setContent...
useMemo
下面我們通過一個例項，來理解下 useMemo的用法。
- 父元件
function App() {
const [name, setName] = useState('名稱')
const [content,setContent] = useState('內容')
return (
<>
<button onClick={() => setName(new Date().getTime())}>name</button>
<button onClick={() => setContent(new Date().getTime())}>content</button>
<Button name={name}>{content}</Button>
</>
)
}
- 子元件
function Button({ name, children }) {
function changeName(name) {
console.log('11')
return name + '改變name的方法'
}
const otherName =changeName(name)
return (
<>
<div>{otherName}</div>
<div>{children}</div>
</>
)
}
熟悉react的同學可以很顯然的看出，當我們點選父元件的按鈕的時候，子元件的name和children都會發生變化。
注意我們列印console.log的方法。
不管我們是改變name或者content的值，我們發現 changeName的方法都會被呼叫。
是不是意味著 我們本來只想修改content的值，但是由於name並沒有發生變化，所以無需執行對應的changeName方法。但是發現他卻執行了。 這是不是就意味著效能的損耗，做了無用功。
下面我們使用useMemo進行優化
- 優化之後的子元件
function Button({ name, children }) {
function changeName(name) {
console.log('11')
return name + '改變name的方法'
}
const otherName =useMemo(()=>changeName(name),[name])
return (
<>
<div>{otherName}</div>
<div>{children}</div>
</>
)
}
export default Button
這個時候我們點選 改變content值的按鈕，發現changeName 並沒有被呼叫。
但是點選改變name值按鈕的時候，changeName被呼叫了。
所以我們可以使用useMemo方法 避免無用方法的呼叫，當然一般我們changName裡面可能會使用useState來改變state的值，那是不是就避免了元件的二次渲染。
達到了優化效能的目的