我最开始学习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 './styles/profilecontainer.css'
export default class profilecontainer extends component {
state = { expanded: false }
你也可以在constructor中初始化state，不过我们更喜欢这种简洁的方式。我们还会确保默认导出组件的class。
proptypes 和 defaultprops
import { string, object } from 'prop-types'
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属性。
方法
handlesubmit = (e) => {
e.preventdefault()
this.props.model.save()
handlenamechange = (e) => {
this.props.model.changename(e.target.value)
handleexpand = (e) => {
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)
在上文的例子中，我们是这么做的：
setstate实际是异步执行的，react因为性能原因会将state的变化整合，再一起处理，因此当setstate被调用的时候，state并不一定会立即变化。
这意味着在调用setstate的时候你不能依赖当前的state值——因为你不能确保setstate真正被调用的时候state究竟是什么。
解决方案就是给setstate传入一个方法，该方法接收上一次的state作为参数。
this.setstate(prevstate => ({ expanded: !prevstate.expanded })
解构props
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) => {
this.setstate(prevstate => ({ expanded: !prevstate.expanded }))
render() {
const {
model,
title
} = this.props
return (
<expandableform
onsubmit={this.handlesubmit}
expanded={this.state.expanded}
onexpand={this.handleexpand}>
<div>
<h1>{title}</h1>
<input
type="text"
value={model.name}
onchange={this.handlenamechange}
placeholder="your name"/>
</div>
</expandableform>
)
对于有很多props的组件来说，应当像上述写法一样，将每个属性解构出来，且每个属性单独一行。
装饰器(decorators)
@observer
export default class profilecontainer extends component {
如果你正在使用类似于mobx的状态管理器，你可以按照上述方式描述你的组件。这种写法与将组件作为参数传递给一个函数效果是一样的。装饰器(decorators)是一种非常灵活和易读的定义组件功能的方式。我们使用mobx和mobx-models来结合装饰器进行使用。
如果你不想使用装饰器，可以按照如下方式来做：
class profilecontainer extends component {
// component code
export default observer(profilecontainer)
闭包
避免向子组件传入闭包，如下：
<input
// onchange={(e) => { model.name = e.target.value }}
// ^ 不要这样写，按如下写法：
onchange={this.handlechange}
placeholder="your name"/>
原因在于：每次父组件重新渲染时，都会创建一个新的函数，并传给input。
如果这个input是个react组件的话，这会导致无论该组件的其他属性是否变化，该组件都会重新render。
而且，采用将父组件的方法传入的方式也会使得代码更易读，方便调试，同时也容易修改。
完整代码如下：
// separate local imports from dependencies
// use decorators if needed
// initialize state here (es7) or in a constructor method (es6)
// declare proptypes as static properties as early as possible
// default props below proptypes
// use fat arrow functions for methods to preserve context (this will thus be the component instance)
this.props.model.name = e.target.value
// destructure props for readability
// newline props if there are more than two
// avoid creating new closures in the render method- use methods like below
</expandableform>
函数组件(functional components)
这些组件没有state和方法。它们是纯净的，非常容易定位问题，可以尽可能多的使用这些组件。
proptypes
import react from 'react'
import { func, bool } from 'prop-types'
import './styles/form.css'
expandableform.proptypes = {
onsubmit: func.isrequired,
expanded: bool
// component declaration
这里我们在组件声明之前就定义了proptypes，非常直观。我们可以这么做是因为js的函数名提升机制。
destructuring props and defaultprops(解构props和defaultprops)
expanded: bool,
onexpand: func.isrequired
function expandableform(props) {
const formstyle = props.expanded ? {height: 'auto'} : {height: 0}
return (
<form style={formstyle} onsubmit={props.onsubmit}>
{props.children}
<button onclick={props.onexpand}>expand</button>
</form>
)
我们的组件是一个函数，props作为函数的入参被传递进来。我们可以按照如下方式对组件进行扩展：
function expandableform({ onexpand, expanded = false, children, onsubmit }) {
const formstyle = expanded ? {height: 'auto'} : {height: 0}
<form style={formstyle} onsubmit={onsubmit}>
{children}
<button onclick={onexpand}>expand</button>
我们可以给参数设置默认值，作为defaultprops。如果expanded是undefined,就将其设置为false。(这种设置默认值的方式，对于对象类的入参非常有用，可以避免`can't
read property xxxx of undefined的错误)
不要使用es6箭头函数的写法：
const expandableform = ({ onexpand, expanded, children }) => {
这种写法中，函数实际是匿名函数。如果正确地使用了babel则不成问题，但是如果没有，运行时就会导致一些错误，非常不方便调试。
另外，在jest，一个react的测试库，中使用匿名函数也会导致一些问题。由于使用匿名函数可能会出现一些潜在的问题，我们推荐使用function，而不是const。
wrapping
在函数组件中不能使用装饰器，我们可以将其作为入参传给observer函数
export default observer(expandableform)
完整组件如下所示：
// declare proptypes here, before the component (taking advantage of js function hoisting)
// you want these to be as visible as possible
// destructure props like so, and use default arguments as a way of setting defaultprops
const formstyle = expanded ? { height: 'auto' } : { height: 0 }
// wrap the component instead of decorating it
在jsx中使用条件判断(conditionals in jsx)
有时候我们需要在render中写很多的判断逻辑，以下这种写法是我们应该要避免的：
目前有一些库来解决这个问题，但是我们没有引入其他依赖，而是采用了如下方式来解决：
这里我们采用立即执行函数的方式来解决问题，将if语句放到立即执行函数中，返回任何你想返回的。需要注意的是，立即执行函数会带来一定的性能问题，但是对于代码的可读性来说，这个影响可以忽略。
同样的，当你只希望在某种情况下渲染时，不要这么做：
{
istrue
? <p>true!</p>
: <none/>
而应当这么做：
istrue &&
<p>true!</p>
(全文完)
作者：bupthly
来源：51cto