React Hook 系列（一）初识

时间 2020-05-21

标签 react hook 系列栏目 React 繁體版

原文原文链接

前言

这篇文章主要是讲Hook的动机，优缺点之类的；
有须要看实战的伙伴欢迎直接跳到第二章

探究

主要从3个方面研究React Hookjavascript

根据黄金思惟圈（What、How、Why）java

What

什么是Hook？react

打开Google翻译，获得的解释：钩、钩子ajax

再看看React官网的解释：They let you use state and other React features without writing a class.（它可让你在不编写 class 的状况下使用 state 以及其余的 React 特性。）数组

因此，结合一下。我我的的理解是这样的：对于函数式的组件，能够用钩子（Hook）将想要的外部功能给“钩”进来。框架

在React Hook出来以前，函数式组件都是无状态的组件，最多就是根据props来加一些判断的逻辑；而在React Hook出来以后就能够在函数式组件里面加入状态（useState），类生命周期（useEffect），甚至是一些本身的复用逻辑（自定义Hook）等等这些外部的功能。异步

How

怎么使用Hook？async

你们一块儿看一下官网的一个例子。函数

题目：显示一个计数器。当你点击按钮，计数器的值就会增长。post

Class组件：

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div> <p>You clicked {this.state.count} times</p> <button onClick={() => this.setState({ count: this.state.count + 1 })}> Click me </button> </div>
    );
  }
}
复制代码

函数式组件（使用了React Hook）：

import React, { useState } from 'react';

function Example() {
  // 声明一个叫 "count" 的 state 变量 const [count, setCount] = useState(0);
  return (
    <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}> Click me </button> </div>
  );
}
复制代码

这样就算是完成了一个最简单的React Hook 实践，关于一些官方提供的Hook晚点会介绍。

Why

为何会有Hooks？
Hook能解决什么问题？

作任何一件事情我以为都应该理清这个两个问题，这样的话就会事半功倍。

咱们先看看React官方是怎么解释“Why”的

在组件之间复用状态逻辑很难

复杂组件变得难以理解

难以理解的 class

本人我的认为第三点是来凑数的....

为何这么说？

由于React用了这么久了基本都是在使用Class组件，这个是在以前，哪怕是如今学习React的必经之路吧！因此，这点我接下来就会跳过了😂

在组件之间服用状态逻辑很难

其实高阶组件或者说是props都是很好的解决了复杂的聚合业务逻辑，那为何说在组件之间服用状态逻辑很难呢？

其实道理很是简单。

举个简单的例子，方便你们理解。

场景：有请求A，请求B，请求C，请求D。他们的请求都有相互依赖关系好比，发请求B的时候必须拿到请求A的结果中的某个值，而请求C也必须拿到请求B的结果中的某个值。以此类推请求D。

Promise出来以前是怎么作的呢？

$.ajax({
    type:"post",
    success: function(){//成功回调
        //再次异步请求
        $.ajax({
            type:"post",
            url:"...",
            success:function(){//成功回调
              //再次异步请求
              $.ajax({
                  type:"post",
                  url:"...",
                  success:function(){
                      .......//如此循环
                  }
              })
          }
        })
    }
})
复制代码

这还只是3层，若是是100层呢？那看起来就很是的难受了！

Promise较好的解决了这个问题

new Promise(f1)
 .then(f2)
 .then(f3)
 .then(f4)
 .then(f5)
 .then(f5)
…………
复制代码

而后是async/await。这里就不展开了，有兴趣的能够本身去了解一下。

结论

之因此这么大费周章的讲是为了解释，React中的高阶组件（HOC）。他的逻辑其实和回调地狱相似，一个两个其实都还算优雅或者说舒服，一旦多了的话。。。

export default withHover(
  withTheme(
    withAuth(
      withRepos(Profile)
    )
  )
)

// 就会变成这样，不够优雅
<WithHover>
  <WithTheme hovering={false}>
    <WithAuth hovering={false} theme='dark'>
      <WithRepos hovering={false} theme='dark' authed={true}>
        <Profile 
          id='JavaScript'
          loading={true} 
          repos={[]}
          authed={true}
          theme='dark'
          hovering={false}
        />
      </WithRepos>
    </WithAuth>
  <WithTheme>
</WithHover>
复制代码

并且每一个高阶组件的逻辑复用咱们可能还要一个个去研读。

复杂组件变得难以理解

其实，这点很是好理解。举一个很是简单常见的例子你们就会明白了。

场景：假如我有一个子组件Child，他的功能是这样的：父组建会给一个id，在组件建立的时候获取一下有关信息，在id改变的时候再从新获取。

Class组件

componentDidMount () {
    this.fetch(this.props.id)
 }
componentDidUpdate (prevProps) {
  if (prevProps.id !== this.props.id) {
    this.fetch(this.props.id)
  }
}
fetch = id => {
  this.setState({ loading: true })
  fetchInfo(id)
    .then(info => this.setState({
    info,
    loading: false
  }))
}
复制代码

React Hook：

const fetch = id => {
  this.setState({ loading: true })
  fetchInfo(id)
    .then(info => this.setState({
    info,
    loading: false
  }))
}
useEffect(() => {
  fetch(this.props.id)
}, [this.props.id])
复制代码

结论

简单的说一下他的优势吧。

复用代码更加简单（须要什么就“钩”进来）
清爽的代码风格，一目了然。（useState支持数组和对象，能够清晰的定义特殊的字段等等）
代码量更少（能够看一下我以前的子父组建的例子）
更愿意去写一些小组件复用（我我的喜欢React就是由于他的组件写起来很是的顺手！ps：没有贬低其余框架的意思。。）

感想

其实我我的认为React Hook在宣扬一个观念“按需加载”。

观看以后

点赞，能够和更多的人一块儿讨论学习。

若是有哪里写的不对的欢迎你们在评论区指出来。🙏