react

React模式#1 无状态函数

无状态函数(Stateless functions)是一种非常好的方式来定义可复用组件，它们内部不保存状态state或者引用refs，仅仅是函数。

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

下面是一些说明：

可以给无状态函数传入属性props和上下文信息context作为参数

1
2
const Greeting = (props, contex) =>
  <div style={{color: context.color}}>Hi {props.name}!</div>

可以定义局部变量(当使用了函数体时)

1
2
3
4
5
6
7
8
const Greeting = (props, contex) => {
  const style = {
    fontWeight: "bold",
    color: contex.color,
  }
  return <div style={style}>{props.name}</div>
}

但是我们还可以使用其他函数来达到相同的目的：

1
2
3
4
5
6
7
8
// 先定义了一个获取样式的函数
const getStyle = context => ({
  fontWeight: "bold",
  color: contex.color,
});
const Greeting = (props, contex) =>
  <div style={getStyle(context)}>{props.name}</div>

可以定义defaultProps, propTypes 和 contextTypes

1
2
const Greeting = (props, contex) =>
  <div style={getStyle(context)}>{props.name}</div>
1
2
3
4
5
6
7
8
9
Greeting.propTypes = {
  name: PropTypes.string.isRequired
}
Greeting.defaultProps = {
  name: "Guest"
}
Greeting.contextTypes = {
  color: PropTypes.string
}