react封装函数_React中函数式声明组件
前文介绍的组件的定义方式主要是声明式组件,其与传统的jQuery中以DOM操作为核心的命令式组件生成相比具有更大的灵活性与可组合性。而实际上随着应用复杂度与所需要的组件数目的持续增加,我们所需要的组件也会被划分为很多的类型。从组件组合的角度或者所谓动态组件的角度来看,常见的即是HOC模式,即将某个组件作为另一个组件的Props或者子组件从而封装出高阶组件。还有另一种偏向函数式的模式即是构造出函数式组件,就好像Arrow Function一样,对于无状态的简单组件,使用函数式组件的方式声明,会使得代码的可读性更好,并且减少冗余代码的数目。在React本身对于界面的抽象可以用View = f(props),即纯粹的界面的渲染函数可以近似看做纯函数。函数式组件与基于Class声明的组件相比,其具有以下特性:
不需要声明类,可以避免大量的譬如extends或者constructor这样的代码
不需要显示声明this关键字,在ES6的类声明中往往需要将函数的this关键字绑定到当前作用域,而因为函数式声明的特性,我们不需要再强制绑定:
onClick={this.sayHi.bind(this)}>Say Hi
onClick={sayHi}>Say Hi
贯彻最佳实践,在React组件复用与组合中我们会提到,应当避免在底层的展示性组件中混入对于状态的管理,而应该将状态托管于某个高阶组件或者其他的状态容器中。利用函数式声明组件可以彻底保证不会在组件中进行状态操作。
易于理解与测试
更佳的性能表现:因为函数式组件中并不需要进行生命周期的管理与状态管理,因此React并不需要进行某些特定的检查或者内存分配,从而保证了更好地性能表现。
最后,通过下图的对比,可以看出函数式组件声明方法的简洁性:
Usage:使用
这里我们定义一个简单的Text组件:
class Text extends React.Component {
render() {
return
{this.props.children}
;
}
}
React.render(Hello World, document.body);
上面定义的Text组件可以看做典型的Pure Components,或者说是Dummy Components,即好像函数式编程中的纯函数一样,输出完全由输入的Props决定,并且不会产生任何的副作用。这种类型的组件会在我们的应用中占据很大的份额,而在React 0.14之后也允许我们以类似于定义函数的方式来定义这种无状态组件,如下所示:
const Text = (props) =>
{props.children}
;
// ReactDOM is part of the introduction of React 0.14
ReactDOM.render(
Hello World,
document.querySelector('#root')
);
这种模式主要是鼓励在大型项目中尽可能地以简单的写法来分割原本庞大的组件,而未来React也会面向这种无状态的组件在譬如避免无意义的检查或者内存分配领域进行一些专门的优化。这种无状态函数式组件的写法也是支持设置默认的Props类型与值的:
const Text = ({ children }) =>
{children}
Text.propTypes = { children: React.PropTypes.string };
Text.defaultProps = { children: 'Hello World!' };
我们也可以利用ES6默认函数参数的方式来设置默认值:
const Text = ({ children = 'Hello World!' }) =>
{children}
另外,在无状态的组件函数中,我们也是可以访问Context的:
const Text = (props, context) =>
props.children
;
Text.contextTypes = {
fontFamily: React.PropTypes.string
};
class App extends React.Component {
static childContextTypes = {
fontFamily: React.PropTypes.string
}
getChildContext() {
return {
fontFamily: 'Helvetica Neue'
};
}
render() {
return Hello World;
}
}
react封装函数_React中函数式声明组件相关推荐
- react封装函数_react request.js 函数封装
1.request.js 函数封装 import { Toast } from 'antd-mobile'; import axios from 'axios'; import store from ...
- react封装函数_React 模式-将函数作为 children 传入和 render prop - 极客教程
最近几个月来,React 社区开始转向一个有趣的方向.到目前为止,我们的示例中的 children 属性都是 React 组件.然而,有一种新的模式越来越受欢迎,children 属性是一个 JSX ...
- react回调函数_React中的回调中自动绑定ES6类函数
在使用ES6类的React组件时,您必须遇到这种现象,必须显式绑定类函数,然后将其传递给诸如onClick.例如,采用以下示例. import React from 'react';class MyC ...
- react封装函数_GitHub - daifee/react-component: 用 React 封装一套常用组件
Daifee-React-Component 用 React 封装一套常用组件 所有组件都是 stateless 组件,但为方便,某些组件提供 API 调用方式的静态方法. [TOC] 使用前须知 源 ...
- react 条件渲染_React中的条件渲染语法
react 条件渲染 为什么我们不能使用If-Else以及三元运算符如何提供帮助 (Why We Can't Use If-Else and How the Ternary Operator can ...
- react 元素延迟加载_React中的延迟加载路线
react 元素延迟加载 As developers, when we build apps for users on the internet, it is very important to en ...
- react取消捕获_React中阻止事件冒泡的问题详析
前言 最近在研究react.redux等,网上找了很久都没有完整的答案,索性自己整理下,这篇文章就来给大家介绍了关于React阻止事件冒泡的相关内容,下面话不多说了,来一起看看详细的介绍吧 在正式开始 ...
- usestate中的回调函数_React 中获取数据的 3 种方法:哪种最好?
译文 | https://cloud.tencent.com/developer/article/1535913 原文 | https://dmitripavlutin.com/ 在执行 I/O 操作 ...
- react封装函数_React-Router源码解读
起因 目前负责的项目中有一个微信网页,用的是react技术栈.在该项目中增加了一个微信分享功能后,线上ios出现了问题,经排查,定位到了react的路由系统. 这次线上bug,让我决定,先从react ...
最新文章
- Auto ML自动调参
- C#利用Graphics类绘制进阶--绘制商品69码EAN-13
- java静态变量和实例变量的区别6_java静态变量的与实例变量的区别
- WAVE SUMMIT平行论坛 :产教融合,人才共育
- lucene DocValues——没有看懂
- android 数据库sqlite的使用
- 软件维护费 一般按照多少比例_2021年国家电网招聘:笔试进面一般是多少比例?...
- C++ 大话数据结构 09: 中缀表达式 转后缀表达式 计算器
- 挂起某线程命令 Linux,linux 线程挂起恢复的简单示例
- DateFormat(炸窝)
- JAVA校内报纸实验_实验(实训)中心2011—2012学年第二学期工作计划
- 【四】Java流程控制
- matlab 加入高频噪声_Wavelet Integrated CNNs提高图像分类的噪声鲁棒性
- 联想 键盘 fn linux,开发者提交补丁,Linux 5.10 或支持联想 PC 键盘快捷键
- UNIX/Linux系统取证之信息采集案例
- [leetcode]209. 长度最小的子数组
- 事务管理最佳实践多余的话之二:Transaction后缀给声明式事务管理带来的好处
- 《威胁建模:设计和交付更安全的软件》——3.11 小结
- 十三届蓝桥杯国赛 内存空间 python 满分答案
- 茫茫社招路,硕士毕业半年的抉择