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

資訊專欄INFORMATION COLUMN

為什么會出現(xiàn)React Hooks?

longshengwang / 1685人閱讀

摘要：盡管已經(jīng)受到高度贊揚，團隊仍然認為有必要構(gòu)建和發(fā)布。用來描述組件的所有信息都將作為對象傳遞給。這是一個巨大的勝利，因為它更好地與標準保持一致。

原文：https://dev.to/tylermcginnis/why-react-hooks-51lj....  
譯者：前端技術(shù)小哥
當你要學習一個新事物的時候，你應(yīng)該做的第一件事就是問自己兩個問題

1、為什么會存在這個東西?

2、這東西能解決什么問題?

如果你從來沒有對這兩個問題都給出一個令人信服的答案，那么當你深入到具體問題時，你就沒有足夠的堅實的基礎(chǔ)。關(guān)于React Hooks，這些問題值得令人思考。當Hooks發(fā)布時，React是JavaScript生態(tài)系統(tǒng)中最流行、最受歡迎的前端框架。盡管React已經(jīng)受到高度贊揚，React團隊仍然認為有必要構(gòu)建和發(fā)布Hooks。在不同的Medium帖子和博客文章中紛紛討論了(1)盡管受到高度贊揚和受歡迎，React團隊決定花費寶貴的資源構(gòu)建和發(fā)布Hooks是為什么和為了什么以及(2)它的好處。為了更好地理解這兩個問題的答案，我們首先需要更深入地了解我們過去是如何編寫React應(yīng)用程序的。

createClass

如果你已經(jīng)使用React足夠久，你就會記的React.createClassAPI。這是我們最初創(chuàng)建React組件的方式。用來描述組件的所有信息都將作為對象傳遞給createClass。

const ReposGrid = React.createClass({
  getInitialState () {
    return {
      repos: [],
      loading: true
    }
  },
  componentDidMount () {
    this.updateRepos(this.props.id)
  },
  componentDidUpdate (prevProps) {
    if (prevProps.id !== this.props.id) {
      this.updateRepos(this.props.id)
    }
  },
  updateRepos (id) {
    this.setState({ loading: true })

    fetchRepos(id)
      .then((repos) => this.setState({
        repos,
        loading: false
      }))
  },
  render() {
    const { loading, repos } = this.state

    if (loading === true) {
      return 
    }

    return (
      
    
        {repos.map(({ name, handle, stars, url }) => (
          
  • 
            
      
              
    • {name}
      • 
              
    • @{handle}
      • 
              
    • {stars} stars
      • 
            
    
          
    • 
        ))}
      

    )
  }
})

createClass是創(chuàng)建React組件的一種簡單而有效的方法。React最初使用createClassAPI的原因是，當時JavaScript沒有內(nèi)置的類系統(tǒng)。當然，這最終改變了。在ES6中, JavaScript引入了class關(guān)鍵字，并使用它以一種本機方式在JavaScript中創(chuàng)建類。這使React處于一個進退兩難的地步。要么繼續(xù)使用createClass，對抗JavaScript的發(fā)展，要么按照EcmaScript標準的意愿提交并包含類。歷史表明，他們選擇了后者。

React.Component

我們認為我們不從事設(shè)計類系統(tǒng)的工作。我們只想以任何慣用的JavaScript方法來創(chuàng)建類。-React v0.13.0發(fā)布
Reactiv0.13.0引入了React.ComponentAPI，允許您從(現(xiàn)在)本地JavaScript類創(chuàng)建React組件。這是一個巨大的勝利，因為它更好地與ECMAScript標準保持一致。

class ReposGrid extends React.Component {
  constructor (props) {
    super(props)

    this.state = {
      repos: [],
      loading: true
    }

    this.updateRepos = this.updateRepos.bind(this)
  }
  componentDidMount () {
    this.updateRepos(this.props.id)
  }
  componentDidUpdate (prevProps) {
    if (prevProps.id !== this.props.id) {
      this.updateRepos(this.props.id)
    }
  }
  updateRepos (id) {
    this.setState({ loading: true })

    fetchRepos(id)
      .then((repos) => this.setState({
        repos,
        loading: false
      }))
  }
  render() {
    if (this.state.loading === true) {
      return 
    }

    return (
      
    
        {this.state.repos.map(({ name, handle, stars, url }) => (
          
  • 
            
      
              
    • {name}
      • 
              
    • @{handle}
      • 
              
    • {stars} stars
      • 
            
    
          
    • 
        ))}
      

    )
  }
}

盡管朝著正確的方向邁出了明確的一步，React.Component并不是沒有它的權(quán)衡

構(gòu)造函數(shù)

使用類組件，我們可以在constructor方法里將組件的狀態(tài)初始化為實例(this)上的state屬性。但是，根據(jù)ECMAScript規(guī)范，如果要擴展子類(在這里我們說的是React.Component)，必須先調(diào)用super，然后才能使用this。具體來說，在使用React時，我們還須記住將props傳遞給super。

constructor (props) {
    super(props) //

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

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

相關(guān)文章

  • 10分鐘了解 react 引入的 Hooks

    摘要：最近官方在大會上宣布內(nèi)測將引入。所以我們有必要了解，以及由此引發(fā)的疑問。在進一步了解之前，我們需要先快速的了解一些基本的的用法。如何解決狀態(tài)有關(guān)的邏輯的重用和共享問題。 showImg(https://segmentfault.com/img/remote/1460000016886798?w=1500&h=750); 大家好，我是谷阿莫，今天要將的是一個...，哈哈哈，看到這個題我就...

    Lucky_Boy 評論0 收藏0

  • React Hooks 從入門到上手

    摘要：前言樓主最近在整理的一些資料，為項目重構(gòu)作準備，下午整理成了這篇文章。給傳入的是一個初始值，比如，這個按鈕的最初要顯示的是。取代了提供了一個統(tǒng)一的。 showImg(https://segmentfault.com/img/bVbpUle?w=900&h=550); Hooks are a new addition in React 16.8. They let you use sta...

    XFLY 評論0 收藏0

  • React Hooks 從入門到上手

    摘要：前言樓主最近在整理的一些資料，為項目重構(gòu)作準備，下午整理成了這篇文章。給傳入的是一個初始值，比如，這個按鈕的最初要顯示的是。取代了提供了一個統(tǒng)一的。 showImg(https://segmentfault.com/img/bVbpUle?w=900&h=550); Hooks are a new addition in React 16.8. They let you use sta...

    zhouzhou 評論0 收藏0

  • Hooks + Context：狀態(tài)管理的新選擇

    摘要：用戶點擊改變?nèi)譅顟B(tài)崔然渲染整顆組件樹有沒有解決方案呢當然有創(chuàng)建一個只接收的新組件，并將組件中的邏輯都移到組件中。最終的示例使用全局狀態(tài)和生成全局狀態(tài)和崔然完整示例見結(jié)論在和出現(xiàn)之前，缺乏自帶的全局狀態(tài)管理能力。 React 16.3 版本，正式推了出官方推薦的 context API —— 一種跨層級的數(shù)據(jù)傳遞方法。React 16.8 版本，推出了全新的 hooks 功能，將原本只...

    tommego 評論0 收藏0

  • React Hooks 越來越火了，它會取代傳統(tǒng)的 Redux 嗎？

    摘要：前言自推出之后，收到了不少追捧，很多問題也隨之而來。在出現(xiàn)之前，可以使用保存狀態(tài)和更新狀態(tài)用以應(yīng)對這種情況。為了在這個用例上追趕的腳步，的需要提供副作用隔離功能。提供了一個，可以用它接入你的風格的。 showImg(https://segmentfault.com/img/remote/1460000019913697?w=1280&h=853); 前言 React Hooks 自推出...

    Scliang 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<