資訊專欄INFORMATION COLUMN
摘要：介紹之前，先了解一下和。不同是沒(méi)有實(shí)現(xiàn)，而通過(guò)和的淺比較實(shí)現(xiàn)了。如果組件的和相同時(shí)，的內(nèi)容也一致，那么就可以使用了這樣可以提高組件的性能。例如當(dāng)和中有復(fù)雜數(shù)據(jù)結(jié)果時(shí)，不好使用。示例這種方式依然是一種對(duì)象的淺比較，有復(fù)雜對(duì)象時(shí)無(wú)法。
介紹React.memo之前，先了解一下React.Component和React.PureComponent。
React.ComponentReact.Component是基于ES6 class的React組件。
React允許定義一個(gè)class或者function作為組件，那么定義一個(gè)組件類，就需要繼承React.Component.
例如：
class Welcome extends React.Component {
render() {
return Hello, {this.props.name}
;
}
}
注意：繼承React.Component的React組件類中，render()為必須方法，其他都為可選。
React.PureComponentReact.PureComponent 和 React.Component類似，都是定義一個(gè)組件類。不同是React.Component沒(méi)有實(shí)現(xiàn)shouldComponentUpdate()，而 React.PureComponent通過(guò)props和state的淺比較實(shí)現(xiàn)了。
如果組件的props和state相同時(shí)，render的內(nèi)容也一致，那么就可以使用React.PureComponent了,這樣可以提高組件的性能。
例如：
class Welcome extends React.PureComponent {
render() {
return Hello, {this.props.name}
;
}
}
當(dāng)props和state中有復(fù)雜數(shù)據(jù)結(jié)果時(shí)，不好使用PureComponent。React.memo
React.memo是一個(gè)高階組件，類似于React.PureComponent，不同于React.memo是function組件，React.PureComponent是class組件。
示例：
const MyComponent = React.memo(props => {
/* render using props */
return (
);
});
這種方式依然是一種對(duì)象的淺比較，有復(fù)雜對(duì)象時(shí)無(wú)法render。在React.memo中可以自定義其比較方法的實(shí)現(xiàn)。
例如：
function MyComponent(props) {
/* render using props */
}
function areEqual(prevProps, nextProps) {
/*
return true if passing nextProps to render would return
the same result as passing prevProps to render,
otherwise return false
*/
}
export default React.memo(MyComponent, areEqual);
該方法在V16.6.0才支持
推薦閱讀《React 手稿》
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/99065.html
摘要：函數(shù)組件上面我們探討了如何使用和的方法優(yōu)化類組件的性能。它的作用和類似，是用來(lái)控制函數(shù)組件的重新渲染的。其實(shí)就是函數(shù)組件的。 原文鏈接: Improving Performance in React Functional Component using React.memo 原文作者: Chidume Nnamdi 譯者: 進(jìn)擊的大蔥 推薦理由: 本文講述了開(kāi)發(fā)React應(yīng)用時(shí)如...
摘要：的返回值將作為的參數(shù)，如果返回，則不更新，不能返回或以外的值，否則會(huì)警告。在更新之前調(diào)用，此時(shí)已更新返回值作為的第個(gè)參數(shù)一般用于獲取之前的數(shù)據(jù)語(yǔ)法是從的返回值，默認(rèn)是的使用場(chǎng)景一般是獲取組建更新之前的滾動(dòng)條位置。 React16 后的各功能點(diǎn)是多個(gè)版本陸陸續(xù)續(xù)迭代增加的，本篇文章的講解是建立在 16.6.0 版本上本篇文章主旨在介紹 React16 之后版本中新增或修改的地方，所以對(duì)于...
摘要：一作用獲取目標(biāo)的實(shí)例使用源碼可修改的不可變的對(duì)象沒(méi)見(jiàn)過(guò)這種寫(xiě)法初始化對(duì)象，屬性初始值為解析源碼比較簡(jiǎn)單，就是返回了帶有屬性的二作用從父組件中獲取子組件是的實(shí)例使用是沒(méi)有實(shí)例的，因?yàn)樗牵詻](méi)有，所以不能通過(guò)來(lái)拿到實(shí)例將的傳給子組件，并綁定 showImg(https://segmentfault.com/img/remote/1460000019877636); 一、React.cr...
摘要：在前端開(kāi)發(fā)過(guò)程中，源碼解讀是必不可少的一個(gè)環(huán)節(jié)，我們直接進(jìn)入主題，注意當(dāng)前版本號(hào)。注意包文件僅僅是的必要的功能性的定義，它必須要結(jié)合一起使用下是，原生環(huán)境下是。 在前端開(kāi)發(fā)過(guò)程中，源碼解讀是必不可少的一個(gè)環(huán)節(jié)，我們直接進(jìn)入主題，注意當(dāng)前 React 版本號(hào) 16.8.6。 注意：react 包文件僅僅是 React components 的必要的、功能性的定義，它必須要結(jié)合 React...
摘要：接收一個(gè)屬性，這個(gè)組件會(huì)讓后代組件統(tǒng)一提供這個(gè)變量值。因此對(duì)于同一個(gè)對(duì)象而言，一定是后代元素。解決方法就是把內(nèi)聯(lián)函數(shù)提取出來(lái)，如下講了這么多，我們還沒(méi)有講到其實(shí)我們已經(jīng)講完了的工作原理了。 本節(jié)主要講解以下幾個(gè)新的特性： Context ContextType lazy Suspense 錯(cuò)誤邊界（Error boundaries） memo 想閱讀更多優(yōu)質(zhì)文章請(qǐng)猛戳GitHub博...
閱讀 3347·2023-04-25 16:50
閱讀 978·2021-11-25 09:43
閱讀 3634·2021-09-26 10:11
閱讀 2574·2019-08-26 13:28
閱讀 2586·2019-08-26 13:23
閱讀 2490·2019-08-26 11:53
閱讀 3632·2019-08-23 18:19
閱讀 3048·2019-08-23 16:27
