React 中被忽略的函数组件(Functional Components)
来源:互联网 发布:软件项目管理总结报告 编辑:程序博客网 时间:2024/06/08 02:26
React中有两种组件:函数组件(Functional Components) 和类组件(Class Components)。据我观察,大部分同学都习惯于用类组件,而很少会主动写函数组件,包括我自己也是这样。但实际上,在使用场景和功能实现上,这两类组件是有很大区别的。
来看一个函数组件的例子:
function Welcome = (props) => { const sayHi = () => { alert(`Hi ${props.name}`); } return ( <div> <h1>Hello, {props.name}</h1> <button onClick ={sayHi}>Say Hi</button> </div> )}
把上面的函数组件改写成类组件:
import React from 'react'class Welcome extends React.Component { constructor(props) { super(props); this.sayHi = this.sayHi.bind(this); } sayHi() { alert(`Hi ${this.props.name}`); } render() { return ( <div> <h1>Hello, {this.props.name}</h1> <button onClick ={this.sayHi}>Say Hi</button> </div> ) } }
下面让我们来分析一下两种实现的区别:
第一眼直观的区别是,函数组件的代码量比类组件要少一些,所以函数组件比类组件更加简洁。千万不要小看这一点,对于我们追求极致的程序员来说,这依然是不可忽视的。
函数组件看似只是一个返回值是DOM结构的函数,其实它的背后是无状态组件(Stateless Components)的思想。函数组件中,你无法使用State,也无法使用组件的生命周期方法,这就决定了函数组件都是展示性组件(Presentational Components),接收Props,渲染DOM,而不关注其他逻辑。
函数组件中没有
this
。所以你再也不需要考虑this
带来的烦恼。而在类组件中,你依然要记得绑定this
这个琐碎的事情。如示例中的sayHi
。函数组件更容易理解。当你看到一个函数组件时,你就知道它的功能只是接收属性,渲染页面,它不执行与UI无关的逻辑处理,它只是一个纯函数。而不用在意它返回的DOM结构有多复杂。
性能。目前React还是会把函数组件在内部转换成类组件,所以使用函数组件和使用类组件在性能上并无大的差异。但是,React官方已承诺,未来将会优化函数组件的性能,因为函数组件不需要考虑组件状态和组件生命周期方法中的各种比较校验,所以有很大的性能提升空间。
函数组件迫使你思考最佳实践。这是最重要的一点。组件的主要职责是UI渲染,理想情况下,所有的组件都是展示性组件,每个页面都是由这些展示性组件组合而成。如果一个组件是函数组件,那么它当然满足这个要求。所以牢记函数组件的概念,可以让你在写组件时,先思考这个组件应不应该是展示性组件。更多的展示性组件意味着更多的组件有更简洁的结构,更多的组件能被更好的复用。
所以,当你下次在动手写组件时,一定不要忽略了函数组件,应该尽可能多地使用函数组件。
- React 中被忽略的函数组件(Functional Components)
- react学习-受控组件(controlled components)
- React--Components and Props(组件和属性组件)
- React 组件/库集合:Awesome React Components
- React中文教程 - Advanced Components(组件高级使用)
- 被忽略的jQuery中data()函数
- React 高阶组件(Higher-Order Components)
- 16 Functional Stateless Components
- React中组件的生命周期
- React组件中不要绑定匿名函数
- React学习之-(React Components Lifecycle)
- 助你完全理解React高阶组件(Higher-Order Components)
- 助你完全理解React高阶组件(Higher-Order Components)
- (三)React Native中Navigation组件的快速入门
- Android API中被忽略的几个函数接口
- App Components(应用组件)
- 02_组件(Components)
- react 函数式组件
- hdu-4451 思维题
- Linux下安装mysql
- Go语言的安装与设置
- Codeforces Round #394 (Div. 2) E. Dasha and Puzzle —— 构造 + 贪心
- Android 如何判断当前线程是否是主线程
- React 中被忽略的函数组件(Functional Components)
- js事件浏览器兼容案例
- iOS 内存恶鬼drawRect
- K线绘制接口设计
- Oracle中的rownum不能使用大于>的问题
- Html+css学习笔记
- wust oj 1510 最长连续不下降序列
- bootstrap学习
- UndupportedClassVersionError,编译Java时不会报错,执行时报错的原因。