[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

个人简介

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

主目录

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

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

Android中如何监听手机电话状态
问题描述:当应用中需要对来电这一状态进行处理时(例如来电时显示来电话号码归属地等),就需要对电话状态进行监听. 解决步骤:1.对电话状态的监听最好是放在服务中,因为有一种服务的启动方式可以不依赖于ac ...
[react] 请描述下事件在react中的处理方式是什么？
[react] 请描述下事件在react中的处理方式是什么? 所有时间都挂载到 document 上,然后捕获对应的 dom. 类似事件委托个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容 ...
[react] 在react中无状态组件有什么运用场景
[react] 在react中无状态组件有什么运用场景适用于逻辑简单的纯展示的场景,如资料卡片等个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主 ...
[react] 请描述下你对react的新特性Hooks的理解？它有哪些应用场景？
[react] 请描述下你对react的新特性Hooks的理解?它有哪些应用场景? 在 React 中使用 class 继承 React.Component,就可以在类里面使用各种各样的钩子函数,比如 ...
[react] 简要描述下你知道的react工作原理是什么？
[react] 简要描述下你知道的react工作原理是什么? 我理解的核心部分: 通过虚拟DOM表达真实DOM 通过数据驱动更新虚拟DOM进而更新真实DOM(MVVM) 有一套完整并且合理的 DOM ...
[react] 解释下react中component和pureComponent两者的区别是什么？
[react] 解释下react中component和pureComponent两者的区别是什么? 组件的state或者props更新都会触发render(),同时也会导致子组件render()重新渲 ...
react native在growth stack中的角色思考
Growth Hacker在国内外的互联网界近几年都是比较火热的词,互联网巨头Facebook也许是践行Growth Hacker最好的公司.然而概念吵的火并不等于做的好,如何落地Growth Hac ...
纯前端控件集 WijmoJS 2018V2发布，提供可视化设计器，在React、Vue和Angular中的更易用...
作为一款纯前端控件集,WijmoJS 秉承"快如闪电,触控优先"的设计理念,在提供优质服务和产品的同时,专注于企业应用开发,不断优化产品架构,与时俱进.除在全球率先支持 Angul ...
大前端时代，如何做好C 端业务下的React SSR？\n
React在中后台业务里已经很好落地了,但对于C端(给用户使用的端,比如PC/H5)业务有其特殊性,对性能要求比较苛刻,且有SEO需求.另外团队层面也希望能够统一技术栈,小伙伴们希望成长,那么如何能够 ...

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

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

个人简介

主目录

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

最新文章

热门文章