React Hook带来的好处

天天听别人吹 React hook 好用，函数编程牛逼，最近刚好有时间，就学习了 React hook。简单的入门了下，发现真香！！！

我就不复述官网说的一些好处了，从我做为一个开发者使用来说，我觉得好处如下：

  • 函数编程，相比 class 来说编写更舒服，逻辑复用更方便
  • 包含了很多 hook，写起代码更快了

什么是 Hook

Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。Hook 不能在 class 组件中使用 —— 这使得你不使用 class 也能使用 React。

State Hook

之前定义state和改变state

this.state = {a: 1}
this.setState({
    a: 2
})

使用 hook

const [a, setA] = useState(1)
setA(2)

优点：更简洁，更语艺话

Effect Hook

你之前可能已经在 React 组件中执行过数据获取、订阅或者手动修改过 DOM。我们统一把这些操作称为“副作用”，或者简称为“作用”。

类比 class，它相当于 componentDidMount + componentDidUpdate + componentWillUnmount ，多个生命周期合并成一个

相比 vue，我觉得类似 watch，他可以根据相应的参数进行监听

好处：

  • 一些操作不需要分布到不同的生命周期了，比如订阅和取消订阅（return () => {取消订阅操作}）就可以写在一起了
  • 进行监听更简单

相应代码如下：

import React, { useState, useEffect } from 'react'

export default function UseEffectStudy() {
  const [count , setCount] = useState(0)
  const [count2 , setCount2] = useState(0)

  useEffect(() => {
    console.log(`count: You Click ${count} times`)
  }, [count])

  useEffect(() => {
    console.log(`count2: You Click ${count2} times`)
  }, [count2])

  return (
    <div>
      <p>count1: You Click {count} times</p>
      <p>count2: You Click {count2} times</p>
      <button onClick={() => setCount(count + 1)}>click me</button>
      <button onClick={() => setCount2(count2 + 1)}>click me</button>
    </div>
  )
}

useEffect第二个参数就是需要监听的数组，如果不包含，当其改变的时候，是不会触发回调的

UseMemo

直接说作用，类似 vue 中的 computed，昨天还在跟朋友讨论 react 中如何做一个类似的 computed，没想到 hook 就已经包含了

import React, { useState, useMemo } from "react";

// 当作 vue 的 computed 使用
export default function UseMemoStudy() {
  let [a, setA] = useState(0)
  let [b, setB] = useState(0)
  let [d, setD] = useState(0)

  // 参数，指明 useMemo 根据哪个属性变化
  let ab = useMemo(() => {
    console.log('a或则b改变了')
    return a + b
  }, [a, b])

  return (
    <div>
      <p onClick={() => setA(a++)}>a: {a}</p>
      <p onClick={() => setB(b++)}>b: {b}</p>
      <p>ab: {ab}</p>
      <p onClick={() => setD(d++)}>d: {d}</p>
    </div>
  )
}

上面的代码，当 d 改变的时候，是不会触发 useMemo 的回调的，只有 a 或则 b 的改变才会触发