React 无状态组件(Stateless Component) 与高阶组件


Posted in Javascript onAugust 14, 2018

无状态组件(Stateless Component) 是 React 0.14 之后推出的,大大增强了编写 React 组件的方便性,也提升了整体的渲染性能。

无状态组件 (Stateless Component)

function HelloComponent(props, /* context */) {
 return <div>Hello {props.name}</div>
}
ReactDOM.render(<HelloComponent name="Sebastian" />, mountNode)

HelloComponent 第一个参数是 props,第二个是 context。最后一句也可以这么写:

ReactDOM.render(HelloComponent{ name:"Sebastian" }, mountNode)

可以看到,原本需要写“类”定义(React.createClass 或者 class YourComponent extends React.Component)来创建自己组件的定义,现在被精简成了只写一个 render 函数。更值得一提的是,由于仅仅是一个无状态函数,React 在渲染的时候也省掉了将“组件类” 实例化的过程。

结合 ES6 的解构赋值,可以让代码更精简。例如下面这个 Input 组件:

function Input({ label, name, value, ...props }, { defaultTheme }) {
 const { theme, autoFocus, ...rootProps } = props
 return (
  <label
   htmlFor={name}
   children={label || defaultLabel}
   {...rootProps}
  >
  <input
   name={name}
   type="text"
   value={value || ''}
   theme={theme || defaultTheme}
   {...props}
  />
 )}
Input.contextTypes = {defaultTheme: React.PropTypes.object};

这个 Input 组件(仅仅是示例)直接实现了 label/inputText 的组合:

  1. defaultTheme 是从 Context 中解构出来的,如果 props 没有设定 theme,就将用 defaultTheme 替代。
  2. autoFocus 需要被传递到底层的 inputText 而不能同时遗留给 label,因此会先通过 { theme, autoFocus, ...rootProps } = props 拿出来。

无状态组件用来实现 Server 端渲染也很方便,只要避免去直接访问各种 DOM 方法。

无状态组件与组件的生命周期方法

我们可以看到,无状态组件就剩了一个 render 方法,因此也就没有没法实现组件的生命周期方法,例如 componentDidMount, componentWillUnmount 等。那么如果需要让我们的 Input 组件能够响应窗口大小的变化,那么该如何实现呢?这其实还是要引入“有状态的组件”,只不过这个“有状态的组件”可以不仅仅为 "Input" 组件服务。

const ExecutionEnvironment = require('react/lib/ExecutionEnvironment')
const defaultViewport = { width: 1366, height: 768 }; // Default size for server-side rendering

function withViewport(ComposedComponent) {
 return class Viewport extends React.Component {
  state = {
   // Server 端渲染和单元测试的时候可未必有 DOM 存在
   viewport: ExecutionEnvironment.canUseDOM ? 
    { width: window.innerWidth, height: window.innerHeight } : defaultViewport
  }
  componentDidMount() {
   // Server 端渲染是不会执行到 `componentDidMount` 的,只会执行到 `componentWillMount`
   window.addEventListener('resize', this.handleWindowResize)
   window.addEventListener('orientationchange', this.handleWindowResize)
  }
  componentWillUnmount() {
   window.removeEventListener('resize', this.handleWindowResize)
   window.removeEventListener('orientationchange', this.handleWindowResize)
  }
  render() {
   return <ComposedComponent {...this.props} viewport={this.state.viewport}/>
  }

  handleWindowResize() {
   const { viewport } = this.state
   if (viewport.width !== window.innerWidth || viewport.height !== window.innerHeight) {
    this.setState({ viewport: { width: window.innerWidth, height: window.innerHeight } })
   }  
  }
 }
}

*** 专业的实现参看 https://github.com/kriasoft/react-decorators ***

那么,下面我们就可以创建出一个有机会响应窗口大小变化的 Input 组件:

const SizeableInput = withViewport(Input)
ReactDOM.render(<SizeableInput name="username" label="Username" {...props} />, mountNode)

withViewort 作为一个 "高阶组件" 可不仅仅是为了 Input 服务的。它可以为你需要的任何组件添加上 viewport 属性,当窗口大小变化时,触发重绘。

如果你用过 Redux,那么应该也熟悉 "connect decorator" 的用法。"connect decorator" 也是一个高阶组件,因此,你可以继续来“拼凑”:

const UserNameInput = connect(
 state => ({ value: state.username })
)(SizeableInput)

高阶组件的存在有两个好处:

  • 当写着写着无状态组件的时候,有一天忽然发现需要状态处理了,那么无需彻底返工:)
  • 往往我们需要状态的时候,这个需求是可以重用的,例如上面的 withViewport,今后可以用来给其他组件(无论是否是无状态组件)添加 viewport 属性。

高阶组件加无状态组件,则大大增强了整个代码的可测试性和可维护性。同时不断“诱使”我们写出组合性更好的代码。

无状态组件不支持 "ref"

有一点遗憾的是无状态组件不支持 "ref"。原理很简单,因为在 React 调用到无状态组件的方法之前,是没有一个实例化的过程的,因此也就没有所谓的 "ref"。

ref 和 findDOMNode 这个组合,实际上是打破了父子组件之间仅仅通过 props 来传递状态的约定,是危险且肮脏,需要避免。

无状态组件尚不支持 babel-plugin-react-transform 的 Hot Module Replacement

如果你是用 Webpack 以及 HMR,用 babel-plugin-react-transform 来做 jsx 转换等,那么当你在编辑器中修改无状态组件的源代码的时候,HMR 并不会在浏览器中自动载入修改后的代码。具体问题跟踪请参 https://github.com/gaearon/babel-plugin-react-transform/issues/57 。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE 下的只读 innerHTML
Aug 21 Javascript
jquery中动态效果小结
Dec 16 Javascript
JavaScript运行时库属性一览表
Mar 14 Javascript
JavaScript中对象属性的添加和删除示例
May 12 Javascript
JavaScript中的pow()方法使用详解
Jun 15 Javascript
angularjs实现简单的购物车功能
Sep 21 Javascript
JS抛物线动画实例制作
Feb 24 Javascript
Vue中的情侣属性$dispatch和$broadcast详解
Mar 07 Javascript
JS回调函数深入理解
Oct 16 Javascript
Vue搭建后台系统需要注意的问题
Nov 08 Javascript
小程序实现多个选项卡切换
Jun 19 Javascript
JS sort排序详细使用方法示例解析
Sep 27 Javascript
浅析Vue实例以及生命周期
Aug 14 #Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
Aug 14 #Javascript
详解angular应用容器化部署
Aug 14 #Javascript
使用node.js实现微信小程序实时聊天功能
Aug 13 #Javascript
JQuery通过后台获取数据遍历到前台的方法
Aug 13 #jQuery
AngularJS实现与后台服务器进行交互的示例讲解
Aug 13 #Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
Aug 13 #Javascript
You might like
php中对xml读取的相关函数的介绍一
2008/06/05 PHP
ThinkPHP中公共函数路径和配置项路径的映射分析
2014/11/22 PHP
php读取flash文件高宽帧数背景颜色的方法
2015/01/06 PHP
PHP YII框架开发小技巧之模型(models)中rules自定义验证规则
2015/11/16 PHP
PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
2016/05/22 PHP
PHP检查URL包含特定字符串实例方法
2019/02/11 PHP
laravel 中某一字段自增、自减的例子
2019/10/11 PHP
获取内联和链接中的样式(js代码)
2013/04/11 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
jQuery实现购物车多物品数量的加减+总价计算
2014/06/06 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
2017/03/14 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
js随机生成一个验证码
2017/06/01 Javascript
详解React native全局变量的使用(跨组件的通信)
2017/09/07 Javascript
webpack+react+antd脚手架优化的方法
2018/04/02 Javascript
vue项目打包部署_nginx代理访问方法详解
2018/09/20 Javascript
react 移动端实现列表左滑删除的示例代码
2019/07/04 Javascript
在Python3中初学者应会的一些基本的提升效率的小技巧
2015/03/31 Python
python3+selenium实现qq邮箱登陆并发送邮件功能
2019/01/23 Python
Python提取支付宝和微信支付二维码的示例代码
2019/02/15 Python
与Django结合利用模型对上传图片预测的实例详解
2019/08/07 Python
PyQt中使用QtSql连接MySql数据库的方法
2020/07/28 Python
全球知名巧克力品牌:Godiva
2016/07/22 全球购物
公务员转正考察材料
2014/02/07 职场文书
领导干部群众路线个人对照检查材料思想汇报
2014/09/30 职场文书
未婚证明书模板
2014/10/08 职场文书
考研英语复习计划
2015/01/19 职场文书
小学生家长意见
2015/06/03 职场文书
2015大学党建带团建工作总结
2015/07/23 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书
2016三严三实专题教育活动心得体会
2016/01/06 职场文书
2016暑期社会实践心得体会范文
2016/01/14 职场文书
用Python监控你的朋友都在浏览哪些网站?
2021/05/27 Python
分析Python感知线程状态的解决方案之Event与信号量
2021/06/16 Python
教你利用Nginx 服务搭建子域环境提升二维地图加载性能的步骤
2021/09/25 Servers