什么是 Hooks

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

类组件的劣势

• 1. 状态逻辑难复用
     缺少复用机制
     渲染属性和高阶组件导致层级冗余
• 2. 趋向复杂难以维护
     生命周期函数混杂不相干逻辑
     想干逻辑分散在不同生命周期
• 3. 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 ( {this.setState({ count: count + 1 })}}> ClassComponent Click Count ({count}) ) } }

使用 Hooks

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

通过 props 设置默认值

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

使用 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 ( { setCount(count + 1)} }> HooksCompinentUseEffect Click Count ({count}) W: {size.width} | H: {size.height}) }

Hooks环境下的Context

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

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

使用 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 ( {setCount(count + 1)}}>HookMemoParent: {count}，doubleCount: {doubleCount}, boolCount: {boolCount}) } function HooksMemoChild (props) { return ( {props.count} ) }

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 不会

【特别用法】

【React|React Hooks 入门记录】如果在组件中，需要使用上次渲染的数据，可以使用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 ( {setCount(count + 1)}}>HooksUseRef: {count} {/* 给类组件的ref属性赋值 */}) } // 类组件获取 ref class HooksUseRefClassChild extends PureComponent { speak () { console.log('this is child function: ', this.props.count) } render () { const { props } = this return HooksUseRefClassChild: {props.count} } }

自定义 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 ( {defaultCount} ) } function HooksSelfFunciton () { const [count, setCount] = useCount(0) // 模仿原生的 useState const CountJSX = useCountJSX(count) // 直接返回 JSX return ( {setCount(count + 1)}}>useCount: {count} useCountJSX: {CountJSX}) }

推荐阅读

• 

  空想社会主义的贡献
• 

  剥蒜皮的小窍门有哪些 一起来看看吧
• 

  腾逸是什么意思 腾逸的解释
• 

  王者荣耀这游戏,从一个新手小白到星耀需要多长时间？
• 

  python实现迭代法解方程
• 

  格力空调ul故障代码
• 

  寻人
• 

  神话胡歌版人物关系 神话胡歌和谁在一起了
• 

  维他命b6可以回奶吗
• 

  redissql
• 

  asp.net书籍文献，aspnet web开发 书籍
• 

  哪个购物平台可以通过完成任务来返现？
• 

  谷雨|谷雨|春色撩不尽，一枚雨衣入目来
• 

  女人哪些行为说明她在“撩”你？
• 

  1270v3支持d4内存吗,h81主板能用1270v3吗
• 

  2021高考一本压线该不该复读
• 

  k850座位表是怎样的？k850次列车为什么停运
• 

  python封装几个函数 python封装函数计算1到100的累加
• 

  格力空调E1故障解决方法及维修技巧，快速修复您的空调问题
• 

  活动游戏策划

• react|react 安装
• typeScript入门基础介绍
• React.js学习笔记(17)|React.js学习笔记(17) Mobx
• Android|Android sqlite3数据库入门系列
• Android下的IO库-Okio源码解析(一)|Android下的IO库-Okio源码解析(一) 入门
• React.js的表单(六)
• 【React|【React Native填坑之旅】从源码角度看JavaModule注册及重载陷阱
• react-navigation|react-navigation 动态修改 tabBar 样式
• 深度学习-入门
• 第三章|第三章 进校园重拾旧梦 登讲台初为人师第一节 接乱班面临考验 ，遇高师指点入门