浅谈 Hooks

最新推荐文章于 2023-03-04 02:07:40 发布

m0_67390379

最新推荐文章于 2023-03-04 02:07:40 发布

阅读量178

点赞数

CC 4.0 BY-SA版权

分类专栏：前端 html 文章标签： python 深度学习机器学习

本文链接：https://blog.csdn.net/m0_67390379/article/details/123321942

如果你很熟悉 vue 与 react ，兴许你也觉得 vue3.0 抄袭了react，这项react 在不久前发布的新技术，在 vue3.0 中被重新搬上了舞台。也使它重新活跃在了人们的视野中，我技术不深，与大家分享我的见解和猜测。
在这里插入图片描述

useState
使用状态

const [n, setN] = React.useState(0)
const [user, setUser] = React.useState({name: 'Jack', age: 18})

注意事项：
无局部更新能力

如果state是一个对象，能否部分setState？
答案是不行，因为setState不会帮我们合并属性
那么useReducer会合并属性吗？也不会！
因为React认为这应该是你自己要做的事情

function App(){
    const [user, setUser] = React.useState({name: 'Jack', age: 18})
    const onClick = () =>{
        //setUser不可以局部更新，如果只改变其中一个，那么整个数据都会被覆盖
        // setUser({
        //  name: 'Frank'
        // })
        setUser({
            ...user, //拷贝之前的所有属性
            name: 'Frank' //这里的name覆盖之前的name
        })
    }
    return (
        <div className='App'>
            <h1>{user.name}</h1>
            <h2>{user.age}</h2>
            <button onClick={onClick}>Click</button>
        </div>
    )
}

注意事项：
地址要进行改变

setState(obj) 如果obj地址不变，那么React就认为数据没有变化，不会更新视图

useState接受函数

const [state, setState] = useState(() => {return initialState})

该函数返回初始state，且只执行一次

在这里插入图片描述

setState接受函数

setN(i => i + 1)

如果你能接受这种形式，应该优先使用这种形式

在这里插入图片描述

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, useContext, useEffect } from "react";
import ReactDOM from "react-dom";

const store = {
    user: null,
    books: null,
    movies: null
};

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

const Context = React.createContext(null);

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

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

function User() {
    const { state, dispatch } = useContext(Context);
    useEffect(() => {
        ajax("/user").then(user => {
            dispatch({ type: "setUser", user: user });
        });
    }, []);
    return (
        <div>
            <h1>个人信息</h1>
            <div>name: {state.user ? state.user.name : ""}</div>
        </div>
    );
}

function Books() {
    const { state, di