性能優(yōu)化, React.memo
1. 函數(shù)組件修改同一個值,不會重新渲染.類組件會setState會重新渲染
(當響應(yīng)式數(shù)據(jù)沒有發(fā)生改變時候, 更新時不會重新執(zhí)行, 不會重新render隨機數(shù)沒有變)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style></style>
<script src="../react.development.js"></script>
<script src="../react-dom.development.js"></script>
<script src="../babel.min.js"></script>
<script src="../lodash.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
/*
性能優(yōu)化, React.memo
1. 函數(shù)組件修改同一個值,不會重新渲染.類組件會setState會重新渲染
(當響應(yīng)式數(shù)據(jù)沒有發(fā)生改變時候, 更新時不會重新執(zhí)行, 不會重新render隨機數(shù)沒有變)
2. React.memo類似純組件,可提高組件性能表現(xiàn)(類組件PureComponent)
當傳遞的值發(fā)生改變,重新render,當沒有發(fā)生改變不重新render .
加Math.random(),驗證
*/
let app = document.querySelector('#app');
let root = ReactDOM.createRoot(app);
let { useState } = React;
// 不重新Render
let Welcome = (props) => {
const [ count, setCount ] = useState(0);
const handleClick= () => {
setCount(1);
}
console.log(123);
return (
<div>
<button onClick={handleClick}>點擊</button>
hello Welcome { Math.random() }
</div>
);
}
let element = (
<Welcome />
);
root.render(element);
</script>
</body>
</html>
2. React.memo類似純組件,可提高組件性能表現(xiàn)(類組件PureComponent)
當傳遞的值發(fā)生改變,重新render,當沒有發(fā)生改變不重新render .
加Math.random(),驗證
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../react.development.js"></script>
<script src="../react-dom.development.js"></script>
<script src="../babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
let app = document.querySelector('#app');
let root = ReactDOM.createRoot(app);
let { useState } = React;
let Welcome = (props) => {
const [ count, setCount ] = useState(0);
const handleClick= () => {
setCount(1);
}
return (
<div>
<button onClick={handleClick}>點擊</button>
hello Welcome
<Head count={count} />
</div>
);
}
// 不包裹,每次都更新
// 包裹,依賴更新時候才會更新
let Head = React.memo(() => {
return (
<div>hello Head, { Math.random() }</div>
)
})
let element = (
<Welcome />
);
root.render(element);
</script>
</body>
</html>
文章來源地址http://www.zghlxwxcb.cn/news/detail-672414.html
文章來源：http://www.zghlxwxcb.cn/news/detail-672414.html
到了這里，關(guān)于5.React.memo 性能優(yōu)化的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
