数据结构
网络
关系型数据库管理系统
操作系统
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+ 浏览量
广告