相关文章
一、有状态组件
定义
有状态组件通常指的是在组件内部管理状态（State）的组件。这些状态可以是组件自身的状态，也可以是从父组件传递而来的 props 经过处理得到的状态。
优点
- 管理状态方便： 有状态组件可以直接使用组件内部的状态，而不需要通过 props 传递数据。
- 可使用生命周期方法： 有状态组件可以使用框架提供的生命周期方法，例如在组件挂载时进行初始化、在更新时执行特定操作等。
- 适用于复杂逻辑： 当组件需要处理复杂的业务逻辑、状态变化时，有状态组件更适合。
缺点
- 代码复杂度高： 有状态组件通常需要处理更多的逻辑，因此代码可能会更加复杂。
- 难以维护： 由于有状态组件需要管理状态，并且可能包含生命周期方法，因此对于初学者或者小型项目来说，可能会增加维护的难度。
适用场景
- 当组件需要处理复杂的业务逻辑、管理内部状态或响应用户交互时，适合使用有状态组件。
- 例如表单组件、容器组件、需要进行网络请求或异步操作的组件等。
示例
计数器
有状态组件适合处理需要管理状态和执行复杂逻辑的场景。例如，我们创建一个简单的计数器组件，该组件可以增加或减少计数值。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| import React, { Component } from 'react';
class Counter extends Component {
constructor(props) {
super(props);
this.state = {
count: 0
};
}
increment = () => {
this.setState(prevState => ({ count: prevState.count + 1 }));
};
decrement = () => {
this.setState(prevState => ({ count: prevState.count - 1 }));
};
render() {
return (
<div>
<p>Count: {this.state.count}</p>
<button onClick={this.increment}>Increment</button>
<button onClick={this.decrement}>Decrement</button>
</div>
);
}
}
export default Counter;
|
动态列表
假设我们有一个需要动态添加或删除列表项的需求，我们可以使用有状态组件来管理列表的状态，并提供添加和删除列表项的方法。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
| import React, { Component } from 'react';
class DynamicList extends Component {
constructor(props) {
super(props);
this.state = {
items: []
};
}
addItem = () => {
const newItem = `Item ${this.state.items.length + 1}`;
this.setState(prevState => ({
items: [...prevState.items, newItem]
}));
};
removeItem = index => {
this.setState(prevState => ({
items: prevState.items.filter((item, i) => i !== index)
}));
};
render() {
return (
<div>
<button onClick={this.addItem}>Add Item</button>
<ul>
{this.state.items.map((item, index) => (
<li key={index}>
{item}
<button onClick={() => this.removeItem(index)}>Remove</button>
</li>
))}
</ul>
</div>
);
}
}
export default DynamicList;
|
二、无状态组件
定义
无状态组件指的是不管理自身状态的组件，它们仅仅接收 props，并根据 props 渲染 UI。这种组件通常是函数组件。
优点
- 简洁明了： 无状态组件通常比有状态组件更加简洁，只关注于 UI 的渲染。
- 易于测试： 由于无状态组件是纯函数，因此易于进行单元测试，输入和输出之间的关系明确。
- 性能优化： 由于没有状态和生命周期方法，无状态组件在渲染性能上可能更优。
缺点
- 无法管理状态： 无状态组件不能直接管理自己的状态，因此对于需要在组件内部改变的数据，需要使用其他手段，如 props 或者上下文。
- 无法使用生命周期方法： 无状态组件不能使用生命周期方法，这在某些情况下可能会限制一些功能的实现。
适用场景
- 当组件仅需要根据 props 渲染 UI，不需要管理状态或执行复杂逻辑时，适合使用无状态组件。
- 例如展示型组件、UI 库中的通用组件、纯函数式组件等。
示例
欢迎消息
无状态组件适合处理简单的 UI 渲染逻辑，它们通常只是根据 props 渲染 UI。例如，我们创建一个简单的欢迎消息组件，该组件根据传入的用户名显示不同的欢迎消息。
1
2
3
4
5
6
7
| import React from 'react';
const WelcomeMessage = ({ username }) => {
return <p>Welcome, {username}!</p>;
};
export default WelcomeMessage;
|
静态列表
假设我们有一个静态的列表，其中的项是固定的，不需要修改。在这种情况下，我们可以使用无状态组件来展示这个列表。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| import React from 'react';
const StaticList = () => {
const items = ['Item 1', 'Item 2', 'Item 3'];
return (
<div>
<ul>
{items.map((item, index) => (
<li key={index}>{item}</li>
))}
</ul>
</div>
);
};
export default StaticList;
|
