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