[react] 描述下在react中无状态组件和有状态组件的区别是什么？

Posted 2021-12-20 前端小歌谣

[react] 描述下在react中无状态组件和有状态组件的区别是什么？

1，无状态组件主要用来定义模板，接收来自父组件props传递过来的数据，使用props.xxx的表达式把props塞到模板里面。无状态组件应该保持模板的纯粹性，以便于组件复用。创建无状态组件如下：

var Header = (props) = (
<div>props.xxx</div>
);
export default Header

2.有状态组件主要用来定义交互逻辑和业务数据（如果用了Redux，可以把业务数据抽离出去统一管理），使用this.state.xxx的表达式把业务数据挂载到容器组件的实例上（有状态组件也可以叫做容器组件，无状态组件也可以叫做展示组件），然后传递props到展示组件，展示组件接收到props，把props塞到模板里面。创建有状态组件如下：
 

class Home extends React.Component 
constructor(props) 
super(props);
;
render() 
return (
<Header/> //也可以写成<Header></Header>
)


export default Home

个人简介

我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易，
但坚持一定很酷。欢迎大家一起讨论

主目录

与歌谣一起通关前端面试题