网站模糊效果,网站建设市场调研,怎么举报平台,菜单设计制作网站Hooks 是 React 16.8 中引入的一种新特性#xff0c;它使得函数组件可以使用 state 和其他 React 特性#xff0c;从而大大提高了函数组件的灵活性和功能性。下面分别总结React、React Router 、Redux中常用的Hooks。
常用Hooks速记
React Hooks
useState#xff1a;用于…Hooks 是 React 16.8 中引入的一种新特性它使得函数组件可以使用 state 和其他 React 特性从而大大提高了函数组件的灵活性和功能性。下面分别总结React、React Router 、Redux中常用的Hooks。
常用Hooks速记
React Hooks
useState用于在函数组件中添加状态。 useEffect用于在函数组件中执行副作用操作如发送 AJAX 请求、订阅事件等。 useContext用于在函数组件中消费上下文。 useReducer用于在函数组件中管理状态类似于 Redux 的 reducer。 useCallback用于在函数组件中返回一个 memoized 回调函数。 useMemo用于在函数组件中返回一个 memoized 值。 useRef用于在函数组件中创建一个可变的引用对象。 useImperativeHandle用于在函数组件中自定义暴露给父组件的实例值。 useLayoutEffect用于在函数组件中执行同步布局效果。 useDebugValue用于在 React 开发者工具中显示自定义 Hook 的标签。
React Router Hooks
useHistory用于在函数组件中访问 history 对象。 useLocation用于在函数组件中访问 location 对象。 useParams用于在函数组件中访问 match 对象中的参数。 useRouteMatch用于在函数组件中访问 match 对象。 useLinkClickHandler用于在函数组件中处理 Link 组件的点击事件。
Redux Hooks
useSelector用于从 Redux 存储中选择数据。 useDispatch用于在函数组件中派发 Redux 动作。 useStore用于在函数组件中获取 Redux 存储实例。 useActions用于在函数组件中批量导入 Redux 动作创建函数。 useShallowEqual用于在 useSelector 中进行浅层比较。 useDeepEqual用于在 useSelector 中进行深层比较。 useRedux用于在函数组件中获取 Redux 存储实例和派发函数。
以下是一些常用的 React、React Router 和 Redux Hooks 的示例代码
React Hooks
useState用于在函数组件中添加状态。
import React, { useState } from react;function Example() {const [count, setCount] useState(0);return (divpYou clicked {count} times/pbutton onClick{() setCount(count 1)}Click me/button/div);
}useEffect用于在函数组件中执行副作用操作如发送 AJAX 请求、订阅事件等。
import React, { useState, useEffect } from react;function Example() {const [data, setData] useState(null);useEffect(() {const fetchData async () {const response await fetch(https://api.example.com/data);const json await response.json();setData(json);};fetchData();}, []);return (divh1Data:/h1{data p{data.message}/p}/div);
}useContext用于在函数组件中消费上下文。
import React, { createContext, useContext } from react;const ThemeContext createContext(light);function ThemeButton() {const theme useContext(ThemeContext);return (button{theme light ? Switch to Dark : Switch to Light}/button);
}function App() {return (ThemeContext.Provider valuedarkThemeButton //ThemeContext.Provider);
}useReducer用于在函数组件中管理状态类似于 Redux 的 reducer。
import React, { useReducer } from react;function reducer(state, action) {switch (action.type) {case increment:return { count: state.count 1 };case decrement:return { count: state.count - 1 };default:throw new Error();}
}function Counter() {const [state, dispatch] useReducer(reducer, { count: 0 });return (Count: {state.count}button onClick{() dispatch({ type: decrement })}-/buttonbutton onClick{() dispatch({ type: increment })}/button/);
}useCallback用于在函数组件中返回一个 memoized 回调函数。
import React, { useState, useCallback } from react;function Example() {const [count, setCount] useState(0);const handleClick useCallback(() {setCount(count 1);}, [count]);return button onClick{handleClick}Click me/button;
}useMemo用于在函数组件中返回一个 memoized 值。
import React, { useMemo } from react;function Example({ a, b }) {const result useMemo(() {// 计算结果return a b;}, [a, b]);return div{result}/div;
}useRef用于在函数组件中创建一个可变的引用对象。
import React, { useRef } from react;function Example() {const inputRef useRef();const handleClick () {inputRef.current.focus();};return (input ref{inputRef} typetext /button onClick{handleClick}Focus input/button/);
}useImperativeHandle用于在函数组件中自定义暴露给父组件的实例值。
import React, { useRef, useImperativeHandle, forwardRef } from react;const FancyInput forwardRef((props, ref) {const inputRef useRef();useImperativeHandle(ref, () ({focus: () {inputRef.current.focus();},}));return input ref{inputRef} typetext /;
});function App() {const inputRef useRef();const handleClick () {inputRef.current.focus();};return (FancyInput ref{inputRef} /button onClick{handleClick}Focus input/button/);
}useLayoutEffect用于在函数组件中执行同步布局效果。
import React, { useLayoutEffect, useRef } from react;function Example() {const ref useRef();useLayoutEffect(() {// 同步布局效果console.log(ref.current.clientHeight);}, []);return div ref{ref}Hello World/div;
}useDebugValue用于在 React 开发者工具中显示自定义 Hook 的标签。
import React, { useMemo } from react;function useCustomHook(value) {const result useMemo(() {// 计算结果return value * 2;}, [value]);// 在 React 开发者工具中显示自定义 Hook 的标签React.useDebugValue(Result: ${result});return result;
}function Example({ value }) {const result useCustomHook(value);return div{result}/div;
}React Router Hooks
useHistory用于在函数组件中访问 history 对象。
import { useHistory } from react-router-dom;function Example() {const history useHistory();const handleClick () {history.push(/about);};return button onClick{handleClick}Go to About/button;
}useLocation用于在函数组件中访问 location 对象。
import { useLocation } from react-router-dom;function Example() {const location useLocation();return div{location.pathname}/div;
}useParams用于在函数组件中访问 match 对象中的参数。
import { useParams } from react-router-dom;function Example() {const { id } useParams();return divID: {id}/div;
}useRouteMatch用于在函数组件中访问 match 对象。
import { useRouteMatch } from react-router-dom;function Example() {const match useRouteMatch();return div{match.path}/div;
}useLinkClickHandler用于在函数组件中处理 Link 组件的点击事件。
import { useHistory, useLinkClickHandler } from react-router-dom;function Example() {const history useHistory();const handleClick useLinkClickHandler(/about);return (button typebutton onClick{(event) {handleClick(event, history);}}Go to About/button);
}Redux Hooks
useSelector用于从 Redux 存储中选择数据。
import { useSelector } from react-redux;function Example() {const count useSelector(state state.count);return div{count}/div;
}useDispatch用于在函数组件中派发 Redux 动作。
import { useDispatch } from react-redux;function Example() {const dispatch useDispatch();const handleClick () {dispatch({ type: increment });};return button onClick{handleClick}Increment/button;
}useStore用于在函数组件中获取 Redux 存储实例。
import { useStore } from react-redux;function Example() {const store useStore();return div{store.getState().count}/div;
}useActions用于在函数组件中批量导入 Redux 动作创建函数。
import { useActions } from react-redux-actions;function Example() {const { increment, decrement } useActions({increment: () ({ type: increment }),decrement: () ({ type: decrement }),});return (button onClick{increment}Increment/buttonbutton onClick{decrement}Decrement/button/);
}useShallowEqual用于在 useSelector 中进行浅层比较。
import { useSelector, shallowEqual } from react-redux;function Example() {const { count, name } useSelector(state ({count: state.count,name: state.name,}),shallowEqual);return (divCount: {count}br /Name: {name}/div);
}useDeepEqual用于在 useSelector 中进行深层比较。
import { useSelector, deepEqual } from react-redux;function Example() {const { count, list } useSelector(state ({count: state.count,list: state.list,}),deepEqual);return (divCount: {count}br /List: {list.join(, )}/div);
}useRedux用于在函数组件中获取 Redux 存储实例和派发函数。
import { useRedux } from react-redux;function Example() {const [store, dispatch] useRedux();const handleClick () {dispatch({ type: increment });};return (divCount: {store.getState().count}br /button onClick{handleClick}Increment/button/div);
}这些 Hooks 可以帮助您更方便地在 React、React Router 和 Redux 中管理状态和处理逻辑。根据实际需求选择合适的 Hooks 可以提高代码的可读性和可维护性。
