react 创建组件 (四)Stateless Functional Component
上面我们提到的创建组件的方式,都是用来创建包含状态和用户交互的复杂组件,当组件本身只是用来展示,所有数据都是通过props传入的时候,我们便可以使用Stateless Functional Component
来快速创建组件。例如下面代码所示:
import React from 'react'; const Button = ({ day, increment }) => { return ( <div> <button onClick={increment}>Today is {day}</button> </div> ) } Button.propTypes = { day: PropTypes.string.isRequired, increment: PropTypes.func.isRequired, }
这种组件,没有自身的状态,相同的props输入,必然会获得完全相同的组件展示。因为不需要关心组件的一些生命周期函数和渲染的钩子,所以不用继承自Component显得更简洁。
对比
createClass vs Component
对于React.createClass
和 extends React.Component
本质上都是用来创建组件,他们之间并没有绝对的好坏之分,只不过一个是ES5的语法,一个是ES6的语法支持,只不过createClass支持定义PureRenderMixin,这种写法官方已经不再推荐,而是建议使用PureComponent。
pureComponent vs Component
通过上面对PureComponent和Component的介绍,你应该已经了解了二者的区别:PureComponent
已经定义好了shouldUpdateComponent
而Component
需要显示定义。
Component vs Stateless Functional component
-
Component
包含内部state,而Stateless Functional Component
所有数据都来自props,没有内部state; -
Component
包含的一些生命周期函数,Stateless Functional Component
都没有,因为Stateless Functional component
没有shouldComponentUpdate
,所以也无法控制组件的渲染,也即是说只要是收到新的props,Stateless Functional Component
就会重新渲染。 -
Stateless Functional Component
不支持Refs
选哪个?
这里仅列出一些参考:
-
createClass, 除非你确实对ES6的语法一窍不通,不然的话就不要再使用这种方式定义组件。
-
Stateless Functional Component, 对于不需要内部状态,且用不到生命周期函数的组件,我们可以使用这种方式定义组件,比如展示性的列表组件,可以将列表项定义为Stateless Functional Component。
-
PureComponent/Component,对于拥有内部state,使用生命周期的函数的组件,我们可以使用二者之一,但是大部分情况下,我更推荐使用PureComponent,因为它提供了更好的性能,同时强制你使用不可变的对象,保持良好的编程习惯。
相关文章
- 数据搬运组件:基于Sqoop管理数据导入和导出
- 【微信小程序】-- 表单组件 - picker 实现日期选择器(五十三)
- 使用 react-native-tab-navigator 创建 TabBar 组件
- react 项目实战(四)组件化表单/表单控件 高阶组件
- 微信小程序 自定义组件(stepper)
- [转]详解vue父组件传递props异步数据到子组件的问题
- 从零开始的react入门教程(二),从react组件说到props/state的联系与区别
- windows server 2008 w3svc服务无法启动,错误 1068依赖服务或组件无法启动
- react发布一个组件库 系列篇(二)
- React组件间通信(常用方式,简单易用)
- React学习笔记 -- 组件通信之路由传参(react-router-dom)
- React创建组件的三种方式
- Delphi TIdTCPClient组件
- SwiftUI 自定义组件之表格数据展示筛选排序组件(教程含源码)
- macOS SwiftUI 字段和标签组件规范之 04 搜索框范围栏Search Fields
- React高级篇(一)从Flux到Redux,react-redux
- React教程之 React 中的高阶组件 (HOC) 简介
- react项目Bug:组件销毁清除监听(Can't perform a React state update on an unmounted component.)
- react路由组件&&非路由组件
- React创建组件两种写法:React.createClass和extends Component的区别
- React之组件生命周期钩子
- React函数式组件的性能优化
- react基础知识,jsx规则,组件定义
- React函数式组件值之useMemo()和useCallback()