浅谈 Hooks

   日期:2020-10-11     浏览:86    评论:0    
核心提示:  如果你很熟悉 vue 与 react ,兴许你也觉得 vue3.0 抄袭了react,这项react 在不久前发布的新技术,在 vue3.0 中被重新搬上了舞台。也使它重新活跃在了人们的视野中,我技术不深,与大家分享我的见解和猜测。image.pnguseState...

  如果你很熟悉 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, dispatch } = useContext(Context);
    useEffect(() => { 
        ajax("/books").then(books => { 
            dispatch({  type: "setBooks", books: books });
        });
    }, []);
    return (
        <div>
            <h1>我的书籍</h1>
            <ol>
                { state.books ? state.books.map(book => <li key={ book.id}>{ book.name}</li>) : "加载中"}
            </ol>
        </div>
    );
}

function Movies() { 
    const {  state, dispatch } = useContext(Context);
    useEffect(() => { 
        ajax("/movies").then(movies => { 
            dispatch({  type: "setMovies", movies: movies });
        });
    }, []);
    return (
        <div>
            <h1>我的电影</h1>
            <ol>
                { state.movies
                    ? state.movies.map(movie => <li key={ movie.id}>{ movie.name}</li>)
                    : "加载中"}
            </ol>
        </div>
    );
}

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

// 帮助函数

// 假 ajax
// 两秒钟后,根据 path 返回一个对象,必定成功不会失败
function ajax(path) { 
    return new Promise((resolve, reject) => { 
        setTimeout(() => { 
            if (path === "/user") { 
                resolve({ 
                    id: 1,
                    name: "Frank"
                });
            } else if (path === "/books") { 
                resolve([
                    { 
                        id: 1,
                        name: "JavaScript 高级程序设计"
                    },
                    { 
                        id: 2,
                        name: "JavaScript 精粹"
                    }
                ]);
            } else if (path === "/movies") { 
                resolve([
                    { 
                        id: 1,
                        name: "爱在黎明破晓前"
                    },
                    { 
                        id: 2,
                        name: "恋恋笔记本"
                    }
                ]);
            }
        }, 2000);
    });
}

useContext

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



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

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

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

useEffect
副作用 (API 名字叫得不好)


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

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

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

用途

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

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

三、作为 componentWillUnmount 使用,通过 return

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

特点

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

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

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 onClick={ onClick}>update n { n}</button>
            </div>
            <Child 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 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 onClick={ onClick}>update n { n}</button>
            </div>
            { }
            <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 onClick={ onClick}>update n { n}</button>
                <button onClick={ onClick1}>update m { m}</button>
            </div>
            { }
            { }
            { }
            <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>
            { }
        </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} />;
})

自定义 Hook
封装数据操作

// useList.js
import { useState, useEffect} from 'react'

const useList = () => { 
    const [list, setList] = useState(null)
    useEffect(() => { 
        ajax().then(list => { 
            setList(list)
        })
    }, []) //确保只在第一次运行
    return { 
        list,
        setList
    }
}
export default useList

function ajax(){ 
    return new Promise((resolve, reject) => { 
        setTimeout(() => { 
            resolve([
                { id: 1, name: 'Frank'},
                { id: 2, name: 'Jack'},
                { id: 3, name: 'Alice'},
                { id: 4, name: 'Bob'},
                { id: 5, name: 'Han'}
            ])
        }, 1000)
    })
}

//index.js
import useList from './hooks/useList'

function App(){ 
    const { list, setList} = useList()
    return (
        <div>
            <h1>List</h1>
            { 
                list ? (
                    <ol>
                        { 
                            list.map(item => { 
                                return <li key={ item.id}>{ item.name}</li>
                            })
                        }
                    </ol>
                ):(
                    '加载中...'
                )
            }
        </div>
    )
}


再比如下面这个

// useList.js
import { useState, useEffect} from 'react'

const useList = () => { 
    const [list, setList] = useState(null)
    useEffect(() => { 
        ajax().then(list => { 
            setList(list)
        })
    }, []) //确保只在第一次运行
    return { 
        list,
        addItem: name => { 
            setList([...list, { id: Math.random(), name}])
        },
        deleteIndex: index => { 
            setList(list.slice(0, index).concat(list.slice(index + 1)))
        }
    }
}
export default useList

function ajax(){ 
    return new Promise((resolve, reject) => { 
        setTimeout(() => { 
            resolve([
                { id: 1, name: 'Frank'},
                { id: 2, name: 'Jack'},
                { id: 3, name: 'Alice'},
                { id: 4, name: 'Bob'},
                { id: 5, name: 'Han'}
            ])
        }, 1000)
    })
}

//index.js
import useList from './hooks/useList'

function App() { 
    const { list, deleteIndex} = useList()
    return (
        <div>
            <h1>List</h1>
            { 
                list ? (
                    <ol>
                        { 
                            list.map((item,index) => { 
                                return (
                                    <li key={ item.id}>
                                        { item.name}
                                        <button
                                            onClick={ () => { 
                                                deleteIndex(index);
                                            }}
                                        >
                                            x
                                        </button>
                                    </li>
                                )
                            })
                        }
                    </ol>
                ) : (
                    '加载中...'
                )
            }
        </div>
    )
}

你还可以在自定义 Hook 里使用 Context
useState 只说了不能在 if 里,没说不能在函数里运行,只要这个函数在函数组件里运行即可
自定义 Hook 完全可以代替 Redux

  前端的学习不是一蹴而就,不积跬步无以至千里,不积小流无以成江海。持续不断的努力才能让你我有所收获,专业的知识还得到机构去学习,培训机构的设立有其存在的必然性,你钱花对了吗?


推荐阅读:
5分钟学会 vue 路由守卫
10分钟搞懂 vuex
vue 组件设计原则
Tree Shaking 概念详解
深入解读 vue 修饰符 sync
月入过万的都看它

 
打赏
 本文转载自:网络 
所有权利归属于原作者,如文章来源标示错误或侵犯了您的权利请联系微信13520258486
更多>最近资讯中心
更多>最新资讯中心
0相关评论

推荐图文
推荐资讯中心
点击排行
最新信息
新手指南
采购商服务
供应商服务
交易安全
关注我们
手机网站:
新浪微博:
微信关注:

13520258486

周一至周五 9:00-18:00
(其他时间联系在线客服)

24小时在线客服