React-Hooks

最新推荐文章于 2024-10-10 20:43:55 发布

2401_87029710

最新推荐文章于 2024-10-10 20:43:55 发布

阅读量1.1k

点赞数 14

文章标签： react.js 前端前端框架

本文链接：https://blog.csdn.net/2401_87029710/article/details/142073744

版权

return (

n: {n}

+2</ button>

useReducer

========================================================================

用来践行Flux/Redux思想

看代码，分四步走

一、创建初始值initialState

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

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

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

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

const initial = {n: 0};

const reducer = (state, action) => {

if (action.type === “add”) {

return {n: state.n + action. number};

} else if (action.type === “multi”) {

return {n: state.n * 2};

} else {

throw new Error(“unknown type”);

}

};

function App() {

const [state, dispatch] = useReducer(reducer,initial);

const {n} = state

const onClick = () => {

dispatch({type: “add”, number: 1});

};

const onClick2 = () => {

dispatch({type: “add”, number: 2});

};

return (

n: {n}

button onClick={ onClick}>+1

<button onClick={ onClick2}>+2

);

}

如何代替 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}>

</Context.Provider>

);

}

function User() {

const { state, dispatch } = useContext(Context);

useEffect(() => {

ajax(“/user”).then(user => {

dispatch({ type: “setUser”, user: user });

});

}, []);

return (

个人信息

name: {state.user ? state.user.name : ""}

);

}

function Books() {

const { state, dispatch } = useContext(Context);

useEffect(() => {

ajax(“/books”).then(books => {

dispatch({ type: “setBooks”, books: books });

});

}, []);

return (

我的书籍

{state.books ? state.books.map(book =>

{book.name}
) : “加载中”}

);

}

function Movies() {

const { state, dispatch } = useContext(Context);

useEffect(() => {

ajax(“/movies”).then(movies => {

dispatch({ type: “setMovies”, movies: movies });

});

}, []);

return (

我的电影
{state.movies
? state.movies.map(movie =>
- {movie.name}
- )
“加载中”}
);

}

const rootElement = document.getElementById(“root”);

ReactDOM.render(, 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©来使用上下文

import React, {createContext, useContext, useState} from ”react";

import ReactDOM from “react- dom” ;

const C = createContext ( defaultValue: null )

function App(){

const [n, setN] = useState( initialState: 0)

return (

<C.Provider value={{n, setN}}>

</C.Provider>

}

}

function Baba(){

const {n} = useContext©

return (

我是爸爸n: {n}

)

}

function Child(){

const {n, setN} = useContext©

const onClick = () = {

setN( i=>i+ 1)

}

return (

我是儿子我得到n: {n}

+1</ button>

)

}

useEffect

=======================================================================
- 副作用 (API 名字叫得不好)
对环境的改变即为副作用，如修改 document.title

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

实际上叫做 afterRender 更好，每次render后执行
- 用途
一、作为 componentDidMount 使用，[ ] 作第二个参数

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

三、作为 componentWillUnmount 使用，通过 return

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

/* 副作用:对环境的改变即为副作用 */

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

useEffect( effect;() => {

console. Log( '第一次渲染执行这句话 ')

},deps: [ ]) // []里面的变量变化时执行=>不会执行

//作为componentDidUpdate 使用，可指定依赖n

useEffect( effect: () => {

console. log( ’ n变化时执行这句话’ )

},deps: [n]) // n变化时执行

useEffect( effect: () => {

console. Log(‘任何一个state变化时都会执行’)

})

/组件消灭时return 一个函数，函数里面写componentWillUnmount 的操作/

//作为componentWillUnmount 使用，通过return

// useEffect(() => {

// const id = setInterval() => {

// console.log(‘hi’)

// },1000 )

//return () =>{

// setTimeout(() =>{

// window. clearInterval(id)

// },10000)

// }

//})

return (

n: {n}

+1

);
- 特点
如果同时存在多个 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 (

n: {n}

Click

);

}
- 特点
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 (

n: {n}

Click

);

}
- 经验
为了用户体验，优先使用 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 (

{/点击button会重新执行Child组件/}

update n {n}

{/* */}

);

}

function Child(props) {

console.log(“child 执行了”);

console.log(‘假设这里有大量代码’)

return

child: {props.data}
;

}

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 (

{/点击button会重新执行Child组件/}

update n {n}

);

}

const Child = React.memo(props => {

console.log(“child 执行了”);

console.log(‘假设这里有大量代码’)

return

child: {props.data}
;

});
- 但是
这玩意有一个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 (

{/点击button会重新执行Child组件/}

update n {n}

{/但是如果传了一个引用，则React.memo无效。因为引用是不相等的/}

);

}

//使用React.memo可以解决重新执行Child组件的问题

const Child = React.memo(props => {

console.log(“child 执行了”);

console.log(‘假设这里有大量代码’)

return

child: {props.data}
;

});

怎么办？用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 (

{/点击button会重新执行Child组件/}

update n {n}

update m {m}

{/但是如果传了一个引用，则React.memo无效。因为引用是不相等的/}

{//}

{/onClickChild1使用useMemo可以消除此bug/}

);

}

//使用React.memo可以解决重新执行Child组件的问题

const Child = React.memo(props => {

console.log(“child 执行了”);

console.log(‘假设这里有大量代码’)

return

child: {props.data}
;

});

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 (

按钮

{/* 控制台报错:

Warning: Function components cannot be given refs.

Attempts to access this ref will fail.

Did you mean to use React.forwardRef()?

*/}

)

}

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 (

按钮

)

}

const Button = forwardRef((props, ref) => {