陕西建设厅八大员官方网站,房地产网站建设分析,企业网站排名要怎么做,企业网站维护的要求包括React 基础巩固(四十四)——其他Hooks#xff08;useContext、useReducer、useCallback#xff09;
一、useContext的使用
在类组件开发时#xff0c;我们通过 类名.contextType MyContext的方式#xff0c;在类中获取context#xff0c;多个Context或者在函数式组件中…React 基础巩固(四十四)——其他HooksuseContext、useReducer、useCallback
一、useContext的使用
在类组件开发时我们通过 类名.contextType MyContext的方式在类中获取context多个Context或者在函数式组件中通过MyContext.Consumer方式共享context
import React, { memo } from react
import { UserContext, ThemeContext } from ./contextexport default memo(function App() {// 使用Contextreturn (divUserContext.Consumer{value {return (h2ThemeContext.Consumer{value {span/span}}/ThemeContext.Consumer/h2)}}/UserContext.Consumer/div)
})
可以看到当我们需要使用多个Context时存在大量繁琐的嵌套代码而Context Hook能够让我们通过Hook直接获取某个Context的值如下
import React, { memo, useContext } from react;
import { ThemeContext, UserContext } from ./context;export default memo(function App() {// 使用Contextconst user useContext(UserContext);const theme useContext(ThemeContext);return (divh2User: {user.name} - {user.age}/h2h2Theme: {theme.color} - {theme.size}/h2/div);
});
可以看到Context Hook仅用了两行代码就替代了上面繁杂的嵌套代码十分高效简洁。
二、useReducer的使用
useReducer是useState的一种替代方案当state的处理逻辑比较复杂可以使用useReducer来进行拆分或者当修改state时需要依赖之前的state时也可以使用useReducer。
useReducer使用的场景非常少通常用于需要统一管理、修改多个数据的场景。例如当我们需要对多个数据进行统一处理时若采用useState则需要多次定义而reducer可以对其进行统一定义、修改
import React, { memo, useReducer, useState } from react;function reducer(state, action) {switch (action.type) {case increment:return { ...state, counter: state.counter 1 };case decrement:return { ...state, counter: state.counter - 1 };case add_number:return { ...state, counter: state.counter action.num };case sub_number:return { ...state, counter: state.counter - action.num };default:return state;}
}export default memo(function App() {// const [count, setCount] useState(0);// const [user, setUser] useState(0);// const [list, setList] useState(0);const [state, dispatch] useReducer(reducer, {counter: 0,user: {},list: [],});return (div{/* h2当前计数{count}/h2button onClick{(e) setCount(count 1)}1/buttonbutton onClick{(e) setCount(count - 1)}-1/buttonbutton onClick{(e) setCount(count 5)}5/buttonbutton onClick{(e) setCount(count - 5)}-5/buttonbutton onClick{(e) setCount(count 100)}100/button */}h2当前计数{state.counter}/h2button onClick{(e) dispatch({ type: increment })}1/buttonbutton onClick{(e) dispatch({ type: decrement })}-1/buttonbutton onClick{(e) dispatch({ type: add_number, num: 5 })}5/buttonbutton onClick{(e) dispatch({ type: sub_number, num: 5 })}-5/buttonbutton onClick{(e) dispatch({ type: add_number, num: 100 })}100/button/div);
});
三、useCallback的使用
useCallback实际的目的是为了进行性能优化useCallback会返回一个函数的memoized记忆的值。在依赖不变的情况下多次定义的时候返回的值时相同的。
useCallback的性能优化 当需要将一个函数传递给子组件时可使用useCallback进行优化将优化之后的函数传递给子组件 import React, { memo, useCallback, useState } from react;const HYIncrement memo(function (props) {const { increment } props;console.log(HYIncrement被渲染);return (divbutton onClick{increment}increment 1/button/div);
});export default memo(function App() {const [count, setCount] useState(0);const [message, setMessage] useState(hello);// 使用useCallbackconst increment useCallback(function () {setCount(count 1);},[count]);// 普通函数// const increment () {// setCount(count 1);// };return (divh2计数{count}/h2button onClick{increment}1/buttonHYIncrement increment{increment} /h2message{message}/h2button onClick{(e) setMessage(world)}修改 message/button/div);
}); 进一步优化 当count发生改变时也使用同一个函数 // 做法一将count依赖移除掉缺点存在闭包陷阱不依赖count后setCount每次拿到的count并非最新的count// const increment useCallback(function foo() {// console.log(increment);// setCount(count 1);// }, []);// 做法二利用useRef在组件多次渲染时返回同一个值const countRef useRef();countRef.current count;const increment useCallback(function foo() {console.log(increment);setCount(countRef.current 1);},[]);
