React的组件模式
组件是 React 的核心,因此了解如何利用它们对于创建优秀的设计结构至关重要。
什么是组件
根据 React 官网的介绍,“组件让你可以将 UI 分割成独立的、可重用的部分,并独立管理每个部分。”
当你第一次安装 npm install react
时,会得到一件事:组件及其 API。与 JavaScript 函数类似,组件接受名为 “props” 的输入并返回 React 元素,该元素描述(声明)用户界面(UI)的外观。这就是为什么 React 被称为声明性 API,因为你告诉它你希望 UI 是什么样子的,而 React 负责其余的工作。
可以把声明式想像成当打的去一个目的地时,只需要告诉司机去哪里,他就会开车把你送到那里。命令式编程正好相反—,你得自己驾车到那里。
组件的 API
当安装 React 后,便可以使用 React 提供的 API,基本可以分成 5 种。
- render
- state
- props
- context
- lifecycle events
尽管一个组件可以使用上述所有 API,但一个组件通常用到只有少数几个 API,而其他组件则只使用其他 API。
可以对组件使用不同的 API 对组件进行划分,分为 有状态(stateful) 和 无状态(stateless) 两种组件。
- 有状态组件通常使用 API: render, state 和生命周期相关事件。
- 无状态组件通常使用 API: render, props 和 context。
以上就是我们为佬要介绍 组件模式 的原因。组件模式是使用 React 时的最佳实践,最初引入组件模式是为了将数据逻辑和 UI 表现层进行分离。通过在组件之间划分职责,您以创建更多可重用的、内聚的组件,这些组件可用于组合复杂的 UI,这在构建可扩展的应用程序时尤其重要。
组件模式
通常组件模式有以下几种:
- Container (容器组件)
- Presentational (展示组件)
- Higher order components (高级组件)
- Render callback (渲染回调)
代码部署后可能存在的BUG没法实时知道,事后为了解决这些BUG,花了大量的时间进行log 调试,这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
Container (容器组件)
“容器组件就是取数据,然后渲染子组件而已” —— Jason Bonta
容器组件是你的数据或逻辑层并利用 stateful API,使用生命周期事件,你可以连接 state
到
redux
或者 Flux
的 storage
中,并将数据和回调作为 props
传递给子组件。
在容器组件的 render
方法中,你可以使用 展示组件 来渲染具体的样式。为了能够访问到所有状态 API,容器组件必须使用 class
的方式声明,而不是使用函数式方法声明。
在下面的示例中,我们有一个名为 Greeting
的类组件,它具有状态,生命周期事件componentDidMount()
和 render
方法。
class Greeting extends React.Component {
constructor() {
super();
this.state = {
name: "",
};
}
componentDidMount() {
// AJAX
this.setState(() => {
return {
name: "William",
};
});
}
render() {
return (
<div>
<h1>Hello! {this.state.name}</h1>
</div>
);
}
}
此时,该组件是一个有状态类组件,为了使 Greeting
成为一个容器组件,我们可以将 UI 拆分为一个 展示组件,将在下面进行说明。
展示组件
展示组件 使用 props
、render
和 context
(无状态API),并且由于不需要使用生命周期相关 Api,可以使用纯函数来简化表述它们:
const GreetingCard = (props) => {
return (
<div>
<h1>Hello! {props.name}</h1>
</div>
)
}
展示组件 仅从 props
接收数据和回调,这些数据和回调可以由其容器组件(父组件)提供。
容器组件和展示组件各自将数据/逻辑和展示部分封装到各自的组件中:
const GreetingCard = (props) => {
return (
<div>
<h1>{props.name}</h1>
</div>
)
}
class Greeting extends React.Component {
constructor() {
super();
this.state = {
name: "",
};
}
componentDidMount() {
// AJAX
this.setState(() => {
return {
name: "William",
};
});
}
render() {
return (
<div>
<GreetingCard name={this.state.name} />
</div>
);
}
}
如你所见,已经将 Greeting
组件中展示相关的部分移动到了它自己的函数式展示组件中。当然,这是一个非常简单的例子——对于更复杂的应用程序,这也是最基本的。
高阶组件
高阶组件是一种函数,它接受一个组件作为参数,然后返回一个新的组件。
这是一种可以对输入组件的 props
进行修改(增删改查)然后返回全新的修改后的组件强大模式,想想 react-router-v4 和 redux 。用了 react-router-v4 后,你可以使用 withRouter() 来继承以 props
形式传递给组件的各种方法。同样,用了redux
,就可以使用 connect({})()
方法来将展示组件和 store
中的数据进行连接。
代码演示:
import {withRouter} from 'react-router-dom';
class App extends React.Component {
constructor() {
super();
this.state = {path: ''}
}
componentDidMount() {
let pathName = this.props.location.pathname;
this.setState(() => {
return {
path: pathName,
}
})
}
render() {
return (
<div>
<h1>Hi! I'm being rendered at: {this.state.path}</h1>
</div>
)
}
}
export default withRouter(App);
导出组件时,使用用 react-router-v4 的 withRouter()
方法封装它。 在 组件 App 的生命周期事件 componentDidMount()
方法中,我们使用this.props.location.pathname
提供的值来更新 state
。 由于我们使用了 withRouter
高阶组件,我们可以直接访问 this.props.locationlocation
,而不需要直接将 location
作为 props
直接传入,非常方便。
渲染回调
与高阶组件类似,渲染回调或渲染 props
被用于共享或重用组件逻辑。虽然许多开发人员倾向于使用 高阶组件 的可重用逻辑,但是使用 渲染回调 仍然有一些非常好的理由和优势——这是在 Michael Jackson 的“永不写另一个高阶组件”中得到了最好的解释。简而言之,渲染回调减少了命名空间冲突,并更好的说明了逻辑来源。
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count: 0,
};
}
increment = () => {
this.setState(prevState => {
return {
count: prevState.count + 1,
};
});
};
render() {
return (
<div onClick={this.increment}>{this.props.children(this.state)}</div>
);
}
}
class App extends React.Component {
render() {
return (
<Counter>
{state => (
<div>
<h1>The count is: {state.count}</h1>
</div>
)}
</Counter>
);
}
}
在 Counter
类中,在 render
方法中嵌入 this.props.children
并将 this.state
作为参数。在 App
类中,我们可以将我们组件封装在 Counter
组件中,因此我可以操作 Counter
组件内的逻辑。
Counter
组件的本质是暴露了 children
这个外部属性,将 children
具体的渲染细节交个 Counter
的使用者,使用的时候只需要将组件传入到 Counter
的 children
中,当然可以使用其他参数,如果 children
不够的话。
关于Fundebug
Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java线上应用实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了10亿+错误事件,付费客户有Google、360、金山软件、百姓网等众多品牌企业。欢迎大家免费试用!
React的组件模式的更多相关文章
- React 组件模式
简评:组件(component)是 React 的核心,了解它们有助于构建好的设计结构. 什么是组件(component) 组件运行你将 UI 拆分为独立的可重用的部分.和 JavaScript 函数 ...
- React Native 组件之TextInput
React Native 组件之TextInput类似于iOS中的UITextView或者UITextField,是作为一个文字输入的组件,下面的TextInput的用法和相关属性. /** * Sa ...
- [转] React 中组件间通信的几种方式
在使用 React 的过程中,不可避免的需要组件间进行消息传递(通信),组件间通信大体有下面几种情况: 父组件向子组件通信 子组件向父组件通信 跨级组件之间通信 非嵌套组件间通信 下面依次说下这几种通 ...
- beeshell —— 开源的 React Native 组件库
介绍 beeshell 是一个 React Native 应用的基础组件库,基于 0.53.3 版本,提供一整套开箱即用的高质量组件,包含 JavaScript(以下简称 JS)组件和复合组件(包含 ...
- Webpack+React+ES6开发模式入门指南
React无疑是今年最火的前端框架,github上的star直逼30,000,基于React的React Native的star也直逼20,000.有了React,组件化似乎不再步履蹒跚,有了Reac ...
- 移动web端的react.js组件化方案
背景: 随着互联网世界的兴起,web前端开发的方式越来越多,出现了很多种场景开发的前端架构体系,也对前端的要求日益增高,早已经不是靠一个JQuery.js来做前端页面的时代了,而今移动端变化最大,近 ...
- Griddle, griddle-react 一个REACT 表格组件
Griddle, griddle-react 一个REACT 表格组件: http://griddlegriddle.github.io/Griddle/index.html
- React Native组件之Text
React Native组件之Text相当于iOS中的UILabel. 其基本属性如下: /** * Sample React Native App * https://github.com/face ...
- React Native组件之Switch和Picker和Slide
React Native组件Switch类似于iOS中的UISwitch:组件Slide类似于iOS中UIslider,组件Picker类似于iOS的UIPickerView.他们的使用方法和相关属性 ...
随机推荐
- java发送短信验证码
业务: 手机端点击发送验证码,请求发送到java服务器端,由java调用第三方平台(我们使用的是榛子云短信http://smsow.zhenzikj.com)的短信接口,生成验证码并发送. SDK下载 ...
- Golang Go Go Go part2:变量及常量声明
三.关键字及内置预声明常量.类型.函数 1.关键字 Go有25个关键字,只能用在语法允许的地方,不能作为名称使用,它们是: break default func ...
- Dubbo 分布式事务一致性实现
我觉得事务的管理不应该属于Dubbo框架, Dubbo只需实现可被事务管理即可, 像JDBC和JMS都是可被事务管理的分布式资源, Dubbo只要实现相同的可被事务管理的行为,比如可以回滚, 其它事务 ...
- Java web每天学之Servlet工作原理详情解析
上篇文章中我们介绍了Servlet的实现方式以及Servlet的生命周期,我们这篇文章就来介绍一下常用对象. 点击回顾:<Java Web每天学之Servlet的工作原理解析>:<J ...
- [Swift]LeetCode146. LRU缓存机制 | LRU Cache
Design and implement a data structure for Least Recently Used (LRU) cache. It should support the fol ...
- [Swift]LeetCode655. 输出二叉树 | Print Binary Tree
Print a binary tree in an m*n 2D string array following these rules: The row number m should be equa ...
- 12.Flask-Restful
定义Restful的视图 安装:pip install flask-restful 如果使用Flask-restful,那么定义视图函数的时候,就要继承flask_restful.Resourse类, ...
- JVM基础系列第9讲:JVM垃圾回收器
前面文章中,我们介绍了 Java 虚拟机的内存结构,Java 虚拟机的垃圾回收机制,那么这篇文章我们说说具体执行垃圾回收的垃圾回收器. 总的来说,Java 虚拟机的垃圾回收器可以分为四大类别:串行回收 ...
- 死磕 java集合之HashMap源码分析
欢迎关注我的公众号"彤哥读源码",查看更多源码系列文章, 与彤哥一起畅游源码的海洋. 简介 HashMap采用key/value存储结构,每个key对应唯一的value,查询和修改 ...
- SqlServer突破亿级数据操作瓶颈(出处:转载)
首先声明,我只是个程序员,不是专业的DBA,以下这篇文章是从一个问题的解决过程去写的,而不是一开始就给大家一个正确的结果,如果文中有不对的地方,请各位数据库大牛给予指正,以便我能够更好的处理此次业务. ...