編寫react組件最佳實踐

時間  2019-12-07
標籤 編寫 react 組件 最佳 實踐 欄目 React 简体版
原文   原文鏈接

本文譯自：https://engineering.musefind....css

圖片描述

我最開始學習react的時候，看到過各類各樣編寫組件的方式，不一樣教程中提出的方法每每有很大不一樣。當時雖然說react這個框架已經十分紅熟，可是彷佛尚未一種公認正確的使用方法。過去幾年中，咱們團隊編寫了不少react組件，咱們對實現方法進行了不斷的優化，直到滿意。react

本文介紹了咱們在實踐中的最佳實踐方式，但願能對不管是初學者仍是有經驗的開發者來講都有必定的幫助。webpack

在咱們開始以前，有幾點須要說明：es6

  • 咱們是用es6和es7語法
  • 若是你不瞭解展現組件和容器組件的區別，能夠先閱讀這篇文章
  • 若是你有任何建議、問題或者反饋，能夠給咱們留言

Class Based Components (基於類的組件)

Class based components 有本身的state和方法。咱們會盡量謹慎的使用這些組件，可是他們有本身的使用場景。web

接下來咱們就一行一行來編寫組件。數組

導入CSS

import React, { Component } from 'react'
import { observer } from 'mobx-react'

import ExpandableForm from './ExpandableForm'
import './styles/ProfileContainer.css'

我很喜歡CSS in JS，可是它目前仍是一種新的思想，成熟的解決方案還未產生。咱們在每一個組件中都導入了它的css文件。babel

譯者注：目前CSS in JS可使用css modules方案來解決，webpack的css-loader已經提供了該功能

咱們還用一個空行來區分本身的依賴。閉包

譯者注：即第四、5行和第一、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。app

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 ( 
      <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
            type="text"
            value={model.name}
            // onChange={(e) => { model.name = e.target.value }}
            // ^ 不要這樣寫，按以下寫法：
            onChange={this.handleChange}
            placeholder="Your Name"/>

緣由在於：每次父組件從新渲染時，都會建立一個新的函數，並傳給input。

若是這個input是個react組件的話，這會致使不管該組件的其餘屬性是否變化，該組件都會從新render。

並且，採用將父組件的方法傳入的方式也會使得代碼更易讀，方便調試，同時也容易修改。

完整代碼以下：

import React, { Component } from 'react'
import { observer } from 'mobx-react'
import { string, object } from 'prop-types'
// Separate local imports from dependencies
import ExpandableForm from './ExpandableForm'
import './styles/ProfileContainer.css'

// Use decorators if needed
@observer
export default class ProfileContainer extends Component {
  state = { expanded: false }
  // Initialize state here (ES7) or in a constructor method (ES6)
 
  // Declare propTypes as static properties as early as possible
  static propTypes = {
    model: object.isRequired,
    title: string
  }

  // Default props below propTypes
  static defaultProps = {
    model: {
      id: 0
    },
    title: 'Your Name'
  }

  // Use fat arrow functions for methods to preserve context (this will thus be the component instance)
  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() {
    // Destructure props for readability
    const {
      model,
      title
    } = this.props
    return ( 
      <ExpandableForm 
        onSubmit={this.handleSubmit} 
        expanded={this.state.expanded} 
        onExpand={this.handleExpand}>
        // Newline props if there are more than two
        <div>
          <h1>{title}</h1>
          <input
            type="text"
            value={model.name}
            // onChange={(e) => { model.name = e.target.value }}
            // Avoid creating new closures in the render method- use methods like below
            onChange={this.handleNameChange}
            placeholder="Your Name"/>
        </div>
        </ExpandableForm>
    )
  }
}

函數組件(Functional Components)

這些組件沒有state和方法。它們是純淨的，很是容易定位問題，能夠儘量多的使用這些組件。

propTypes

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

這裏咱們在組件聲明以前就定義了propTypes，很是直觀。咱們能夠這麼作是由於js的函數名提高機制。

Destructuring Props and defaultProps(解構props和defaultProps)

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 (
    <form style={formStyle} onSubmit={props.onSubmit}>
      {props.children}
      <button onClick={props.onExpand}>Expand</button>
    </form>
  )
}

咱們的組件是一個函數，props做爲函數的入參被傳遞進來。咱們能夠按照以下方式對組件進行擴展：

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 (
    <form style={formStyle} onSubmit={onSubmit}>
      {children}
      <button onClick={onExpand}>Expand</button>
    </form>
  )
}

咱們能夠給參數設置默認值，做爲defaultProps。若是expanded是undefined,就將其設置爲false。（這種設置默認值的方式，對於對象類的入參很是有用，能夠避免`can't read property XXXX of undefined的錯誤）

不要使用es6箭頭函數的寫法：

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

這種寫法中，函數實際是匿名函數。若是正確地使用了babel則不成問題，可是若是沒有，運行時就會致使一些錯誤，很是不方便調試。

另外，在Jest，一個react的測試庫，中使用匿名函數也會致使一些問題。因爲使用匿名函數可能會出現一些潛在的問題，咱們推薦使用function，而不是const。

Wrapping

在函數組件中不能使用裝飾器，咱們能夠將其做爲入參傳給observer函數

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 (
    <form style={formStyle} onSubmit={onSubmit}>
      {children}
      <button onClick={onExpand}>Expand</button>
    </form>
  )
}
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'

// Declare propTypes here, before the component (taking advantage of JS function hoisting)
// You want these to be as visible as possible
ExpandableForm.propTypes = {
  onSubmit: func.isRequired,
  expanded: bool,
  onExpand: func.isRequired
}

// Destructure props like so, and use default arguments as a way of setting defaultProps
function ExpandableForm({ onExpand, expanded = false, children, onSubmit }) {
  const formStyle = expanded ? { height: 'auto' } : { height: 0 }
  return (
    <form style={formStyle} onSubmit={onSubmit}>
      {children}
      <button onClick={onExpand}>Expand</button>
    </form>
  )
}

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

在JSX中使用條件判斷（Conditionals in JSX）

有時候咱們須要在render中寫不少的判斷邏輯，如下這種寫法是咱們應該要避免的：
圖片描述

目前有一些庫來解決這個問題，可是咱們沒有引入其餘依賴，而是採用了以下方式來解決：
圖片描述
這裏咱們採用當即執行函數的方式來解決問題，將if語句放到當即執行函數中，返回任何你想返回的。須要注意的是，當即執行函數會帶來必定的性能問題，可是對於代碼的可讀性來講，這個影響能夠忽略。

一樣的，當你只但願在某種狀況下渲染時，不要這麼作：

{
  isTrue
   ? <p>True!</p>
   : <none/>
}

而應當這麼作：

{
  isTrue && 
    <p>True!</p>
}

（全文完）

本文也同步在語雀，會持續記錄個人學習及平常反思等內容，歡迎你們瀏覽關注~

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程