為什么會出現React Hooks?

longshengwang 發布于2019-08-26 10:34 / 1693人閱讀

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

原文：https://dev.to/tylermcginnis/why-react-hooks-51lj....
譯者：前端技術小哥

當你要學習一個新事物的時候，你應該做的第一件事就是問自己兩個問題

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

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

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

createClass

如果你已經使用React足夠久，你就會記的React.createClassAPI。這是我們最初創建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是創建React組件的一種簡單而有效的方法。React最初使用createClassAPI的原因是，當時JavaScript沒有內置的類系統。當然，這最終改變了。在ES6中, JavaScript引入了class關鍵字，并使用它以一種本機方式在JavaScript中創建類。這使React處于一個進退兩難的地步。要么繼續使用createClass，對抗JavaScript的發展，要么按照EcmaScript標準的意愿提交并包含類。歷史表明，他們選擇了后者。

React.Component

我們認為我們不從事設計類系統的工作。我們只想以任何慣用的JavaScript方法來創建類。-React v0.13.0發布
Reactiv0.13.0引入了React.ComponentAPI，允許您從(現在)本地JavaScript類創建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并不是沒有它的權衡

構造函數

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

constructor (props) {
    super(props) //

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/106391.html

10分鐘了解 react 引入的 Hooks

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

Lucky_Boy 2019-08-23 12:40 評論0 收藏0
React Hooks 從入門到上手

摘要：前言樓主最近在整理的一些資料，為項目重構作準備，下午整理成了這篇文章。給傳入的是一個初始值，比如，這個按鈕的最初要顯示的是。取代了提供了一個統一的。 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 2019-08-23 15:57 評論0 收藏0
React Hooks 從入門到上手

摘要：前言樓主最近在整理的一些資料，為項目重構作準備，下午整理成了這篇文章。給傳入的是一個初始值，比如，這個按鈕的最初要顯示的是。取代了提供了一個統一的。 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 2019-08-02 14:32 評論0 收藏0
Hooks + Context：狀態管理的新選擇

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

tommego 2019-08-23 18:31 評論0 收藏0
React Hooks 越來越火了，它會取代傳統的 Redux 嗎？

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

Scliang 2019-08-26 10:26 評論0 收藏0