我最开始学习react的时候，看到过各种各样编写组件的方式，不同教程中提出的方法往往有很大不同。当时虽说react这个框架已经十分成熟，但是似乎还没有一种公认正确的使用方法。过去几年中，我们团队编写了很多react组件，我们对实现方法进行了不断的优化，直到满意。

本文介绍了我们在实践中的***实践方式，希望能对无论是初学者还是有经验的开发者来说都有一定的帮助。

在我们开始之前，有几点需要说明：

• 我们是用es6和es7语法
• 如果你不了解展示组件和容器组件的区别，可以先阅读这篇文章
• 如果你有任何建议、问题或者反馈，可以给我们留言

Class Based Components (基于类的组件)

Class based components 有自己的state和方法。我们会尽可能谨慎的使用这些组件，但是他们有自己的使用场景。

接下来我们就一行一行来编写组件。

导入CSS

 
 
 
 

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

我很喜欢CSS in JS，但是它目前还是一种新的思想，成熟的解决方案还未产生。我们在每个组件中都导入了它的css文件。

译者注：目前CSS in JS可以使用css modules方案来解决，webpack的css-loader已经提供了该功能

我们还用一个空行来区分自己的依赖。

译者注：即第4、5行和第1、2行中间会单独加行空行。

初始化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 }  
 
 
 
 

你也可以在constructor中初始化state，不过我们更喜欢这种简洁的方式。我们还会确保默认导出组件的class。

propTypes 和 defaultProps

 
 
 
 

  
  
  
  
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 15.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 }) 
  
  
  
  
 
  
  
  
  
}  
 
 
 
 

使用class components,当你向子组件传递方法的时候，需要确保这些方法被调用时有正确的this值。通常会在向子组件传递时使用this.handleSubmit.bind(this)来实现。当然，使用es6的箭头函数写法更加简洁。

译者注：也可以在constructor中完成方法的上下文的绑定：

 
 
 
 

  
  
  
  
constructor() { 
  
  
  
  
 
  
  
  
  
this.handleSubmit = this.handleSubmit.bind(this); 
  
  
  
  
 
  
  
  
  
}  
 
 
 
 

给setState传入一个函数作为参数(passing setState a Function)

在上文的例子中，我们是这么做的：

 
 
 
 

  
  
  
  
this.setState({ expanded: !this.state.expanded }) 
 
 
 
 

setState实际是异步执行的，react因为性能原因会将state的变化整合，再一起处理，因此当setState被调用的时候，state并不一定会立即变化。

这意味着在调用setState的时候你不能依赖当前的state值——因为你不能确保setState真正被调用的时候state究竟是什么。

解决方案就是给setState传入一个方法，该方法接收上一次的state作为参数。

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

解构props

 
 
 
 

  
  
  
  
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(prevState => ({ expanded: !prevState.expanded })) 
  
  
  
  
  } 
  
  
  
  
   
  
  
  
  
  render() { 
  
  
  
  
    const { 
  
  
  
  
      model, 
  
  
  
  
      title 
  
  
  
  
    } = this.props 
  
  
  
  
    return (  
  
  
  
  
      
  
  
  
  
        onSubmit={this.handleSubmit}  
  
  
  
  
        expanded={this.state.expanded}  
  
  
  
  
        onExpand={this.handleExpand}> 
  
  
  
  
        
 
  
  
  
  
          
{title}
 
  
  
  
  
          
  
  
  
  
            type="text" 
  
  
  
  
            value={model.name} 
  
  
  
  
            onChange={this.handleNameChange} 
  
  
  
  
            placeholder="Your Name"/>