React Component存在的几种形式详解


Posted in Javascript onNovember 06, 2018

前言

最近项目基本都是用 React,今天总结分享 React Component 常见的几种形式,如果你在写 React 时经常不知道怎么拆分代码,这篇文章或许对你有所帮助。

React.Component是一个抽象基类。这意味着直接引用React.Component是毫无意义的。你可以实现一个它的子类,并且至少定义一个render()方法即可使用。

为了更充分理解 React,先搞懂平时写的 JSX 是什么。初学的时候有比较大困惑,这是一门新语言吗?大部分人是匆匆扫过文档就开始开发。通过 babel-presets-react 处理能看到,其实 JSX 只是语法糖,最终在浏览器跑的还是 JS。React Component 最终都通过 React.createElement 创建。 总之,写 React 其实就是在写 JS 。

React Component存在的几种形式详解

SFC (Stateless Functional Component)

React 可以使用 Function 来创建 Component,这类 Component 没有 lifecycle, 内部不维护 state,只要传入的 props 有变化则进行重新渲染。

function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

用箭头函数的写法还更加简洁。

const Welcome = props => <h1>Hello, {props.name}</h1>;

上面两种形式生成 es5 代码都是一样的。

var Welcome = function Welcome(props) {
return _react2.default.createElement(
"h1",
null,
"Hello, ",
props.name
);
};

SFC 的特点是纯粹只做 render,代码简短没有其他条件分支,并且相比 class Component 编译后的代码量会少一些。

尴尬的是,在 React 16.7 react hooks 出来之后,SFC 这个名字有歧义了,因为用上 useState,SFC 也可以有 local state, 同样可以拥有 lifecycle。再称之为 Stateless Components 就很尴尬,改名叫 FC ?

HOC (Higher-Order Components)

高阶组件对于 Vue 开发者来说应该是个陌生的概念(不知道,我用 Vue 的时候没见过类似的用法)。从代码上看,高阶组件就是一个方法,传入一个组件,返回另一个组件。

function logProps(WrappedComponent) {
return class extends React.Component {
componentWillReceiveProps(nextProps) {
console.log('Current props: ', this.props);
console.log('Next props: ', nextProps);
}
render() {
return <WrappedComponent {...this.props} />;
}
}
}

最常见的高阶组件是 react-redux 里面的 connect 方法,通过传入 组件和 map*ToProps 方法,让组件和 store 连接。组件内部就可以直接通过 props 获得 connect 之后的值。

exprot default connect(
mapStateToProps,
mapDispatchToProps,
)(Component);

高阶组件适合用来扩展功能,把这部分功能从业务组件中抽离出来,需要的套上,不需要的时候移除,对被包裹组件侵入性非常小。

Dynamic Component

有些业务场景下,在执行时才能确定具体的标签或者组件是什么。在 React 的世界里面,以大写字母开头会被当成动态组件加载,而小写字母开头会被认为是 HTML DOM tag。

// Heading.js
render() {
const { tag: Tag, children } = this.props;
return <Tag>{ children }</Tag>
}

根据万物皆为 JS 理论,只要传入不同的 tag 标签,就会渲染出不同的 heading 标签。

React Component存在的几种形式详解

我们常用这种方式,在后端配置组件和数据,前端读取配置之后渲染出对应的内容。

FaCC(Functions as Child Components)

React children 还可以是 Function 类型,如果直接调用它会什么写法?

比如封装一个 Loading 组件,会给 children 提供 loading 参数,业务组件再根据 loading 判断需要 render 什么内容。

class LoadArea extends Component {
state = {
loading: true,
};

componentDidMount() {
asyncFunc()
.then(() => {
this.setState({
loading: false,
})
})
.catch(() => {
this.setState({
loading: false,
})
})
}

render() {
return (
<React.Fragment>
{this.props.children({
...this.props,
...this.state,
})}
</React.Fragment>
);
}
}

用法

render() {
<LoadingArea>
({ loading }) => {
loading
? <Wating />
: <Main />
}
</LoadingArea>
}

同样的,最终执行时都是 JS,没有什么好奇怪的。

React 16.* 新版本的 Conext.Consumer 就是采用了这种写法。

render() {
<ThemeContext.Provider value={this.state.theme}>
...
<ThemeContext.Consumer>
{({theme}) => (
<button
style={{backgroundColor: theme.background}}>
Toggle Theme
</button>
)}
</ThemeContext.Consumer>
...
</ThemeContext.Provider> 
}

再以最近开发的例子,分享组件拆分的好处。

需求:开发倒计时组件,运营配置倒计时结束时间,倒计时初始化时间从服务端获取,结束之前显示倒计时,倒计时结束之后做对应的操作,比如切换倒计时为其他组件。

组件拆分:

  • 一个业务层容器组件,负责统筹,处理业务逻辑。
  • 一个通用‘倒计时'的组件,向服务端轮询系统时间,计算当前剩余时间,FaCC 的形式提供给 children。
  • 一个倒计时UI组件,对剩余时间格式化以及 UI 展示。

伪代码:

// CountDownContainer.js
render() {
const {
endTime,
renderSomethingAfterCountDown,
} = this.props;

return (
<TimeLeftProvider endTime={endTime} >
{seconds => (
seconds > 0
? <CountDown {...this.props} remainingSeconds={seconds} />
: renderSomethingAfterCountDown()
)}
</TimeLeftProvider>
);
}
// TimeLeftProvider.js
export default class TimeLeftProvider extends PureComponent {
static propTypes = {
children: PropTypes.func,
endTime: PropTypes.number,
}

// ...

componentDidMount() {
this.poll();
}

poll() {
queryServerTime();
this.pollTimer = setInterval(() => {
queryServerTime();
}, pollInterval * 1000);
}

countDown() {
setInterval(() => {
this.setState(prevState => ({
remainingSeconds: prevState.remainingSeconds - 1,
}));
}, 1000);
}

render() {
const { remainingSeconds, reliable } = this.state;
return this.props.children(remainingSeconds, reliable);
}
}
// CountDown.js

function CountDown(props) {
const {
remainingSeconds,
} = props;
const numbers = formatSeconds(remainingSeconds);
const inputs = ['days', 'hours', 'minutes', 'seconds'];

return (
<div styleName={cls}>
{
inputs.map(key => ({
label: key,
number: numbers[key],
})).map(
//...
)
}
</div>
);
}

最终得到的结果是:

React Component存在的几种形式详解

与此同时

  • 代码结构清晰,组件之间各司其职。
  • 组件可复用性强。
  • 单元测试简单,每个组件都只测试自身的逻辑。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
屏蔽F1~F12的快捷键的js函数
May 06 Javascript
关于JavaScript中var声明变量作用域的推断
Dec 16 Javascript
ajax java 实现自动完成功能
Dec 19 Javascript
javascript中数组的concat()方法使用介绍
Dec 18 Javascript
Jquery 获取指定标签的对象及属性的设置与移除
May 29 Javascript
js+css实现tab菜单切换效果的方法
Jan 20 Javascript
jquery实现全选、不选、反选的两种方法
Sep 06 Javascript
es6函数之尾递归用法实例分析
Apr 25 Javascript
详解react组件通讯方式(多种)
May 06 Javascript
全局安装 Vue cli3 和 继续使用 Vue-cli2.x操作
Sep 08 Javascript
jQuery实现二级导航菜单的示例
Sep 30 jQuery
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 Javascript
支付宝小程序tabbar底部导航
Nov 06 #Javascript
利用JavaScript缓存远程窃取Wi-Fi密码的思路详解
Nov 05 #Javascript
利用hasOwnProperty给数组去重的面试题分享
Nov 05 #Javascript
微信小程序实现底部导航
Nov 05 #Javascript
对 Vue-Router 进行单元测试的方法
Nov 05 #Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
Nov 05 #Javascript
微信小程序http连接访问解决方案的示例
Nov 05 #Javascript
You might like
浅析php与数据库代码开发规范
2013/08/08 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
javascript编程起步(第六课)
2007/02/27 Javascript
不能再简单的无闪刷新验证码原理很简单
2007/11/05 Javascript
Javascript获取窗口(容器)的大小及位置参数列举及简要说明
2012/12/09 Javascript
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
jquery实现兼容浏览器的图片上传本地预览功能
2013/10/14 Javascript
jquery实现简单实用的打分程序实例
2015/07/23 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
2015/11/02 Javascript
JavaScript实现短信倒计时60s
2017/10/09 Javascript
JavaScript实现简单的文本逐字打印效果示例
2018/04/12 Javascript
react-router 路由切换动画的实现示例
2018/12/03 Javascript
express.js中间件说明详解
2019/03/19 Javascript
VUE项目初建和常见问题总结
2019/09/12 Javascript
Python构建图像分类识别器的方法
2019/01/12 Python
对Python3 pyc 文件的使用详解
2019/02/16 Python
用python实现刷点击率的示例代码
2019/02/21 Python
Django模型序列化返回自然主键值示例代码
2019/06/12 Python
简单了解python中对象的取反运算符
2019/07/01 Python
对Django 转发和重定向的实例详解
2019/08/06 Python
pycharm中使用request和Pytest进行接口测试的方法
2020/07/31 Python
python+flask编写一个简单的登录接口
2020/11/13 Python
Python获取指定网段正在使用的IP
2020/12/14 Python
TUMI澳大利亚网站:美国旅行箱包品牌
2017/03/27 全球购物
Emporio Armani腕表天猫官方旗舰店:乔治·阿玛尼为年轻人设计的副线品牌
2017/07/02 全球购物
如何用Lucene索引数据库
2016/02/23 面试题
《翻越远方的大山》教学反思
2014/04/13 职场文书
学校运动会广播稿范文
2014/10/02 职场文书
领导班子整改方案和个人整改措施
2014/10/25 职场文书
酒店辞职信怎么写
2015/02/27 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书
2016元旦文艺汇演主持词(开场白+结束语)
2015/12/03 职场文书
手把手教你制定暑期学习计划,让你度过充实的暑假
2019/08/22 职场文书
MySQL kill不掉线程的原因
2021/05/07 MySQL
将Python代码打包成.exe可执行文件的完整步骤
2021/05/12 Python