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 相关文章推荐
js判断浏览器的比较全的代码
Feb 13 Javascript
JavaScript 异步方法队列链实现代码分析
Jun 05 Javascript
js创建对象的几种常用方式小结(推荐)
Oct 24 Javascript
jquery.blockUI.js上传滚动等待效果实现思路及代码
Mar 18 Javascript
jqgrid 编辑添加功能详细解析
Nov 08 Javascript
在js文件中写el表达式取不到值的原因及解决方法
Dec 23 Javascript
Jquery中map函数的用法
Jun 03 Javascript
JS中图片压缩的方法小结
Nov 14 Javascript
解决在vue项目中webpack打包后字体不生效的问题
Sep 01 Javascript
vue 使用html2canvas将DOM转化为图片的方法
Sep 11 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
Nov 06 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
Nov 12 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
配置Apache2.2+PHP5+CakePHP1.2+MySQL5运行环境
2009/04/25 PHP
PHP中“简单工厂模式”实例代码讲解
2012/09/04 PHP
PHP实现支持GET,POST,Multipart/form-data的HTTP请求类
2014/09/24 PHP
PHP代码实现爬虫记录――超管用
2015/07/31 PHP
CodeIgniter自定义控制器MY_Controller用法分析
2016/01/20 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
JavaScript单元测试ABC
2012/04/12 Javascript
5秒后跳转到另一个页面的js代码
2013/10/12 Javascript
jquery实现简单实用的打分程序实例
2015/07/23 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
关于vue.js弹窗组件的知识点总结
2016/09/11 Javascript
jQuery grep()方法详解及实例代码
2016/10/30 Javascript
详解angular2封装material2对话框组件
2017/03/03 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
2017/09/23 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
2018/11/05 Javascript
详解vue2.0 资源文件assets和static的区别
2018/11/27 Javascript
Vue将页面导出为图片或者PDF
2020/08/17 Javascript
Android 自定义view仿微信相机单击拍照长按录视频按钮
2019/07/19 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
2020/07/21 Javascript
vue中activated的用法
2021/01/03 Vue.js
pytyon 带有重复的全排列
2013/08/13 Python
python实现class对象转换成json/字典的方法
2016/03/11 Python
requests和lxml实现爬虫的方法
2017/06/11 Python
Tensorflow之Saver的用法详解
2018/04/23 Python
对numpy数据写入文件的方法讲解
2018/07/09 Python
python判断完全平方数的方法
2018/11/13 Python
pandas DataFrame的修改方法(值、列、索引)
2019/08/02 Python
基于CentOS搭建Python Django环境过程解析
2020/08/24 Python
python实现测试工具(二)——简单的ui测试工具
2020/10/19 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
Django 权限管理(permissions)与用户组(group)详解
2020/11/30 Python
机电一体化求职信
2014/03/10 职场文书
社区文艺活动方案
2014/08/19 职场文书
单位接收证明格式
2015/06/18 职场文书
Java各种比较对象的方式的对比总结
2021/06/20 Java/Android
Django框架之路由用法
2022/06/10 Python