摘要：引入初始化使用句法定义初始化和和的声明应该置顶便于其他开发者阅读。在版本，推荐使用这个包替代。组件内的方法使用在方法中箭头函数来替代是异步的。高阶组件完整代码在组件前声明解构通过函数入参默认值的方式设定

原文：Our Best Practices for Writing React Components . 
这里意译。有些点在之前的文章里提到过：#2
译文地址：https://github.com/YutHelloWo...

如果组件带有state或者方法，就使用Class写法。

如果组件带有state或者方法，就使用Class写法。

import React, { Component } from "react"
import { observer } from "mobx-react"
import ExpandableForm from "./ExpandableForm"
import "./styles/ProfileContainer.css"

使用ES7句法定义state

import React, { Component } from "react"
import { observer } from "mobx-react"
import ExpandableForm from "./ExpandableForm"
import "./styles/ProfileContainer.css"
export default class ProfileContainer extends Component {
  state = { expanded: false }

import React, { Component } from "react"
import { observer } from "mobx-react"
import { string, object } from "prop-types"
import ExpandableForm from "./ExpandableForm"
import "./styles/ProfileContainer.css"
export default class ProfileContainer extends Component {
  state = { expanded: false }
 
  static propTypes = {
    model: object.isRequired,
    title: string
  }
 
  static defaultProps = {
    model: {
      id: 0
    },
    title: "Your Name"
  }

propTypes和defaultProps的声明应该置顶便于其他开发者阅读。在React v15.3.0版本，推荐使用prop-types这个包替代React.PropTypes。
重要的一点：所有的组件都应当有propTypes验证。

import React, { Component } from "react"
import { observer } from "mobx-react"
import { string, object } from "prop-types"
import ExpandableForm from "./ExpandableForm"
import "./styles/ProfileContainer.css"
export default class ProfileContainer extends Component {
  state = { expanded: false }
 
  static propTypes = {
    model: object.isRequired,
    title: string
  }
 
  static defaultProps = {
    model: {
      id: 0
    },
    title: "Your Name"
  }
  handleSubmit = (e) => {
    e.preventDefault()
    this.props.model.save()
  }
  
  handleNameChange = (e) => {
    this.props.model.changeName(e.target.value)
  }
  
  handleExpand = (e) => {
    e.preventDefault()
    this.setState({ expanded: !this.state.expanded })
  }

使用在方法中箭头函数来替代this.handleExpand.bind(this)

this.setState(prevState => ({ expanded: !prevState.expanded }))

render() {
    const {
      model,
      title
    } = this.props
    return ( 
      
        

          
{title}
          
        
      
    )
  }

  { model.name = e.target.value }}
            // ^ Not this. Use the below:
            onChange={this.handleChange}
            placeholder="Your Name"/>

import React, { Component } from "react"
import { observer } from "mobx-react"
import { string, object } from "prop-types"
// 分开本地导入和依赖导入
import ExpandableForm from "./ExpandableForm"
import "./styles/ProfileContainer.css"

// 使用修饰器（如果有的话）
@observer
export default class ProfileContainer extends Component {
  state = { expanded: false }
  // 初始化state (ES7) 或者在构造函数(constructor)中初始化state (ES6)
 
  //使用静态属性(ES7)声明propTypes越早越好
  static propTypes = {
    model: object.isRequired,
    title: string
  }

  // 在propTypes后声明defaultProps
  static defaultProps = {
    model: {
      id: 0
    },
    title: "Your Name"
  }

  // 使用箭头函数绑定指向定义的上下文的this
  handleSubmit = (e) => {
    e.preventDefault()
    this.props.model.save()
  }
  
  handleNameChange = (e) => {
    this.props.model.name = e.target.value
  }
  
  handleExpand = (e) => {
    e.preventDefault()
    this.setState(prevState => ({ expanded: !prevState.expanded }))
  }
  
  render() {
    // 解构props成可读的
    const {
      model,
      title
    } = this.props
    return ( 
      
        // 如果有2个以上props,分行写
        

          
{title}
           { model.name = e.target.value }}
            // 避免创造新的闭包，应该使用下面的方法。
            onChange={this.handleNameChange}
            placeholder="Your Name"/>
        
      
    )
  }
}

---

import React from "react"
import { observer } from "mobx-react"
import { func, bool } from "prop-types"
import "./styles/Form.css"
ExpandableForm.propTypes = {
  onSubmit: func.isRequired,
  expanded: bool
}
// Component declaration

import React from "react"
import { observer } from "mobx-react"
import { func, bool } from "prop-types"
import "./styles/Form.css"
ExpandableForm.propTypes = {
  onSubmit: func.isRequired,
  expanded: bool,
  onExpand: func.isRequired
}
function ExpandableForm(props) {
  const formStyle = props.expanded ? {height: "auto"} : {height: 0}
  return (
    

      {props.children}
      Expand
    
  )
}

结合ES6的函数入参解构，可以如下书写

import React from "react"
import { observer } from "mobx-react"
import { func, bool } from "prop-types"
import "./styles/Form.css"
ExpandableForm.propTypes = {
  onSubmit: func.isRequired,
  expanded: bool,
  onExpand: func.isRequired
}
function ExpandableForm({ onExpand, expanded = false, children, onSubmit }) {
  const formStyle = expanded ? {height: "auto"} : {height: 0}
  return (
    

      {children}
      Expand
    
  )
}

const ExpandableForm = ({ onExpand, expanded, children }) => {

虽然语法没问题，但是这里函数是匿名函数。

import React from "react"
import { observer } from "mobx-react"
import { func, bool } from "prop-types"
import "./styles/Form.css"
ExpandableForm.propTypes = {
  onSubmit: func.isRequired,
  expanded: bool,
  onExpand: func.isRequired
}
function ExpandableForm({ onExpand, expanded = false, children, onSubmit }) {
  const formStyle = expanded ? {height: "auto"} : {height: 0}
  return (
    

      {children}
      Expand
    
  )
}
export default observer(ExpandableForm)

import React from "react"
import { observer } from "mobx-react"
import { func, bool } from "prop-types"
// Separate local imports from dependencies
import "./styles/Form.css"

// 在组件前声明propTypes
ExpandableForm.propTypes = {
  onSubmit: func.isRequired,
  expanded: bool,
  onExpand: func.isRequired
}

// 解构props,通过函数入参默认值的方式设定defaultProps
function ExpandableForm({ onExpand, expanded = false, children, onSubmit }) {
  const formStyle = expanded ? { height: "auto" } : { height: 0 }
  return (
    

      {children}
      Expand
    
  )
}

// Wrap the component instead of decorating it
export default observer(ExpandableForm)