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+XML 省份和城市之间的联动实现代码
Oct 14 Javascript
Jquery 的扩展方法总结
Oct 01 Javascript
深入理解JavaScript高级之词法作用域和作用域链
Dec 10 Javascript
javascript中数组的定义及使用实例
Jan 21 Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 Javascript
javascript多物体运动实现方法分析
Jan 08 Javascript
JS 清除字符串数组中,重复元素的实现方法
May 24 Javascript
yarn与npm的命令行小结
Oct 20 Javascript
通过js给网页加上水印背景实例
Jun 17 Javascript
JS实现简单省市二级联动
Nov 27 Javascript
JavaScript 面向对象程序设计详解【类的创建、实例对象、构造函数、原型等】
May 12 Javascript
基于angular实现树形二级表格
Oct 16 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投票程序源码
2007/03/11 PHP
PHP使用数组实现队列
2012/02/05 PHP
php+js实现图片的上传、裁剪、预览、提交示例
2013/08/27 PHP
Centos6.5和Centos7 php环境搭建方法
2016/05/27 PHP
PHP数组访问常用方法解析
2020/09/05 PHP
兼容IE/Firefox/Opera/Safari的检测页面装载完毕的脚本Ext.onReady的实现
2009/07/14 Javascript
js或css文件后面跟参数的原因说明
2010/01/09 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
2013/01/23 Javascript
Google Map V3 绑定气泡窗口(infowindow)Dom事件实现代码
2013/04/26 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
JavaScript调用客户端的可执行文件(示例代码)
2013/11/28 Javascript
JQuery中dataGrid设置行的高度示例代码
2014/01/03 Javascript
javascript教程:关于if简写语句优化的方法
2014/05/17 Javascript
jquery 表格排序、实时搜索表格内容(附图)
2014/05/19 Javascript
JS简单限制textarea内输入字符数量的方法
2015/10/14 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
2017/05/19 Javascript
React Native之TextInput组件解析示例
2017/08/22 Javascript
vue-router 路由基础的详解
2017/10/17 Javascript
vue路由嵌套的SPA实现步骤
2017/11/06 Javascript
使用vue-cli(vue脚手架)快速搭建项目的方法
2018/05/21 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
详解用async/await来处理异步
2019/08/28 Javascript
你知道JavaScript Symbol类型怎么用吗
2020/01/08 Javascript
python列表去重的二种方法
2014/02/14 Python
如何用Python制作微信好友个性签名词云图
2019/06/28 Python
Python函数生成器原理及使用详解
2020/03/12 Python
Python如何读写字节数据
2020/08/05 Python
python中操作文件的模块的方法总结
2021/02/04 Python
潘多拉珠宝俄罗斯官方网上商店:PANDORA俄罗斯
2020/09/22 全球购物
学期自我评价
2014/01/27 职场文书
房屋出售协议书
2014/04/10 职场文书
《学棋》教后反思
2014/04/14 职场文书
高效课堂标语
2014/06/26 职场文书
舌尖上的中国观后感
2015/06/02 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书