React-HOOK复习

hooks只能在函数式组件中使用

useState

基本使用-数字

import  React,{useState} from 'react'
function HooksTest() {
	//num为变量，setNum是方法 形参参数为num值，return值为num新值
    const [num,setNum] = useState(0)//0为默认值
    return(
        <div>
        <h1>{num}</h1>
            <Button onClick={()=>setNum((n)=>{
                return n+1
            })}>setNum</Button>
        </div>
    )
}
// 实现了点击按钮递增

基本使用-对象

import  React,{useState} from 'react'
function HooksTest() {
    const [obj,setNum] = useState({
        num: 2,
        id: 3
    })
    return(
        <div>
        <h1>{obj.num}</h1>
            <Button onClick={()=>setNum((obj)=>{
                return {...obj, num:obj.num+1}
            })}>setNum</Button>
        </div>
    )
}
// 将对象解构，并且将需要改变的值放上去

useReducer

用来践行Flux/Redux思想

一、创建初始值initialState

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

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

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

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

案例1-不改变obj

import  React,{useReducer} from 'react'

const obj = {
    num: 2,
    id: 3
}
const reducer = (state, action) => {
    if (action.type === 'add'){
        let num = obj.num+action.n
        return {...obj, num }
    }if (action.type === 'sub'){
        let num = obj.num - action.n
        return {...obj, num}
    }else {
        throw new Error("错误的类型")
    }
}

function HooksTest() {
    const [state, dispatch] = useReducer(reducer,obj);
    const {num} = state
    const onAdd = ()=>{
        dispatch({
            type: 'add',
            n: 10
        })
    }
    const onSub = ()=>{
        dispatch({
            type: 'sub',
            n: 5
        })
    }
    return(
        <div>
        <h1>{num}</h1>
            <Button onClick={onAdd}>add</Button>
            <Button onClick={onSub}>sub</Button>
        </div>
    )
}
// 以上代码 点击add后num为12，点击sub之后num为-3，重复点击只计算一次，obj.num未发生改变

如何代替 Redux

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

二、将所有操作集中在 reducer

三、创建一个 Context

四、创建对数据的读取 API

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

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

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

import React, { useReducer, useContext, useEffect } from "react";
import ReactDOM from "react-dom";

import React, {useReducer, useContext, useEffect} from "react";
import ReactDOM from "react-dom";

const store = {
    user: null,
    books: []
};

function reducer(state, action) {
    switch (action.type) {
        case "setUser":
            return {...state, user: action.user};
        case "setBooks":
            return {...state, books: action.books};
        default:
            throw new Error();
    }
}

const Context = React.createContext(null);

export default function App() {
    const [state, dispatch] = useReducer(reducer, store);

    const data = {state, dispatch};
    return (
        <Context.Provider value={data}>
            <User/>
            <hr/>
            <Books/>
        </Context.Provider>
    );
}

function User() {
    const {state, dispatch} = useContext(Context);
    const getUser = () => {
        dispatch({
            type: "setUser", user: {
                name: '零三',
                id: 30
            }
        });
    }
    return (
        <div>
            <h1>个人信息</h1>
            <div>{state.user ? state.user.name : <button onClick={getUser}>获取信息</button>}</div>

        </div>
    );
}

function Books() {
    const {state, dispatch} = useContext(Context);
    const getBooks = () => {
        dispatch({
            type: "setBooks", books: [
                {
                    name: 'java基础',
                    id: 1
                }, {
                    name: 'JavaScript数据结构与算法',
                    id: 2
                }
            ]
        });
    }
    return (
        <div>
            <h1>我的书籍</h1>
            <ol>
                {state.books.map(book => <li key={book.id}>{book.name}</li>)}
            </ol>
            {state.books.length === 0 && <button onClick={getBooks}>获取书籍</button>}
        </div>
    );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App/>, rootElement);

useContext

全局变量是全局的上下文

上下文是局部的全局变量

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

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

三、在作用域内使用 useContext©来使用上下文

import React, { useContext, useState} from "react";
const Context = React.createContext(null);

export default function App() {
    const [num, setNum] = useState(0)

    return (
        <Context.Provider value={{num,setNum}}>
            <Child/>
        </Context.Provider>
    );
}
function Child() {
    const {num, setNum} = useContext(Context)
    return(
        <div>
            <h2>{num}</h2>
            <button onClick={()=>setNum((n)=>{
                return n+1
            })}>add</button>
        </div>
    )
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App/>, rootElement);

useEffect

对环境的改变即为副作用，如修改 document.title

但我们不一定非要把副作用放在 useEffect 里面

实际上叫做 afterRender 更好，每次render后执行

一、作为 componentDidMount 使用，[ ] 作第二个参数

二、作为 componentDidUpdate 使用，可指定依赖

三、作为 componentWillUnmount 使用，通过 return

四、以上三种用途可同时存在

如果同时存在多个 useEffect， 会按照出现次序执行

function Child() {
    const [num, setNum] = useState(10)
    useEffect(()=>{
        console.log('第一次渲染执行')
    },[])
    useEffect(()=>{
        console.log('任何变化都会执行')
    })
    useEffect(()=>{
        console.log('num变化执行', num)
    }, [num])
    return(
        <div>
            <h2>{num}</h2>
            <button onClick={()=>setNum((n)=>{
                return n+1
            })}>add</button>
        </div>
    )
}

useLayoutEffect

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

useLayoutEffect 在浏览器渲染前执行

useLayoutEffect比useEffect先执行

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

export default function App() {
    const [n, setN] = useState(1)
    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.9ms
        }
    })
    useEffect(() => {
        if (time.current) {
            console.log(performance.now() - time.current) //大概是2.1ms
        }
    })
    return (
        <div className="App">
            <h1>n: {n}</h1>
            <button onClick={onClick}>Click</button>
        </div>
    );
}

useMemo

第一个参数是 () => value

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

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

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

这不就是 Vue 2的 computed 吗？

注意：
如果你的 value 是一个函数，那么你就要写成useMemo(() => x => console.log(x)) 这是一个返回函数的函数 是不是很难用？于是就有了useCallback

要理解 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>;
});

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} />;
})