有状态组件和无状态组件的区别

最新推荐文章于 2025-05-24 11:18:25 发布

转载最新推荐文章于 2025-05-24 11:18:25 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhaodagang8/p/11114285.html

文章标签：

#javascript #ViewUI

本文深入探讨了React中的有状态和无状态组件的区别与使用方法，详细介绍了两种组件的写法及性能对比，帮助开发者更好地理解并选择合适的组件类型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、有状态组件 (stateful components)

平时用的大部分是有状态组件

写法：

import React,{Component} from 'react';

export default class Bottom extends Component{
constructor(props){
super(props);
this.sayHi = this.sayHi.bind(this)//记得绑定this，否则this指向可能会出错
}

sayHi(){
let {name} = this.props
console.log(`Hi ${name}`);
}
render(){
let {name} = this.props
let{sayHi} =this;
return(
<div>
<h1>{`Hello, ${name}`}</h1>
<button onClick ={sayHi}>Say Hi</button>
</div>
)
}

}

二、无状态组件 (stateless components)

它是一种函数式组件，没有state, 接收Props，渲染DOM，而不关注其他逻辑

写法：

import React,{Component} from 'react';
export default function Bottom(props){
let{name} = props
const sayHi = () => {
console.log(`Hi ${name}`);
}
return (
<div>
<h1>Hello, {name}</h1>
<button onClick ={sayHi}>Say Hi</button>
</div>
)
}

两都在性能方面比较，无状态组件性能更高些。

调用无状态组件方式, 方式 2 性能高：

1、<Bottom name="jason" />

2、Bottom（{name: "jason"}）

转载于:https://www.cnblogs.com/zhaodagang8/p/11114285.html