React Hooks解析

1. react使用hook的意义

Hook 是 React 16.8 的新增特性，它可以让我们在不编写class的情况下使用state以及其他的React特性（比如生命周期）。

class组件与函数式组件：

class组件可以定义自己的state，用来保存组件自己内部的状态，函数式组件不可以，因为函数每次调用都会产生新的临时变量；
class组件有自己的生命周期，我们可以在对应的生命周期中完成自己的逻辑，比如在componentDidMount中发送网络请求，并且该生命周期函数只会执行一次，如果在函数中发送网络请求，意味着每次重新渲染都会重新发送一次网络请求；
class组件可以在状态改变时只会重新执行render函数以及我们希望重新调用的生命周期函数componentDidUpdate 等，函数式组件在重新渲染时，整个函数都会被执行，似乎没有什么地方可以只让它们调用一次；

hook的出现就是为了解决函数式组件中实现class组件的很多特性，它可以让我们在不编写class的情况下使用state以及其他的React特性；

2. useState Hook解析

useState来自react，需要从react中导入，它是一个hook

参数：初始化值，如果不设置为undefined；
返回值：数组，包含两个元素，元素一：当前状态的值（第一调用为初始化值），元素二：设置状态值的函数；

注意：

只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用；
只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用；

javascript">import { memo, useState } from "react";

// 普通的函数, 里面不能使用hooks
// 在自定义的hooks中, 可以使用react提供的其他hooks: 必须使用use开头
// function useFoo() {
//   const [ message ] = useState("Hello World")
//   return message
// }

function CounterHook(props) {
  const [counter, setCounter] = useState(0)
  const [name] = useState("why")
  console.log(name)

  // const message = useFoo()

  return (
    <div>
      <h2>当前计数: {counter}</h2>
      <button onClick={e => setCounter(counter+1)}>+1</button>
      <button onClick={e => setCounter(counter-1)}>-1</button>
    </div>
  )
}

3. useEffect Hook解析

Effect Hook 可以让你来完成一些类似于class中生命周期的功能；
类似于网络请求、手动更新DOM、一些事件的监听，都是 React更新DOM的一些副作用；
对于完成这些功能的Hook被称之为 Effect Hook；

useEffect的解析:

通过useEffect的Hook，可以告诉React需要在渲染后执行某些操作；
useEffect 要求我们传入一个回调函数，在React 执行完更新DOM操作之后，就会回调这个函数；
默认情况下，无论是第一次渲染之后，还是每次更新之后，都会执行这个回调函数；

清除Effect:

在class组件的编写过程中，某些副作用的代码，我们需要在componentWillUnmount中进行清除;

比如我们之前的事件总线或Redux中手动调用subscribe；
都需要在 componentWillUnmount有对应的取消订阅；

useEffect传入的 回调函数A 本身可以有一个返回值，这个返回值是另外一个 回调函数B ，这是 effect 可选的清除机制。每个 effect 都可以返回一个清除函数，如此可以将添加和移除订阅的逻辑放在一起，都属于 effect 的一部分；

javascript">  // 负责告知react, 在执行完当前组件渲染之后要执行的副作用代码
  useEffect(() => {
    // 1.监听事件
    // const unubscribe = store.subscribe(() => {
    // })
    // function foo() {
    // }

    // 返回值: 回调函数 => 组件被重新渲染或者组件卸载的时候执行
    return () => {

    }
  })

默认情况下，useEffect的回调函数会在每次渲染时都重新执行，但是这会导致两个问题：

某些代码我们只是希望执行一次即可，类似于componentDidMount和componentWillUnmount中完成的事情；（比如网络请求、订阅和取消订阅）；
多次执行也会导致一定的性能问题；

useEffect的解决方式：

useEffect实际上有两个参数，参数一：执行的回调函数，参数二：该 useEffect在哪些state发生变化时，才重新执行；

如果一个函数我们不希望依赖任何的内容时，也可以传入一个空的数组【】；

javascript">  useEffect(() => {
    console.log("修改title:", count)
  }, [count])

  useEffect(() => {
    console.log("监听redux中的数据")
    return () => {}
  }, [])

  useEffect(() => {
    console.log("监听eventBus的why事件")
    return () => {}
  }, [])

  useEffect(() => {
    console.log("发送网络请求, 从服务器获取数据")

    return () => {
      console.log("会在组件被卸载时, 才会执行一次")
    }
  }, [])

4. useContext Hook解析

在开发中，要在组件中使用共享的Context有两种方式：

类组件可以通过类名.contextType = MyContext方式，在类中获取context；
多个Context或者在函数式组件中通过 MyContext.Consumer 方式共享context；

但是多个Context共享时的方式会存在大量的嵌套：

Context Hook允许我们通过Hook来直接获取某个Context的值；

contxt.js

javascript">import { createContext } from "react";

const UserContext = createContext()
const ThemeContext = createContext()


export {
  UserContext,
  ThemeContext
}

App.jsx

javascript">import React, { memo, useContext } from 'react'
import { UserContext, ThemeContext } from "./context"

const App = memo(() => {
  // 使用Context
  const user = useContext(UserContext)
  const theme = useContext(ThemeContext)

  return (
    <div>
      <h2>User: {user.name}-{user.level}</h2>
      <h2 style={{color: theme.color, fontSize: theme.size}}>Theme</h2>
    </div>
  )
})

export default App

5. useReducer Hook解析

useReducer仅仅是useState的一种替代方案：

在某些场景下，如果state的处理逻辑比较复杂，我们可以通过useReducer来对其进行拆分；
或者这次修改的state需要依赖之前的state时，也可以使用；

javascript">import React, { memo, useReducer } from 'react'

function reducer(state, action) {
  switch(action.type) {
    case "increment":
      return { ...state, counter: state.counter + 1 }
    case "decrement":
      return { ...state, counter: state.counter - 1 }
    case "add_number":
      return { ...state, counter: state.counter + action.num }
    case "sub_number":
      return { ...state, counter: state.counter - action.num }
    default:
      return state
  }
}


const App = memo(() => {
  const [state, dispatch] = useReducer(reducer, { counter: 0, friends: [], user: {} })


  return (
    <div>
      <h2>当前计数: {state.counter}</h2>
      <button onClick={e => dispatch({type: "increment"})}>+1</button>
      <button onClick={e => dispatch({type: "decrement"})}>-1</button>
      <button onClick={e => dispatch({type: "add_number", num: 5})}>+5</button>
      <button onClick={e => dispatch({type: "sub_number", num: 5})}>-5</button>
      <button onClick={e => dispatch({type: "add_number", num: 100})}>+100</button>
    </div>
  )
})

export default App

数据是不会共享的，它们只是使用了相同的counterReducer的函数而已，所以，useReducer只是useState的一种替代品，并不能替代Redux。

6. useRef Hook解析

useRef返回一个ref对象，返回的ref对象在组件的 整个生命周期保持不 变。

最常用的ref是两种用法:

用法一：引入DOM（或者组件，但是需要是class组件）元素；
用法二：保存一个数据，这个对象在整个生命周期中可以保存不变；

javascript">import React, { memo, useRef } from 'react'

const App = memo(() => {
  const titleRef = useRef()
  const inputRef = useRef()
  
  function showTitleDom() {
    console.log(titleRef.current)
    inputRef.current.focus()
  }

  return (
    <div>
      <h2 ref={titleRef}>Hello World</h2>
      <input type="text" ref={inputRef} />
      <button onClick={showTitleDom}>查看title的dom</button>
    </div>
  )
})

export default App