React(九）React Hooks

初识Hook

我们到底为什么需要hook那?

函数组件类组件存在问题

函数组件存在的问题：

import React, { PureComponent } from 'react'function HelloWorld2(props) {let message="Hello world"// 函数式组件存在的缺陷：// 1.修改message之后，组件不会重新渲染// 2.就算页面重新渲染：函数会被重新执行，第二次执行时，又会重新给message赋值未Hello world// 3.不能编写类似生命周期的回调:网络请求...return (<div><h1 onClick={e =>message="你好啊"}>内容2：{message}</h1><button>修改文本</button></div>)
}
export class App extends PureComponent {render() {return (<div><h1>App</h1><hr /><HelloWorld2 /></div>)}
}export default App

class组件存在的问题：

1.复杂组件变得难以理解

随着业务增加，class组件会变得越来越复杂
在挂载阶段，可能包含大量的逻辑代码：网络请求、事件监听等；还得在卸载阶段移除掉
逻辑往往混在一起，class难以拆分

2.更加复杂：需要搞清this的指向到底是谁，熟练ES6class

3.组件复用难

状态复用需要通过高阶组件
或者类似Provider、Consumer来共享一些状态，但多次使用Consumer,会导致我们代码存在很多嵌套，难以维护

Hook的出现

hooks的出现就是为了解决上述问题：

它可以在不编写class的情况下使用state以及其它React特性
基本可替代之前所有使用class组件的地方
并不需要直接将所有的代码重构为hooks,因为它向下兼容，可渐进式使用它
只能在函数组件中使用，不能在类组件中使用

Hook实现计数器

import React, { memo,useState } from 'react'
// useState()返回的是一个数组
// 元素一：当前状态的值（第一次为初始值)，如果不设置则为undefined
// 元素二：更新当前值的函数
const CounterFunction = memo(() => {const [counter,setCounter] = useState(0)return (<div><h2>CounterFunction:{counter}</h2><button onClick={e => setCounter(counter+1)}>+1</button><button onClick={e => setCounter(counter-1)}>-1</button></div>)
})export default CounterFunction

State/Effect

useState

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

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

2.点击button按钮后，会完成两件事情：

调用setCount，设置一个新的值；
组件重新渲染，并且根据新的值返回DOM结构；

3.Hook 就是 JavaScript 函数，这个函数可以帮助你钩入（hook into） React State以及生命周期等特性；

4.但是使用它们会有两个额外的规则：

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

如果逻辑太复杂，也可以单独封装一个函数修改数据

import React, { memo,useState } from 'react'const CounterFunction = memo(() => {const [message,setMessage] = useState("HelloWorld")function changeMessage(){setMessage("你好呀")}return (<div><h2>CounterFunction:{message}</h2><button onClick={changeMessage}>修改文本</button></div>)
})export default CounterFunction

注意：为什么是useState而不是createState?

解答：因为state只在组件首次渲染时被创建，在下次渲染时，useState返回给我们当前的state。如果每次都创建新的变量，那就不该是状态了。

useEffect

它可以帮在函数组件中完成类似于class生命周期的功能。如网络请求、手动更新DOM、一些事件的监听，都是React更新DOM的一些副作用（Side Effects)。因此对于完成这些功能的Hook就被称为Effect Hook

1.基本使用

我们现在来完成一个需求：使页面的title总是显示count的数字：

代码实现：

useEffect传入一个回调函数, 这个回调函数在每次页面渲染完成后自动执行。也就是说，每次在函数式组件执行的顺序是：

执行函数组件 => 定义初始状态 => 渲染DOM => 执行useEffect中的回调=> 修改数据 => 重新执行函数组件 => 更新状态 => 渲染最新DOM => 执行useEffect中的回调

不难看出，其实useEffect中的回调相当于完成了componentDidMount和componentDidUpdate做的事情。

2.清除Effect

在类组件编写过程中，某些副作用我们需要在componentWillUnmount中进行清除，如事件总线、Redux中手动调用的subscribe等

useEffect传入的回调函数A本身有一个返回值，返回值里面是回调函数B，可在函数B中进行清除

// 复杂告知react,在执行完当前渲染之后要执行的副作用代码
useEffect(() => {console.log("监听redux中数据变化");// 传入的回调函数，又会返回一个回调函数=> 组件被重新渲染或卸载时执行return () => {console.log("取消监听redux中的数据变化");}
})

3.使用多个Effect

将这些处理逻辑都放在同一个函数里面难维护，要清除也比较混乱，在使用中我们可将逻辑分离到不同的useEffect中：React 将按照 effect 声明的顺序依次调用组件中的每一个 effect；

如下图：

但是有一个问题，难道每渲染一次页面，我们的所有effect就要重新调用一次吗？

某些逻辑只需要执行一次即可，怎样才能解决这个问题嘞？

实际上，Effect有两个参数：

参数一：执行的回调函数；
参数二：该useEffect在哪些state发生变化时，才重新执行；（受谁的影响）

import React, { memo, useEffect, useState } from 'react'const App = memo(() => {const [count,setCount] = useState(0)const [message,setMessage] = useState("HelloWorld")useEffect(() => {console.log("修改title");},[count])useEffect(() => {console.log("监听redux中的数据");return () => {}},[])useEffect(() => {console.log("监听eventBus的why事件");return () => {}},[])// 我希望它第一次渲染时执行一次即可useEffect(() => {console.log("发生网络请求");return () => {console.log("会在我们组件被卸载时才会执行");}},[]) return (<div><h2>Count-{count} </h2><button onClick={e => setCount(count+1)}>+1</button><button onClick={e => setMessage("你好啊")}>message({message})</button></div>)
})export default App

打印结果如下图：

Context/Reducer

useContext

我们之前在组件中使用类名.contextType = MyContext或MyContext.Consumer来共享数据

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

import React, { Component } from 'react'
import { UserContext,ThemeContext } from './context'export default class App extends Component {// 使用Conetxtrender() {return (<div><UserContext.Consumer>{value => {return (<h2><ThemeContext.Consumer>{value => <span>{value.color}</span>}</ThemeContext.Consumer> </h2>)}}</UserContext.Consumer></div>)}
}

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

import React, { memo ,useContext} from 'react'
import { UserContext,ThemeContext } from './context'const App = memo(() => {// 使用Conetxtconst user = useContext(UserContext)const theme = useContext(ThemeContext)return (<div><div><span>用户信息-{user.name}-{user.age} </span><span>主题色-{theme.color} </span></div></div>)
})export default App

注意：当组件上层最近的 <MyContext.Provider> 更新时，该 Hook 会触发重新渲染，并使用最新传递给 MyContext provider 的context value 值。因此，该数据的更新也是响应式的。

Callback/Memo（性能优化）

useCallback

通常使用useCallback是不希望子组件进行多次渲染，并不是为了进行函数缓存

1.存在问题

import React, { memo,useCallback,useState } from 'react'const HYHome = memo(function(props) {const { increment } = propsconsole.log("HYHome被渲染")return (<div><button onClick={increment}>increment+8</button>{/* 100个子组件 */}</div>)
})const App = memo(() => {const [count, setCount] = useState(0)const increment = function() {console.log("increment");setCount(count + 8)}return (<div><h2>App-{count}</h2><button onClick={increment} >+8</button><HYHome increment={increment}/></div>)
})export default App

我希望当子组件没有变化时，不需要重新渲染：

useCallback()返回一个函数的记忆值，在依赖不变的情况下，多次定义返回值是相同的

import React, { memo, useState, useCallback, useRef } from 'react'// useCallback性能优化的点:
// 1.当需要将一个函数传递给子组件时, 最好使用useCallback进行优化, 将优化之后的函数, 传递给子组件——这样的话在某些情况下，子组件就不会重新渲染// props中的属性发生改变时, 组件本身就会被重新渲染
const HYHome = memo(function(props) {const { increment } = propsconsole.log("HYHome被渲染")return (<div><button onClick={increment}>increment+1</button>{/* 100个子组件 */}</div>)
})const App = memo(function() {const [count, setCount] = useState(0)const [message, setMessage] = useState("hello")// 闭包陷阱: useCallback// const increment = useCallback(function foo() {//   console.log("increment")//   setCount(count+1)// }, [count])// 进一步的优化: 当count发生改变时, 也使用同一个函数(了解)// 做法一: 将count依赖移除掉, 缺点: 闭包陷阱// 做法二: useRef, 在组件多次渲染时, 返回的是同一个值const countRef = useRef()countRef.current = countconst increment = useCallback(function foo() {console.log("increment")setCount(countRef.current + 1)}, [])// 普通的函数// const increment = () => {//   setCount(count+1)// }return (<div><h2>计数: {count}</h2><button onClick={increment}>+1</button><HYHome increment={increment}/><h2>message:{message}</h2><button onClick={e => setMessage(Math.random())}>修改message</button></div>)
})export default App

useMemo

1.使用场景：

有大量逻辑计算时，若逻辑输入值无变化，则无需重新计算
对子组件传递相同内容对象时，若无改变则不重新执行

2.函数传入两个参数：

参数一：回调函数

参数二：[逻辑执行依赖的变量]

3.useMemo和useCallback的对比

useMemo拿到的是传入回调函数的返回值，useCallback是回调函数本身

import React, { memo, useCallback } from 'react'
import { useMemo, useState } from 'react'const HelloWorld = memo(function(props) {console.log("HelloWorld被渲染~")return <h2>Hello World</h2>
})// 计算数字
function calcNumTotal(num) {// console.log("calcNumTotal的计算过程被调用~")let total = 0for (let i = 1; i <= num; i++) {total += i}return total
}const App = memo(() => {const [count, setCount] = useState(0)// const result = calcNumTotal(50)// 1.不依赖任何的值, 进行计算const result = useMemo(() => {return calcNumTotal(50)}, [])// 2.依赖count// const result = useMemo(() => {//   return calcNumTotal(count*2)// }, [count])// 3.useMemo和useCallback的对比function fn() {}// const increment = useCallback(fn, [])// const increment2 = useMemo(() => fn, [])// 4.使用useMemo对子组件渲染进行优化// 重新渲染时会定义一个新对象，传入值是没有什么区别的// const info = { name: "why", age: 18 }const info = useMemo(() => ({name: "why", age: 18}), [])return (<div><h2>计算结果: {result}</h2><h2>计数器: {count}</h2><button onClick={e => setCount(count+1)}>+1</button><HelloWorld result={result} info={info} /></div>)
})export default App

Ref/LayoutEffect

useRef

1.获取DOM

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

2.useRef解决闭包陷阱问题

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

import React, { memo, useRef } from 'react'
import { useCallback } from 'react'
import { useState } from 'react'let obj = nullconst App = memo(() => {const [count, setCount] = useState(0)// useRef返回的是一个不变的对象（地址不变）const nameRef = useRef()console.log(obj === nameRef)obj = nameRef// 通过useRef解决闭包陷阱const countRef = useRef()countRef.current = countconst increment = useCallback(() => {setCount(countRef.current + 1)}, [])return (<div><h2>Hello World: {count}</h2><button onClick={e => setCount(count+1)}>+1</button><button onClick={increment}>+1</button></div>)
})export default App

useImperativeHandle/useLayoutEffect(了解）

useImperativeHandle

通过forwardRef可以将子组件的DOM直接暴露给父组件，但是这样也产生了一些问题：

父组件可以拿到子组件的DOM进行任意操作，这样就有点危险了，我们有什么办法解决吗？

可以通过useImperativeHandle的Hook，将传入的ref和useImperativeHandle第二个参数返回的对象绑定到了一起
在父组件中，使用 inputRef.current时，实际上使用的是返回的对象

代码示例：

import React, { memo, useRef, forwardRef, useImperativeHandle } from 'react'const HelloWorld = memo(forwardRef((props, ref) => {const inputRef = useRef()// 如果直接绑定它，权限有点多，对于子组件来说太危险了——我希望只给它保留特定的权限// 子组件对父组件传入的ref进行处理useImperativeHandle(ref, () => {return {focus() {console.log("focus")inputRef.current.focus()},setValue(value) {inputRef.current.value = value}}})return <input type="text" ref={inputRef}/>
}))const App = memo(() => {const titleRef = useRef()const inputRef = useRef()function handleDOM() {// console.log(inputRef.current)inputRef.current.focus()// inputRef.current.value = ""inputRef.current.setValue("哈哈哈")}return (<div><h2 ref={titleRef}>哈哈哈</h2><HelloWorld ref={inputRef}/><button onClick={handleDOM}>DOM操作</button></div>)
})export default App

useLayoutEffect

useLayoutEffect看起来和useEffect非常的相似，事实上他们也只有一点区别而已：

useEffect会在渲染的内容更新到DOM上后执行，不会阻塞DOM的更新；
useLayoutEffect会在渲染的内容更新到DOM上之前执行，会阻塞DOM的更新；

如果我们希望在某些操作发生之后再更新DOM，那么应该将这个操作放到useLayoutEffect。

import React, { memo, useEffect, useLayoutEffect, useState } from 'react'const App = memo(() => {const [count, setCount] = useState(100)// 点击按钮后，会出现闪烁现象-先变成0，再变成99.xxxx，useEffect(() => {console.log("useEffect")if (count === 0) {setCount(Math.random() + 99)}})// 不会出现闪烁现象，直接变成99.xxxxuseLayoutEffect(() => {console.log("useLayoutEffect")if (count === 0) {setCount(Math.random() + 99)}})console.log("App render")return (<div><h2>count: {count}</h2><button onClick={e => setCount(0)}>设置为0</button></div>)
})export default App

自定义Hook

本质：对函数代码的抽取,实现复用，减少代码逻辑

需求一：所有的组件在创建和销毁时都进行打印

import React, { memo, useEffect, useState } from 'react'// 自定义Hook
function useLogLife(cName) {useEffect(() => {console.log(cName + "组件被创建")return () => {console.log(cName + "组件被销毁")}}, [cName])
}const Home = memo(() => {useLogLife("home")return <h1>Home Page</h1>
})const About = memo(() => {useLogLife("about")return <h1>About Page</h1>
})const App = memo(() => {const [isShow, setIsShow] = useState(true)useLogLife("app")return (<div><h1>App Root Component</h1><button onClick={e => setIsShow(!isShow)}>切换</button>{ isShow && <Home/> }{ isShow && <About/> }</div>)
})export default App

需求二：Context的共享

1.有两个自定义的context

import { createContext } from "react";const UserContext = createContext()
const TokenContext = createContext()export {UserContext,TokenContext
}

2.通过.Provider去包裹根组件

root.render(<userContext.Provider value={{name:'dimple', age: 22}}><tokenContext.Provider value={'dimple555'}><App /></tokenContext.Provider></userContext.Provider>
);

3.封装一个hook方法，只要一调用就能拿到共享的数据

import { useContext } from "react"
import { UserContext, TokenContext } from "../context"function useUserToken() {const user = useContext(UserContext)const token = useContext(TokenContext)return [user, token]
}export default useUserToken

4.在子组件中使用

import React, { memo } from 'react'
import { useUserToken } from "./hooks"// User/Tokenconst Home = memo(() => {const [user, token] = useUserToken()return <h1>Home Page: {user.name}-{token}</h1>
})const About = memo(() => {const [user, token] = useUserToken()return <h1>About Page: {user.name}-{token}</h1>
})const App = memo(() => {return (<div><h1>App Root Component</h1><Home/><About/></div>)
})export default App

需求三：获取鼠标滚动位置

1.定义一个hook

import { useState, useEffect } from "react"function useScrollPosition() {const [ scrollX, setScrollX ] = useState(0)const [ scrollY, setScrollY ] = useState(0)useEffect(() => {function handleScroll() {// console.log(window.scrollX, window.scrollY)setScrollX(window.scrollX)setScrollY(window.scrollY)}window.addEventListener("scroll", handleScroll)//使用完销毁return () => {window.removeEventListener("scroll", handleScroll)}}, [])return [scrollX, scrollY]
}export default useScrollPosition

2.在各个组件中使用

import React, { memo } from 'react'
import useScrollPosition from './hooks/useScrollPosition'
import "./style.css"const Home = memo(() => {const [scrollX, scrollY] = useScrollPosition()return <h1>Home Page: {scrollX}-{scrollY}</h1>
})const About = memo(() => {const [scrollX, scrollY] = useScrollPosition()return <h1>About Page: {scrollX}-{scrollY}</h1>
})const App = memo(() => {return (<div className='app'><h1>App Root Component</h1><Home/><About/></div>)
})export default App

redux hooks

在redux开发中，我们为了让组件和redux结合起来，我们使用了react-redux的connect,这种方式必须使用高阶函数结合返回的高阶组件，且必须编写mapStateToProps和mapDispatchToProps映射的函数，这样其实挺麻烦的

Redux7.1开始，可获取仓库的数据和方法

useSelector:将store映射到组件中

参数一：传入一个回调函数，参数为state,返回需要的数据对象

参数二：通过比较决定组件是否重新渲染

import React, { memo } from 'react'
import { useSelector, useDispatch, shallowEqual } from "react-redux"
import { addNumberAction, changeMessageAction, subNumberAction } from './store/modules/counter'// memo高阶组件包裹起来的组件有对应的特点: 只有props发生改变时, 才会重新渲染
//它默认会比较比较返回的两个对象是否相等，也就是必须返回两个完全相等的对象才可以不引起重新渲染
//那比如message属性值没发生改变就不该渲染该组件的，所以加了shallowEqual
const Home = memo((props) => {const { message } = useSelector((state) => ({message: state.counter.message}), shallowEqual)const dispatch = useDispatch()function changeMessageHandle() {dispatch(changeMessageAction("你好啊, 师姐!"))}console.log("Home render")return (<div><h2>Home: {message}</h2><button onClick={e => changeMessageHandle()}>修改message</button></div>)
})const App = memo((props) => {// 1.使用useSelector将redux中store的数据映射到组件内const { count } = useSelector((state) => ({count: state.counter.count}), shallowEqual)// 2.使用dispatch直接派发actionconst dispatch = useDispatch()function addNumberHandle(num, isAdd = true) {if (isAdd) {dispatch(addNumberAction(num))} else {dispatch(subNumberAction(num))}}console.log("App render")return (<div><h2>当前计数: {count}</h2><button onClick={e => addNumberHandle(1)}>+1</button><button onClick={e => addNumberHandle(6)}>+6</button><button onClick={e => addNumberHandle(6, false)}>-6</button><Home/></div>)
})export default App