資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究ReactJS – 元件 vs 純元件
在本文中，我們將瞭解 **元件** 和 **純元件** 之間的區別。在 ReactJS 中，元件被廣泛用於使應用程式更有效率和更有效地使用。
ReactJS 提供了兩種不同的使用元件的方式 - 元件或純元件。
元件
它是一種元件，每當傳遞給它的 props 發生變化或其父元件重新渲染時，它都會重新渲染自身。
我們以下例中的第一個元件是 App。此元件是 Comp1 元件的父元件。我們分別建立 Comp1，並將其新增到 App 元件中的 JSX 樹中。只需要匯出 App 元件。
示例
App.jsx
import React from 'react';
class App extends React.Component {
constructor() {
super();
this.state = { color: '#000' };
}
render() {
return (
<div>
<h1 style={{ color: this.state.color }}>Tutorialspoint</h1>
<button onClick={() => this.setState({ color: '#ff0000' })}>
Change Color
</button>
<Comp1 />
</div>
);
}
}
class Comp1 extends React.Component {
render() {
alert('Comp1 component is called');
return (
<div>
<h1>Simply Easy Learning</h1>
</div>
);
}
}
export default App;輸出
以上程式碼將生成以下結果。
純元件
它是一種元件，只有當傳遞給它的 props 發生變化時才會重新渲染，即使其父元件重新渲染或呼叫了 **shouldComponentUpdate()** 方法也不會重新渲染。它被廣泛用於增強 Web 應用程式的效能。
在下面的示例中，我們將使用 **PureComponent** 與 **Comp1** 元件，以便它僅在傳遞給它的 props 發生變化時重新渲染。
示例
App.jsx
import React from 'react';
class App extends React.Component {
constructor() {
super();
this.state = { color: '#000' };
}
render() {
return (
<div>
<h1 style={{ color: this.state.color }}>Tutorialspoint</h1>
<button onClick={() => this.setState({ color: '#ff0000' })}>
Change Color
</button>
<Comp1 />
</div>
);
}
}
class Comp1 extends React.PureComponent {
render() {
alert('Comp1 component is called');
return (
<div>
<h1>Simply Easy Learning</h1>
</div>
);
}
}
export default App;輸出
以上程式碼將生成以下結果。
更新於: 2021年3月18日
1K+ 瀏覽量
廣告