React Hook基本概念

概念

Hook 意思是"钩子"。 React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进去。 作用有点像HOC高阶组件 。React Hooks 就是那些钩子。 你需要什么功能，就使用什么钩子。React 默认提供了一些常用钩子，你也可以封装自己的钩子。所有的钩子都是为函数引入外部功能，所以 React 约定，钩子一律使用use前缀命名，便于识别。你要使用 xxx 功能，钩子就命名为 useXXX

hook出现的契机

1. class component 使用成本高

我们在class component中要学习生命周期，React15、React16.3、React16.4到React17生命周期有了很多变化。生命周期在class组件中非常重要。但是太多的太多的生命周期难记，有些也不知道具体的场景麻烦。还有就是this指向的问题比如我们要写大量的bind函数来改变this的指向，当然也可以通过装饰器等其他方法改变，但是本质上来说还是要跟this打交道

2. class component 逻辑比较分散

我们在学习代码的第一天，就应该知道高内聚、低耦合这六字箴言。设计组件也是一样的，我们应当考虑代码的高可复用性。然而在class组件中，我们实现一个功能，就不得不把相同业务的一些逻辑分散到各个生命周期中，就显得逻辑分散，比如我们设置一个定时器，就要考虑在合适的生命周期里面初始化定时器，以及销毁定时器等显的逻辑很分散

3. react hook 逻辑复用更加便捷

Class组件逻辑复用一般使用的都是HOC和Render Props。但这两者虽然都可以实现逻辑复用，但是并没有让组件和代码变得好用和优美起来，这二者都会存在的一个问题是，逻辑的复用会导致嵌套层级过深，形成嵌套地狱。使用class组件，表单组件、国际化、Redux等混在一块形成一长串的高阶组件的形式，就很恶心了(虽然它也可以工作)

hook解决了什么问题

让函数组件有了生命周期、有了state，最主要的是解决了状态逻辑难以共享的问题

状态逻辑难以共享的问题

是继render-props和 HOC之后的第三种状态逻辑共享方案，它不会产生 JSX 嵌套地狱问题。状态逻辑共享其实就是状态逻辑的复用，因为它只共享和复用数据处理的逻辑，不会共享数据本身。

render props

将一个组件内的 state 作为 props 传递给调用者, 调用者可以动态的决定如何渲染, 也是根据react的特性所写出来的一种写法，本质上来说任何被用于告知组件需要渲染什么内容的函数 prop 在技术上都可以被称为 render prop.

import React from "react";

/**
 * 监听鼠标移动的组件
 */
class Mouse extends React.Component {
  state = { x: 0, y: 0 };

  mouseMove(e) {
    this.setState({
      x: e.screenX,
      y: e.screenY
    })
  }

  render() {
    return (
      <div style={{ height: '100vh', width: '100vw' }}
        onMouseMove={(e) => this.mouseMove(e)}>
        {/* 本质上的意思就是往父组件传值 */}
        {this.props.render(this.state)}
      </div>
    )
  }
}

export default class RenderProps extends React.Component {

  /**
   * 返回一个jsx
   * @returns 
   */
  childRender (mouse) {
    return (
      <div>
        鼠标的位置是 {mouse.x}，{mouse.y}
      </div>
    )
  }

  render() {
    return (
      <Mouse render={(mouse) => this.childRender(mouse)} />
    )
  }
}

注意：

如果你在 render 方法里创建函数，那么使用 render prop 会抵消使用 React.PureComponent 带来的优势。因为浅比较 props 的时候总会得到 false，并且在这种情况下每一个 render 对于 render prop 将会生成一个新的值

hook

Hooks也是用来解决状态逻辑共享的问题的。React Hooks 就像一个内置的打平 renderProps 库，我们可以随时创建一个值，与修改这个值的方法。看上去像 function 形式的 setState，其实这等价于依赖注入，与使用 setState 相比，这个组件是没有状态的

import React, { useState } from 'react';
export default function MobileFooter() {
  const [num, setNum] = useState(1)
  return (
    <div>
      <button onClick={() => setNum(num + 1)}>+1</button>
      <div>{num}</div>
    </div>
  );
}

hook的缺点

类拥有比函数更丰富的表达能力（OOP），React采用Hooks+Function Component（函数式）的方式其实是一种无奈的选择，试想一个挂载了十几个方法或属性的Class Component，用Function Component来写如何组织代码使得逻辑清晰？这背后其实是函数式编程与面向对象编程两种编程范式的权衡。