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 相关文章推荐
jquery 1.4.2发布!主要是性能与API
Feb 25 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
Aug 27 Javascript
js中生成map对象的方法
Jan 09 Javascript
JS实现图片高亮展示效果实例
Nov 24 Javascript
bootstrap-wysiwyg结合ajax实现图片上传实时刷新功能
May 27 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 Javascript
详解AngularJS1.x学习directive 中‘&amp; ’‘=’ ‘@’符号的区别使用
Aug 23 Javascript
基于javascript中的typeof和类型判断(详解)
Oct 27 Javascript
js 图片转base64的方式(两种)
Apr 24 Javascript
JS实现区分中英文并统计字符个数的方法示例
Jun 09 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
Sep 18 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
Apr 10 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
Amazon Prime Video平台《无限住人 -IMMORTAL-》2020年开始TV放送!
2020/03/06 日漫
php实现高效获取图片尺寸的方法
2014/12/12 PHP
PHP检测用户语言的方法
2015/06/15 PHP
javascript中的prototype属性使用说明(函数功能扩展)
2010/08/16 Javascript
Javascript判断对象是否相等实现代码
2013/03/18 Javascript
jquery幻灯片插件bxslider样式改进实例
2014/10/15 Javascript
Javascript常用字符串判断函数代码分享
2014/12/08 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
2016/03/05 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
让你一句话理解闭包(简单易懂)
2016/06/03 Javascript
js 判断一组日期是否是连续的简单实例
2016/07/11 Javascript
基于react框架使用的一些细节要点的思考
2017/05/31 Javascript
使用async、enterproxy控制并发数量的方法详解
2018/01/02 Javascript
小程序实现列表删除功能
2018/10/30 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
一篇文章看懂JavaScript中的回调
2021/01/05 Javascript
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
数据挖掘之Apriori算法详解和Python实现代码分享
2014/11/07 Python
Python中查看文件名和文件路径
2017/03/31 Python
python中 logging的使用详解
2017/10/25 Python
Python实现一个数组除以一个数的例子
2019/07/20 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
python3 BeautifulSoup模块使用字典的方法抓取a标签内的数据示例
2019/11/28 Python
Python读取xlsx数据生成图标代码实例
2020/08/12 Python
CSS3+JavaScript实现炫酷呼吸效果的示例代码
2020/06/15 HTML / CSS
UNIX文件类型
2013/08/29 面试题
路政管理专业推荐信
2013/11/11 职场文书
《童年》教学反思
2014/02/18 职场文书
2014年护理工作总结范文
2014/11/14 职场文书
委托证明范本
2014/11/25 职场文书
2015年党员自我剖析材料
2014/12/17 职场文书
人与自然观后感
2015/06/16 职场文书
小学语文课《掌声》教学反思
2016/03/03 职场文书
浅析Python OpenCV三种滤镜效果
2022/04/11 Python
Oracle删除归档日志及添加定时任务
2022/06/28 Oracle