翻译：Our Best Practices for Writing React Components
image.png

Reat组件最佳实践

几点建议：

Class Based Components

对于类组件，应该尽可能少的应用，

Imporing CSS

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

从理论上讲， CSS in JavaScript，方案是好的，但是还不够成熟。到目前为止，为每一个组件定义一个CSS文件是比较好的做法。

Initializing State

  1. import React, { Component } from 'react'
  2. import { observer } from 'mobx-react'
  4. import ExpandableForm from './ExpandableForm'
  5. import './styles/ProfileContainer.css'
  7. export default class ProfileContainer extends Component {
  8.   state = { expanded: false }

propTypes and defaultProps

  1. import React, { Component } from 'react'
  2. import { observer } from 'mobx-react'
  3. import { string, object } from 'prop-types'
  5. import ExpandableForm from './ExpandableForm'
  6. import './styles/ProfileContainer.css'
  8. export default class ProfileContainer extends Component {
  9.   state = { expanded: false }
  11.   static propTypes = {
  12.     model: object.isRequired,
  13.     title: string
  14.   }
  16.   static defaultProps = {
  17.     model: {
  18.       id: 0
  19.     },
  20.     title: 'Your Name'
  21.   }

propTypes和defaultProps是静态属性，在组件代码应该尽可能早的声明。这对于其他的开发者应该是立即可见的，这起到了组件文档的作用。

Methods

  1. import React, { Component } from 'react'
  2. import { observer } from 'mobx-react'
  3. import { string, object } from 'prop-types'
  5. import ExpandableForm from './ExpandableForm'
  6. import './styles/ProfileContainer.css'
  8. export default class ProfileContainer extends Component {
  9.   state = { expanded: false }
  11.   static propTypes = {
  12.     model: object.isRequired,
  13.     title: string
  14.   }
  16.   static defaultProps = {
  17.     model: {
  18.       id: 0
  19.     },
  20.     title: 'Your Name'
  21.   }
  22.   handleSubmit = (e) => {
  23.     e.preventDefault()
  24.     this.props.model.save()
  25.   }
  27.   handleNameChange = (e) => {
  28.     this.props.model.changeName(e.target.value)
  29.   }
  31.   handleExpand = (e) => {
  32.     e.preventDefault()
  33.     this.setState({ expanded: !this.state.expanded })
  34.   }

在类组件里，当你把方法传递给子组件的时候，你必须确保有正确的this值。通常情况下，我们是通过this.handleSubmit.bind(this)的方式实现。
ES6的箭头函数，可以自动的保持正确的上下文，这种方式干净又整洁。

Passing setState a Function

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

由于setState的更新是异步的，出于性能的原因，React的state是批量更新的。state是不会立即更新的在setState调用之后。

这意味着你不能依赖当前的state当你调用setState方法的时候，这是因为你并不能确定state将会是什么。

这里有一个解决方案，就是传递一个函数给setState，之前的state作为参数。

Destructuring Props

  1. import React, { Component } from 'react'
  2. import { observer } from 'mobx-react'
  3. import { string, object } from 'prop-types'
  5. import ExpandableForm from './ExpandableForm'
  6. import './styles/ProfileContainer.css'
  8. export default class ProfileContainer extends Component {
  9.   state = { expanded: false }
  11.   static propTypes = {
  12.     model: object.isRequired,
  13.     title: string
  14.   }
  16.   static defaultProps = {
  17.     model: {
  18.       id: 0
  19.     },
  20.     title: 'Your Name'
  21.   }
  22. handleSubmit = (e) => {
  23.     e.preventDefault()
  24.     this.props.model.save()
  25.   }
  27.   handleNameChange = (e) => {
  28.     this.props.model.changeName(e.target.value)
  29.   }
  31.   handleExpand = (e) => {
  32.     e.preventDefault()
  33.     this.setState(prevState => ({ expanded: !prevState.expanded }))
  34.   }
  36.   render() {
  37.     const {
  38.       model,
  39.       title
  40.     } = this.props
  42.     return ( 
  43.       <ExpandableForm 
  44.         onSubmit={this.handleSubmit} 
  45.         expanded={this.state.expanded} 
  46.         onExpand={this.handleExpand}>
  47.         <div>
  48.           <h1>{title}</h1>
  49.           <input
  50.             type="text"
  51.             value={model.name}
  52.             onChange={this.handleNameChange}
  53.             placeholder="Your Name"/>
  54.         </div>
  55.       </ExpandableForm>
  56.     )
  57.   }
  58. }

当一个组件有很多props的时候，每一个prop应该有一个新行。

Decorators

  1. @observer
  2. export default class ProfileContainer extends Component {

装饰器这种方式是灵活的，可读的。应该尽可能对的应用。
如果你不想用decorators，可以考虑下面的方式。

  1. class ProfileContainer extends Component {
  2.   // Component code
  3. }
  4. export default observer(ProfileContainer)

Closures

应避免传递一个闭包给子组件，如下所示：

  1.           <input
  2.             type="text"
  3.             value={model.name}
  4.             // onChange={(e) => { model.name = e.target.value }}
  5.             // ^ Not this. Use the below:
  6.             onChange={this.handleChange}
  7.             placeholder="Your Name"/>

每一次父组件渲染时，一个新的函数就被创建了，并传递给输入。

如果组件是输入时一个React组件，那么就会自动的触发重新渲染，而不会考虑props是不是更新了。

调和是React组件消耗最大的部分。别把它变的更难以维护。
以下是完整示例。

  1. import React, { Component } from 'react'
  2. import { observer } from 'mobx-react'
  3. import { string, object } from 'prop-types'
  4. // Separate local imports from dependencies
  5. import ExpandableForm from './ExpandableForm'
  6. import './styles/ProfileContainer.css'
  8. // Use decorators if needed
  9. @observer
  10. export default class ProfileContainer extends Component {
  11.   state = { expanded: false }
  12.   // Initialize state here (ES7) or in a constructor method (ES6)
  14.   // Declare propTypes as static properties as early as possible
  15.   static propTypes = {
  16.     model: object.isRequired,
  17.     title: string
  18.   }
  20.   // Default props below propTypes
  21.   static defaultProps = {
  22.     model: {
  23.       id: 0
  24.     },
  25.     title: 'Your Name'
  26.   }
  28.   // Use fat arrow functions for methods to preserve context (this will thus be the component instance)
  29.   handleSubmit = (e) => {
  30.     e.preventDefault()
  31.     this.props.model.save()
  32.   }
  34.   handleNameChange = (e) => {
  35.     this.props.model.name = e.target.value
  36.   }
  38.   handleExpand = (e) => {
  39.     e.preventDefault()
  40.     this.setState(prevState => ({ expanded: !prevState.expanded }))
  41.   }
  43.   render() {
  44.     // Destructure props for readability
  45.     const {
  46.       model,
  47.       title
  48.     } = this.props
  49.     return ( 
  50.       <ExpandableForm 
  51.         onSubmit={this.handleSubmit} 
  52.         expanded={this.state.expanded} 
  53.         onExpand={this.handleExpand}>
  54.         // Newline props if there are more than two
  55.         <div>
  56.           <h1>{title}</h1>
  57.           <input
  58.             type="text"
  59.             value={model.name}
  60.             // onChange={(e) => { model.name = e.target.value }}
  61.             // Avoid creating new closures in the render method- use methods like below
  62.             onChange={this.handleNameChange}
  63.             placeholder="Your Name"/>
  64.         </div>
  65.       </ExpandableForm>
  66.     )
  67.   }
  68. }

Functional Components

函数式组件没有state和方法，他们简单易读，尽可能多的应用他们。

propTypes

  1. import React from 'react'
  2. import { observer } from 'mobx-react'
  4. import { func, bool } from 'prop-types'
  5. import './styles/Form.css'
  7. ExpandableForm.propTypes = {
  8.   onSubmit: func.isRequired,
  9.   expanded: bool
  10. }
  11. // Component declaration

在组件声明之前就确定propTypes，他们可以立即可见。这是因为JS函数的提升。

Destructuring Props and defaultProps

  1. import React from 'react'
  2. import { observer } from 'mobx-react'
  3. import { func, bool } from 'prop-types'
  5. import './styles/Form.css'
  7. ExpandableForm.propTypes = {
  8.   onSubmit: func.isRequired,
  9.   expanded: bool,
  10.   onExpand: func.isRequired
  11. }
  12. function ExpandableForm(props) {
  13.   const formStyle = props.expanded ? {height: 'auto'} : {height: 0}
  14.   return (
  15.     <form style={formStyle} onSubmit={props.onSubmit}>
  16.       {props.children}
  17.       <button onClick={props.onExpand}>Expand</button>
  18.     </form>
  19.   )
  20. }

组件是函数，props是函数的参数。可以像如下扩展：

  1. import React from 'react'
  2. import { observer } from 'mobx-react'
  3. import { func, bool } from 'prop-types'
  5. import './styles/Form.css'
  7. ExpandableForm.propTypes = {
  8.   onSubmit: func.isRequired,
  9.   expanded: bool,
  10.   onExpand: func.isRequired
  11. }
  12. function ExpandableForm({ onExpand, expanded = false, children, onSubmit }) {
  13.   const formStyle = expanded ? {height: 'auto'} : {height: 0};
  15.   return (
  16.     <form style={formStyle} onSubmit={onSubmit}>
  17.       {children}
  18.       <button onClick={onExpand}>Expand</button>
  19.     </form>
  20.   )
  21. }

注意我们可以以一种高度可读的方式用默认参数的方式来充当defaultProps。如果expanded 是undefined，就会被设置为false。(由于它是一个布尔值，可以避免Cannot read <property> of undefined的问题。)

Wrapping

  1. import React from 'react'
  2. import { observer } from 'mobx-react'
  3. import { func, bool } from 'prop-types'
  4. // Separate local imports from dependencies
  5. import './styles/Form.css'
  7. // Declare propTypes here, before the component (taking advantage of JS function hoisting)
  8. // You want these to be as visible as possible
  9. ExpandableForm.propTypes = {
  10.   onSubmit: func.isRequired,
  11.   expanded: bool,
  12.   onExpand: func.isRequired
  13. }
  15. // Destructure props like so, and use default arguments as a way of setting defaultProps
  16. function ExpandableForm({ onExpand, expanded = false, children, onSubmit }) {
  17.   const formStyle = expanded ? { height: 'auto' } : { height: 0 }
  18.   return (
  19.     <form style={formStyle} onSubmit={onSubmit}>
  20.       {children}
  21.       <button onClick={onExpand}>Expand</button>
  22.     </form>
  23.   )
  24. }
  26. // Wrap the component instead of decorating it
  27. export default observer(ExpandableForm)

Conditionals in JSX