React Hooks 是 React 16.8 版本中新增的特性,允许我们在不编写 class 的情况下使用 state 和其他的 React 特性。Hooks 是一种可以让你在函数组件中“钩入” React 特性的函数。以下是一些常用的 React Hooks,并附有详细的用法和代码示例。
1. useState
useState 是一个 Hook 函数,让我们在 React 函数组件中添加局部 state,而不必将它们修改为 class 组件。
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
在这里,useState 是一个函数,它接收初始 state 作为参数,返回一个数组,其中第一个元素是当前的 state,第二个元素是一个更新 state 的函数。
2. useEffect
useEffect Hook 可以让你在函数组件中执行副作用操作。数据获取、订阅或者手动修改 DOM 都属于副作用。
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}
在这个示例中,我们在组件渲染后设置了 document 的 title。我们传递给 useEffect 的函数会在每次渲染后都执行。如果你熟悉 React class 的生命周期函数,你可以把 useEffect Hook 看做 componentDidMount,componentDidUpdate 和 componentWillUnmount 这三个函数的组合。
3. useContext
useContext Hook使你可以订阅 React 的 Context 而不必明确的在组件树中间传递 props。
import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');
function ThemedButton() {
const theme = useContext(ThemeContext);
return <button theme={theme}>I am styled by theme context!</button>;
}
在这个示例中,我们使用 useContext Hook 订阅了 ThemeContext,并将其值赋给 theme 变量。当 ThemeContext 更新时,组件会重新渲染,并使用最新的 context 值。
4. useReducer
useReducer 是另一个可以在函数组件中保存 state 的 Hook,但它更适用于有复杂 state 逻辑的组件,它接受一个 reducer 函数和初始 state 作为参数,返回当前的 state 以及与其配套的 dispatch 方法。
import React, { useReducer } from 'react';
const initialState = {count: 0};
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, initialState);
return (
<>
Count: {state.count}
<button onClick={() => dispatch({type: 'increment'})}>+1</button>
<button onClick={() => dispatch({type: 'decrement'})}>-1</button>
</>
);
}
在这个示例中,我们使用 useReducer 来处理 state 的更新逻辑。我们传递给 useReducer 的 reducer 函数会在每次 dispatch 时被调用。
5. useCallback
useCallback 返回一个记忆化版本的回调函数,它仅在依赖项改变时才会更新。当你将回调传递给被优化的子组件时,它可以防止因为父组件渲染而无谓的渲染子组件。
import React, { useState, useCallback } from "react";
function App() {
const [count, setCount] = useState(0);
const increment = useCallback(() => {
setCount(count + 1);
}, [count]);
return (
<div>
Count: {count}
<Button onClick={increment}>Increment</Button>
</div>
);
}
function Button({ onClick, children }) {
console.log("Button re-rendered");
return (
<button onClick={onClick}>
{children}
</button>
);
}
在这个示例中,我们通过 useCallback 创建了一个只有当 count 改变时才会更新的 increment 函数。这样,只有当 increment 函数改变时,Button 组件才会重新渲染。
6. useMemo
useMemo 返回一个记忆化的值。它仅在某个依赖项改变时才重新计算 memoized 值。这用于优化性能,避免在每次渲染时都进行高开销的计算。
import React, { useMemo } from "react";
function MyComponent({ list }) {
const processedData = useMemo(() => {
return processData(list);
}, [list]);
return <OtherComponent data={processedData} />;
}
在这个示例中,我们只有当 list 改变时,才使用 processData 函数重新计算 processedData。这样可以避免在每次渲染 MyComponent 时都进行数据处理,从而优化性能。
总结起来,Hooks 提供了一种更直接的 API 来使用React 的各种特性,如:state,context,reducers 和生命周期。这使得你在没有写 class 的情况下可以直接在你的函数组件中使用这些特性。
总的来说,Hooks 是一种强大的工具,它使我们能够在函数组件中使用 React 的各种特性。同时,Hooks 还帮助我们更好地组织代码,使其更易于理解和维护,优化了应用程序的性能和响应速度。
以上就是 React Hooks 的一些重要属性的详细解析。
标签:count,return,函数,Hooks,React,state,详解,组件 From: https://blog.51cto.com/u_16171861/6957275