Class MsgForm

src/components/Msg/MsgForm/index.js:14–101

const isAddMode = pathname => pathname.startsWith('/msg/add')

export default class MsgForm extends Component {
  static contextTypes = {
    router: PropTypes.object.isRequired
  }

  constructor (props, context) {
    // 既然用到了 context，显然需要 super 一下咯
    // 实际上最完善的形式的确就是如下写法
    super(props, context)

    // 初始 state 必须定义，否则会报错
    // 就像在 Vue 中需要在 data 中定义默认值
    this.state = getInitState()

    this.handleChange = handleChange.bind(this) // mixin
  }

  componentDidMount() {
    this.updateState()
  }

  /**
   * 由于本组件为共用组件，但 React 本身不提供类似 Vue 的 canReuse 属性
   * 在 /msg/add <==> /msg/modify/:msgId 之间的跳转，组件保持挂载状态
   * 故需要利用本函数更新 state。不在乎性能者可利用我们的 hack：Redirect 组件
   */
  componentWillReceiveProps(nextProps) {
    this.updateState(nextProps) // 传入 nextProps
  }

  /* 不传入 props 则默认使用当前 props */
  updateState ({ location, params: { msgId }, userData: { username }, msg: { msgs } } = this.props) {
    // 情况1：处于 /msg/add，直接就是还原初始状态
    if (isAddMode(location.pathname)) {
      return this.setState(getInitState())
    }

    // 情况2：处于 /msg/modify/:msgId，且 state 中 msgs 不为空
    if (msgs.length) {
      let nextState = msgs.filter(({ id }) => id === msgId)[0]
      if (!nextState || nextState.author !== username) {
        return this.handleIllegal()
      }
      return this.setState(nextState)
    }

    // 情况3：强制刷新 /msg/detail/:msgId 后，跳转到 /msg/modify/:msgId
    // 此时 state 中 msgs 为空，需要立即从后端 API 获取
    msgService.fetch({ msgId }).then(msg => {
      let { id, title, content, author } = msg
      if (!msg || author !== username) {
        return this.handleIllegal()
      }
      this.setState({ id, title, content })
    })
  }

  handleIllegal () {