React中的Hooks—进阶篇

在之前的文章中我提到了三个基础的hooksuseState、useEffect和useRef。大家可以打开下面链接进行查看。react中Hooks的基本用法下面我们来讲解几个额外的hooks。useReducer用来践行Flux/Redux思想看代码，分四步走一、创建初始值initialState二、创建所有操作reducer(state, action);三、传给userReducer，得到读和

大口喝脉动

369人浏览 · 2021-08-28 15:58:04

大口喝脉动 · 2021-08-28 15:58:04 发布

在之前的文章中我提到了三个基础的hooks

useState、useEffect和useRef。

大家可以打开下面链接进行查看。

react中Hooks的基本用法

下面我们来讲解几个额外的hooks。

useReducer

用来践行Flux/Redux思想

看代码，分四步走

一、创建初始值initialState

二、创建所有操作reducer(state, action);

三、传给userReducer，得到读和写API

四、调用写({type: '操作类型'})

总的来说，useReducer 是 useState 的复杂版

如何替代Redux

步骤

一、将数据集中在一个 store 对象

二、将所有操作集中在 reducer

三、创建一个 Context

四、创建对数据的读取 API

五、将第四步的内容放到第三步的 Context

六、用 Context.Provider 将 Context 提供给所有组件

七、各个组件用 useContext 获取读写API

举个例子：点击按钮进行加减

import React,{ useReducer } from 'react'


export default function ReduceDemo() {

    //创建一个数组，第一个值为数据，第二个值为dispatch派发任务
    //useReducer有两个参数分别为回调函数和一个初始值
    //回调函数用来判断派发的action对象，并返回state
    const [ count, dispatch ] = useReducer((state, action) => {
        switch (action) {
            case 'add':
                return state + 1;
            case 'sub':
                return state - 1;
            default:
                return state;
        }
    },0)

    return (
        <div>
            <p>当前值为：{ count }</p>
            <button onClick={()=>{dispatch('add')}}>加</button>
            <button onClick={()=>{dispatch('sub')}}>减</button>
        </div>
    )
}

useContext

上下文

全局变量是全局的上下文
上下文是局部的全局变量

使用方法

一、使用 C = createContext(initial) 创建上下文

二、使用 <C.Provider> 圈定作用域

三、在作用域内使用 useContext(C)来使用上下文

举个例子：写一个累加器

import React, { useState , createContext , useContext } from 'react'

//创建一个上下文
const countContext = createContext();

//定义一个子组件
function Counter(){
    //从上下文中取出count
    let count = useContext(countContext)
    return <h2>{count}</h2>
}

function Demo(){

    const [count,setCount] = useState(0)

    //用countContext.Provider提供值
    return (
        <div>
            <p>你点击了{ count }次</p>
            <button onClick={() => { setCount(count+1) }}>点我</button>
            <countContext.Provider value={count}>
                <Counter/>
            </countContext.Provider>
        </div>
    )
}

export default Demo

useLayoutEffect

布局副作用

useEffect 在浏览器渲染完成后执行

useLayoutEffect 在浏览器渲染前执行

function App1() {
    const [n, setN] = useState(0)
    const time = useRef(null)
    const onClick = () => {
        setN(i => i + 1)
        time.current = performance.now()
    }
    useLayoutEffect(() => {
        if (time.current) {
            console.log(performance.now() - time.current) //大概是0.7ms
        }
    })
    useEffect(() => {
        if (time.current) {
            console.log(performance.now() - time.current) //大概是2.7ms
        }
    })
    return (
        <div className="App">
            <h1>n: {n}</h1>
            <button onClick={onClick}>Click</button>
        </div>
    );
}

特点

useLayoutEffect 总比 useEffect 先执行

useLayoutEffect 里的任务最好影响了 Layout

/* useLayoutEffect比useEffect先执行 */
function App2() {
    const [n, setN] = useState(0)
    const onClick = () => {
        setN(i => i + 1)
    }
    //执行顺序打印出 2、3、1
    useEffect(() => {
        console.log(1)
    })
    useLayoutEffect(() => {
        console.log(2)
    })
    useLayoutEffect(() => {
        console.log(3)
    })
    return (
        <div className="App">
            <h1>n: {n}</h1>
            <button onClick={onClick}>Click</button>
        </div>
    );
}

经验

为了用户体验，优先使用 useEffect (优先渲染)

useMemo

要理解 React.useMemo

需要先讲 React.memo

React默认有多余的render

function App() {
    const [n, setN] = React.useState(0);
    const [m, setM] = React.useState(0);
    const onClick = () => {
        setN(n + 1);
    };

    return (
        <div className="App">
            <div>
                {/*点击button会重新执行Child组件*/}
                <button onClick={onClick}>update n {n}</button>
            </div>
            <Child data={m}/>
            {/* <Child2 data={m}/> */}
        </div>
    );
}

function Child(props) {
    console.log("child 执行了");
    console.log('假设这里有大量代码')
    return <div>child: {props.data}</div>;
}

const Child2 = React.memo(Child);

将代码中的 Child 用React.memo(Child) 代替

如果 props 不变，就没有必要再次执行一个函数组件

最终代码：

function App() {
    const [n, setN] = React.useState(0);
    const [m, setM] = React.useState(0);
    const onClick = () => {
        setN(n + 1);
    };

    return (
        <div className="App">
            <div>
                {/*点击button会重新执行Child组件*/}
                <button onClick={onClick}>update n {n}</button>
            </div>
            <Child data={m}/>
        </div>
    );
}

const Child = React.memo(props => {
        console.log("child 执行了");
        console.log('假设这里有大量代码')
        return <div>child: {props.data}</div>;
});

但是
这玩意有一个bug

添加了监听函数之后，一秒破功因为 App 运行时，会再次执行 onClickChild，生成新的函数

新旧函数虽然功能一样，但是地址引用不一样！

function App() {
    const [n, setN] = React.useState(0);
    const [m, setM] = React.useState(0);
    const onClick = () => {
        setN(n + 1);
    };
    const onClickChild = () => {}
    return (
        <div className="App">
            <div>
                {/*点击button会重新执行Child组件*/}
                <button onClick={onClick}>update n {n}</button>
            </div>
            {/*但是如果传了一个引用，则React.memo无效。因为引用是不相等的*/}
            <Child data={m} onClick={onClickChild}/>
        </div>
    );
}

//使用React.memo可以解决重新执行Child组件的问题
const Child = React.memo(props => {
        console.log("child 执行了");
        console.log('假设这里有大量代码')
        return <div onClick={props.onClick}>child: {props.data}</div>;
});

怎么办？用useMemo：

function App() {
    const [n, setN] = React.useState(0);
    const [m, setM] = React.useState(0);
    const onClick = () => {
        setN(n + 1);
    };
    const onClick1 = () => {
        setM(m + 1);
    };
    const onClickChild = () => {}
    const onClickChild1 = useMemo(() => {
        return () => {
            console.log(`on click child m: ${m}`)
        }
    }, [m])
    return (
        <div className="App">
            <div>
                {/*点击button会重新执行Child组件*/}
                <button onClick={onClick}>update n {n}</button>
                <button onClick={onClick1}>update m {m}</button>
            </div>
            {/*但是如果传了一个引用，则React.memo无效。因为引用是不相等的*/}
            {/*<Child data={m} onClick={onClickChild}/>*/}
            {/*onClickChild1使用useMemo可以消除此bug*/}
            <Child data={m} onClick={onClickChild1}/>
        </div>
    );
}

//使用React.memo可以解决重新执行Child组件的问题
const Child = React.memo(props => {
        console.log("child 执行了");
        console.log('假设这里有大量代码')
        return <div onClick={props.onClick}>child: {props.data}</div>;
});

useMemo

特点

第一个参数是 () => value

第二个参数是依赖 [m, n]

只有当依赖变化时，才会计算出新的 value

如果依赖不变，那么就重用之前的 value

这不就是 Vue 2的 computed 吗？

注意

如果你的 value 是一个函数，那么你就要写成useMemo(() => x => console.log(x))

这是一个返回函数的函数

是不是很难用？于是就有了useCallback

useCallback

用法

useCallback(x => console.log(x), [m]) 等价于

useMemo( () => x => console.log(x), [m])

forwardRef

useRef

可以用来引用 DOM 对象

也可以用来引用普通对象

forwardRef

props 无法传递 ref 属性

function App(){
    const buttonRef = useRef(null)
    return (
        <div>
            <Button ref={buttonRef}>按钮</Button>
            {/* 控制台报错:
                    Warning: Function components cannot be given refs.
                  Attempts to access this ref will fail.
                  Did you mean to use React.forwardRef()?
              */}
        </div>
    )
}

const Button = (props) => {
    console.log(props) // {ref: undefined, children: "按钮"}
    return <button {...props} />
}

实现 ref 的传递：由于 props 不包含 ref，所以需要 forwardRef

import React, {forwardRef, useRef} from 'react';

function App(){
    const buttonRef = useRef(null)
    return (
        <div>
            <Button ref={buttonRef}>按钮</Button2>
        </div>
    )
}
const Button = forwardRef((props, ref) => {
    console.log(ref)  //可以拿到ref对button的引用，forwardRef仅限于函数组件，class 组件是默认可以使用 ref 的
    return <button ref={ref} {...props} />;
})