国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

[譯]React Component最佳實(shí)踐

Alfred / 2901人閱讀

摘要：引入初始化使用句法定義初始化和和的聲明應(yīng)該置頂便于其他開發(fā)者閱讀。在版本，推薦使用這個(gè)包替代。組件內(nèi)的方法使用在方法中箭頭函數(shù)來替代是異步的。高階組件完整代碼在組件前聲明解構(gòu)通過函數(shù)入?yún)⒛J(rèn)值的方式設(shè)定

原文：Our Best Practices for Writing React Components . 
這里意譯。有些點(diǎn)在之前的文章里提到過：#2
譯文地址：https://github.com/YutHelloWo...

如果組件帶有state或者方法，就使用Class寫法。

Class寫法

如果組件帶有state或者方法，就使用Class寫法。

1. 引入CSS 
import React, { Component } from "react"
import { observer } from "mobx-react"
import ExpandableForm from "./ExpandableForm"
import "./styles/ProfileContainer.css"
2. 初始化State

使用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 }
3. 初始化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的聲明應(yīng)該置頂便于其他開發(fā)者閱讀。在React v15.3.0版本，推薦使用prop-types這個(gè)包替代React.PropTypes。
重要的一點(diǎn)：所有的組件都應(yīng)當(dāng)有propTypes驗(yàn)證。

4. 組件內(nèi)的方法 
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 })
  }

使用在方法中箭頭函數(shù)來替代this.handleExpand.bind(this)

5. this.setState()是異步的。應(yīng)該使用函數(shù)入?yún)?/b> 
this.setState(prevState => ({ expanded: !prevState.expanded }))
6. 一個(gè)組件或者元素含有多個(gè)props應(yīng)當(dāng)分行寫 
render() {
    const {
      model,
      title
    } = this.props
    return ( 
      
        

          
{title}

          
        

      
    )
  }
7. 避免在子組件中使用閉包 
  { model.name = e.target.value }}
            // ^ Not this. Use the below:
            onChange={this.handleChange}
            placeholder="Your Name"/>
8.完整的class組件寫法 
import React, { Component } from "react"
import { observer } from "mobx-react"
import { string, object } from "prop-types"
// 分開本地導(dǎo)入和依賴導(dǎo)入
import ExpandableForm from "./ExpandableForm"
import "./styles/ProfileContainer.css"

// 使用修飾器（如果有的話）
@observer
export default class ProfileContainer extends Component {
  state = { expanded: false }
  // 初始化state (ES7) 或者在構(gòu)造函數(shù)(constructor)中初始化state (ES6)
 
  //使用靜態(tài)屬性(ES7)聲明propTypes越早越好
  static propTypes = {
    model: object.isRequired,
    title: string
  }

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

  // 使用箭頭函數(shù)綁定指向定義的上下文的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() {
    // 解構(gòu)props成可讀的
    const {
      model,
      title
    } = this.props
    return ( 
      
        // 如果有2個(gè)以上props,分行寫
        

          
{title}

           { model.name = e.target.value }}
            // 避免創(chuàng)造新的閉包，應(yīng)該使用下面的方法。
            onChange={this.handleNameChange}
            placeholder="Your Name"/>
        

      
    )
  }
}

---

函數(shù)式組件寫法 1. 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
2. Destructuring Props and 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 (
    

      {props.children}
      
    

  )
}

結(jié)合ES6的函數(shù)入?yún)⒔鈽?gòu)，可以如下書寫

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}
      
    

  )
}
3. 避免箭頭函數(shù)寫法 
const ExpandableForm = ({ onExpand, expanded, children }) => {

雖然語法沒問題，但是這里函數(shù)是匿名函數(shù)。

4. 高階組件 
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}
      
    

  )
}
export default observer(ExpandableForm)
5. 完整代碼 
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
}

// 解構(gòu)props,通過函數(shù)入?yún)⒛J(rèn)值的方式設(shè)定defaultProps
function ExpandableForm({ onExpand, expanded = false, children, onSubmit }) {
  const formStyle = expanded ? { height: "auto" } : { height: 0 }
  return (
    

      {children}
      
    

  )
}

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/91432.html

相關(guān)文章

  • 【譯】TypeScript中的React高階組件

    摘要：原文鏈接高階組件在中是組件復(fù)用的一個(gè)強(qiáng)大工具。在本文中，高階組件將會(huì)被分為兩種基本模式，我們將其命名為和用附加的功能來包裹組件。這里我們使用泛型表示傳遞到的組件的。在這里，我們定義從返回的組件，并指定該組件將包括傳入組件的和的。 原文鏈接：https://medium.com/@jrwebdev/... 高階組件（HOCs）在React中是組件復(fù)用的一個(gè)強(qiáng)大工具。但是，經(jīng)常有開發(fā)者在...

    wizChen 評論0 收藏0

  • 程序員練級攻略（2018）：前端性能優(yōu)化和框架

    摘要：，谷歌給的一份性能指南和最佳實(shí)踐。目前而言，前端社區(qū)有三大框架和。隨后重點(diǎn)講述了和兩大前端框架，給出了大量的文章教程和相關(guān)資源列表。我認(rèn)為，使用函數(shù)式編程方式，更加符合后端程序員的思路，而是更符合前端工程師習(xí)慣的框架。 showImg(https://segmentfault.com/img/bVbjQAM?w=1142&h=640); 這個(gè)是我訂閱 陳皓老師在極客上的專欄《左耳聽風(fēng)》...

    VEIGHTZ 評論0 收藏0

  • 程序員練級攻略（2018）：前端性能優(yōu)化和框架

    摘要：，谷歌給的一份性能指南和最佳實(shí)踐。目前而言，前端社區(qū)有三大框架和。隨后重點(diǎn)講述了和兩大前端框架，給出了大量的文章教程和相關(guān)資源列表。我認(rèn)為，使用函數(shù)式編程方式，更加符合后端程序員的思路，而是更符合前端工程師習(xí)慣的框架。 showImg(https://segmentfault.com/img/bVbjQAM?w=1142&h=640); 這個(gè)是我訂閱 陳皓老師在極客上的專欄《左耳聽風(fēng)》...

    CoffeX 評論0 收藏0

  • [譯] 逐漸去掌握 React（作為一名 Angular 開發(fā)者）

    摘要：你是一個(gè)對感興趣的開發(fā)者嗎不用擔(dān)心，這真的不會(huì)讓你成為一個(gè)背叛者或其他什么，真的。事實(shí)上，這個(gè)想法并不是或獨(dú)創(chuàng)的它只是一種很棒的軟件開發(fā)實(shí)踐方式。把代碼分離到不同的文件里并不會(huì)自動(dòng)導(dǎo)致關(guān)注點(diǎn)分離。 原文鏈接 : Getting to Grips with React (as an Angular developer)原文作者 : DAVE CEDDIA譯者 : 李林璞（web前端領(lǐng)域）...

    channg 評論0 收藏0

  • 【譯】Redux 還是 Mobx，讓我來解決你的困惑！

    摘要：我現(xiàn)在寫的這些是為了解決和這兩個(gè)狀態(tài)管理庫之間的困惑。這甚至是危險(xiǎn)的，因?yàn)檫@部分人將無法體驗(yàn)和這些庫所要解決的問題。這肯定是要第一時(shí)間解決的問題。函數(shù)式編程是不斷上升的范式，但對于大部分開發(fā)者來說是新奇的。規(guī)模持續(xù)增長的應(yīng) 原文地址：Redux or MobX: An attempt to dissolve the Confusion 原文作者：rwieruch 我在去年大量的使用...

    txgcwm 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<