为什么会出现React Hooks?

longshengwang 发布于2019-08-26 10:34 / 1569人阅读

摘要：尽管已经受到高度赞扬，团队仍然认为有必要构建和发布。用来描述组件的所有信息都将作为对象传递给。这是一个巨大的胜利，因为它更好地与标准保持一致。

原文：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) //

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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