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

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

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

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};

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 "_blank" href="https://github.com/kriasoft/react-decorators" rel="external nofollow" >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 。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。