React Hooks 入门记录

什么是 Hooks

以往，React 组件都是通过 class 的形式来编写，只有无状态组件才可以用函数来编写。Hooks 就允许我们在函数组件中使用预定义函数，来标记状态和组件生命周期，这使得所有组件都可以使用函数来编写。

类组件的劣势

    1. 状态逻辑难复用
      缺少复用机制
      渲染属性和高阶组件导致层级冗余
    1. 趋向复杂难以维护
      生命周期函数混杂不相干逻辑
      想干逻辑分散在不同生命周期
    1. this指向困扰
      内联函数过度创建新句柄
      类成员函数不能保证this

优化类组件的三大问题

  • 函数组件无 this 问题
  • 自定义 Hook 方便复用状态逻辑
  • 副作用的关注点分离

Hooks 使用法则

官方文档: https://reactjs.org/docs/hooks-rules.html

  • 仅在顶层调用 Hooks 函数

整个 Hooks 函数都依赖调用顺序，这样 React 才能在不同的渲染周期中把相同的逻辑关联起来，一旦 Hooks 函数不在顶层调用，那么很有可能在组件的不同渲染周期中，他们的调用顺序发生了变化，进而导致变量混乱等错误，为了尽量规避这些问题，所以尽量把 Hooks 放在最顶层。

  • 仅在函数组件及 函数组件 中调用 Hooks 函数，不能放在普通函数及类组件中

Hooks 函数必须是use开头

Hooks 常见问题

生命周期函数如何映射到 Hooks ？

getDerivedStateFromError() 这个处理错误的函数，暂时无法在 Hooks 中实现，由此看出 Hooks 暂时无法代替类组件

function App () {
  useEffect(() => {
    // componentDidMount
    return () => {
      // componentWillUnmount
    }
  }, [])
  let renderCouter = useRef(0) // 通过 ref 来保持渲染计数
  renderCouter.current++

  useEffect(() => {
    if (renderCouter > 1) {
      // componentDidUpdate
    }
  })
}

类实例成员变量如何映射到 Hooks ?

使用 useRef(0)，同步到 current 中

Hooks 中如何获取历史 props 和 state

使用 useRef(0)，同步到 current 中

如何强制更新一个 Hooks 组件

创建一个不参与渲染的 state 的值，通过修改这个 state 的值来实现强制渲染

function Counter () {
  const [updater, setUpdater] = useState(0)
  function forceUpdate () {
    setUpdater(updater => updater + 1)
  }
}

使用 eslint-plugin-react-hooks 防止代码出错

1.安装

npm install eslint-plugin-react-hooks -D

2.在package.json 中配置

// package.json
...
"eslintConfig": {
    "extends": "react-app",
    "plugins": [
        "react-hooks"
    ],
    "rules": {
        "react-hooks/rules-of-hooks": "error"
    }
},
...

简单使用 useState

使用传统类组件

import React, { Component } from 'react'
class ClassComponent extends Component {
  state = {
    count: 0
  }
  render () {
    const { count } = this.state
    return (
      <button onClick={() => {this.setState({ count: count + 1 })}}>
        ClassComponent Click Count ({count})
      </button>
    )
  }
}

使用 Hooks

import React, { Component, useState } from 'react'
function HooksComponent () {
  // useState 传入 count 的默认值
  // count 获取值
  // setCount 设置值
  const [count, setCount] = useState(0)
  return (
    <button onClick={ () => { setCount(count + 1)} }>
        HooksComponent Click Count ({count})
    </button>
  )
}

通过 props 设置默认值

import React, { Component, useState } from 'react'
function HooksComponetDefault (props) {
  // 使用 props 设置默认值，useState 传入的函数只会被调用一次
  const [count, setCount] = useState(() => {
    return props.defaultCount || 0
  })
  return (
    <button onClick={ () => { setCount(count + 1)} }>
        HooksComponent Click Count ({count})
    </button>
  )
}

使用 Effect Hooks

常见副作用：

  • 绑定事件
  • 网络请求
  • 访问DoM

常见的副作用时机：

  • Mount之后（componentDidMount）
  • Update之后（componentDidUpdate）
  • Unmount之前（componentWillUnmount）

以上的时机在传统类组件中，是在生命周期中解决，在 hooks 中的解决方案：useEffect()

关于 useEffect()

userEffect()标准上是在组件渲染(render)之后调用，并且根据自定义状态来决定是否调用，函数组件第一次渲染后的调用，就相当于componentDidMount()，后面的调用都相当于componentDidUpdate()。

userEffect()可以返回一个回调函数，这个回调函数的执行时机跟userEffect()执行时机挂钩。这个回调函数的主要作用是 清除上一次副作用所遗留下来的状态

useEffect() 的参数

【第一个参数】第一个参数为一个函数，返回值为回调函数。回调函数在视图被销毁的时候触发，1.组件重渲染，2.组件被卸载

【第二个参数】如果不填，则每次渲染后都会执行。第二个参数为一个数组，只有数组的每一项都不变的情况下，userEffect()才不会执行，因此，传一个空数组的话，该 useEffect 就只会在第一次调用一次

简单使用

function HooksCompinentUseEffect () {
  const [ count, setCount ] = useState(0)
  const [ size, setSize ] = useState({
    width: document.documentElement.clientWidth,
    height: document.documentElement.clientHeight
  })
  const onWindowResize = () => {
    setSize({
      width: document.documentElement.clientWidth,
      height: document.documentElement.clientHeight
    })
  }

  // useEffect 第一个参数为一个函数
  // 这里类似 componentDidount 和 componentDidUpdate
  useEffect(() => {
    document.title = count
  })

  // useEffect 第一个参数为一个函数，第二个参数为一个数组，只有数组的每一项都不变的情况下，userEffect()才不会执行
  // 这里类似 componentDidMount 和 componentWillUnmount
  useEffect(() => {
    window.addEventListener('resize', onWindowResize, false)
    // 回调函数在视图被销毁的时候触发，1.组件重渲染，2.组件被卸载
    return () => {
      window.removeEventListener('resize', onWindowResize, false)
    }
  },  [])
  return (
    <div>
      <button onClick={() => { setCount(count + 1)} }>
        HooksCompinentUseEffect Click Count ({count})
      </button>
      W: {size.width} | H: {size.height}
    </div> 
  )
}

Hooks环境下的Context

不要滥用 context，因为会破坏组件的独立性

import React, { useState, createContext, useContext } from 'react'
// 使用 context
const CountContext = createContext()
function HooksContextProvider () {
  const [ count, setCount ] = useState(0)
  return (
    <div>
      <button onClick={() => { setCount(count + 1) }}>HooksContextProvider {count}</button>
      {/* value 中设置的是需要共享的值 */}
      <CountContext.Provider value={count}>
        <HooksContextConsumer />
      </CountContext.Provider>
    </div>
  )
}
// 使用 useContext 调用，参数为创建的 Provider
function HooksContextConsumer () {
  const count = useContext(CountContext)
  return (
    <div>
      HooksContextConsumer: <b>{count}</b>
    </div>
  )
}

使用 useMemo 和 memo

useMemo 和 memo 的区别，memo针对的是一个组件的渲染是否重复执行，useMemo定义了一段函数是否重复执行。本质都是利用同样的算法，来判断依赖是否发生改变，进而决定是否触发特定逻辑，同样都用来做性能优化。

useMemo的参数

第一个参数为要执行的逻辑函数

第二个参数为这个函数锁依赖的变量组成的数组，如果不传则 useMemo 的逻辑每次都执行，如果传入空数组就执行执行一次

与 useEffect 的差异

两个函数的调用时机不同，useEffect() 执行的是副作用，所以一定是在渲染完成之后运行，而useMemo() 是需要有返回值，返回值直接参与渲染，因为 useMemo() 是在渲染期间完成的。两者存在一前一后的区别

useMemo 简单使用

import React, { useState, useMemo } from 'react'
// 使用 memo
function HookMemoParent () {
  const [ count, setCount ] = useState(0)
  // 第一个参数为要执行的逻辑函数
  // 第二个参数为这个函数锁依赖的变量组成的数组，如果不传则 useMemo 的逻辑每次都执行，如果传入空数组就执行执行一次
  // 当第二个参数发生变化时，就会触发逻辑，跟数组是什么值无关
  const doubleCount = useMemo(() => {
    return count * 2
  }, [count])

  // 根据第二个参数，count < 3 时，保持不变，不会重新计算
  // 当数组中的 bool 值发生改变时，就会重新渲染，false => true => false，所以 boolCount 会重新渲染两次
  const boolCount = useMemo(() => {
    return count * 3
  }, [count === 3])

  return (
    <div>
      <button onClick={() => {setCount(count + 1)}}>HookMemoParent: {count}，doubleCount: {doubleCount}, boolCount: {boolCount}</button>
      <HooksMemoChild count={doubleCount}></HooksMemoChild>
    </div>
  )
}
function HooksMemoChild (props) {
  return (
    <div>{props.count}</div>
  )
}

useMemo 和 useCallback

当需要用 useMemo 返回一个函数时，可以使用 useCallback 代替，可以替代上一层函数。使用 useCallback 不能解决阻止创建新的函数，因为每次组件的函数执行都会创建新的函数，但是创建的这个函数不一定能够被返回，很可能会被直接弃用。useCallback解决的是传入子组件的函数参数过渡变化，导致子组件过渡渲染的问题。实际上 useCallback 只是 useMemo 的一种简写。

【特别提醒】使用 useMemo 和 useCallback 时，当依赖变化时，useMemo 和 useCallback 一定重新执行。但是，当依赖没变化时，不能保证它们一定不执行，也可能重新执行，这是考虑内存优化的结果，react 官方的文档中也没有打包票一定不执行。所以，useMemo 和 useCallback 可以作为一种锦上添花的方案，不可以过渡依赖它们是否重新执行。

useCallback的参数

第一个参数为要执行的逻辑函数

第二个参数为这个函数锁依赖的变量组成的数组，如果不传则 useMemo 的逻辑每次都执行，如果传入空数组就执行执行一次

useMemo(() => {
  return () => { console.log("click") }
}, [])
// 上下两者等价
useCallback(() => {
  console.log("click")
}, [])

使用 useRef

  • 获取子组件或者DOM节点的句柄
  • 获取跨越渲染周期的任意数据

useRef 和 useState 区别

state 的赋值会触发组件重渲染，但是 ref 不会

【特别用法】

如果在组件中，需要使用上次渲染的数据，可以使用useRef，同步到 current 中

// useRef
function HooksUseRef () {
  const [ count, setCount ] = useState(0)
  // 声明ref
  const countRef = useRef()
  // 将定时器实例，通步在useRef中，这样就可以防止每次渲染时重复调用
  const timer = useRef()

  // 给子组件传递的事件
  const bindChildClick = useCallback(() => {
    console.log('click')
    // 通过 current 获取 DOM 节点
    console.log(countRef.current)
    // 通过 ref 调用子组件的方法
    countRef.current.speak()
  }, [countRef])

  // 使 count 自增
  useEffect(() => {
    timer.current = setInterval(() => {
      setCount(count => count + 1)
    }, 1000)
    return () => {
      cleanup
    }
  }, [])
  // 监测 count 大于10，停止自增
  useEffect(() => {
    if (count >= 10) {
      clearInterval(timer.current)
    }
  })

  return (
    <div>
      <button onClick={() => {setCount(count + 1)}}>HooksUseRef: {count}</button>
      {/* 给类组件的ref属性赋值 */}
      <HooksUseRefClassChild ref={countRef} count={count} onClick={bindChildClick}></HooksUseRefClassChild>
    </div>
  )
}
// 类组件获取 ref
class HooksUseRefClassChild extends PureComponent {
  speak () {
    console.log('this is child function: ', this.props.count)
  }
  render () {
    const { props } = this
    return <b onClick={props.onClick}> HooksUseRefClassChild: {props.count}</b>
  }
}

自定义 Hooks 函数

// 自定义 hooks 函数，一定要使用 use 开头
function useCount (defaultCount) {
  const [count, setCount] = useState(defaultCount)
  const timer = useRef()
  // 使 count 自增
  useEffect(() => {
    timer.current = setInterval(() => {
      setCount(count => count + 1)
    }, 1000)
    return () => {
      cleanup
    }
  }, [])
  // 监测 count 大于10，停止自增
  useEffect(() => {
    if (count >= 10) {
      clearInterval(timer.current)
    }
  })
  // 这里的返回值可以自定义，我参考 useState 的返回
  return [count, setCount]
}
// 自定义 hooks 函数，返回 JSX
function useCountJSX (defaultCount) {
  return (
    <b>{defaultCount}</b>
  )
}
function HooksSelfFunciton () {
  const [count, setCount] = useCount(0) // 模仿原生的 useState
  const CountJSX = useCountJSX(count) // 直接返回 JSX
  return (
    <div>
      <button onClick={() => {setCount(count + 1)}}>useCount: {count}</button>
      useCountJSX: {CountJSX}
    </div>
  )
}
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 213,186评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,858评论 3赞 387
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,620评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,888评论 1赞 285
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 66,009评论 6赞 385
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,149评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,204评论 3赞 412
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,956评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,385评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,698评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,863评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,544评论 4赞 335
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,185评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,899评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,141评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,684评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,750评论 2赞 351

推荐阅读更多精彩内容

  • 十个案例学会 React Hooks
    在学会使用React Hooks之前，可以先看一下相关原理学习React Hooks 前言 在 React 的世界...
    DC_er阅读 9,074评论 1赞 16
  • React学习：理解和使用Hooks
    Hooks 是React的一次革命性升级，本文将对其优势和API进行比较全面的解析 为什么要有hooks 在没有h...
    smartzheng阅读 933评论 0赞 5
  • React Hooks 入门
    目录 什么是 React Hooks？ 为什么要创造 Hooks？ Hooks API 一览 Hooks 使用规则...
    一个笑点低的妹纸阅读 1,075评论 0赞 2
  • 2019-12-19
    Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他...
    孤独的小色狼阅读 363评论 0赞 0
  • React Hooks
    你还在为该使用无状态组件（Function）还是有状态组件（Class）而烦恼吗？——拥有了hooks，你再也不需...
    水落斜阳阅读 82,322评论 11赞 100