react-bits：无状态函数组件

react-bits
原文
无状态函数是一种很有用的定义高可复用组件的方法。
他们不拥有状态，只是函数。
使用函数的优点是视图和逻辑的分离，由于没有内部的状态处理和逻辑，视图和逻辑的分离更为彻底。
无状态函数组件因为没有状态和生命周期函数，性能得以提升，react团队在未来的版本将会避免无意义的检查和内存分配

import {PropTypes,ContextTypes} from "react";

const Greeting = () => <div>Hi there!</div>;

// They get passed props and context
const Greeting = (props,context) =>
  <div style={{color: context.color}}>Hi {props.name}</div>;

// They can define a local variable,when a function block is used.
const Greeting = (props,context) => {
  const style = {
    fontWeight: "bold",color: context.color
  };

  return <div style={style}>{props.name}</div>
};

// But you could get the same result by using other functions.
const getStyle = context => ({
  fontWeight: "bold",color: context.color
});

const Greeting = (props,context) =>
  <div style={getStyle(context)}>{props.name}</div>;

// They can have defined defaultProps,propTypes and contextTypes.

Greeting.propTypes = {
  name: PropTypes.string.isRequired
};
Greeting.defaultProps = {
  name: "Guest"
};
Greeting.contextTypes = {
  color: PropTypes.string
};