react常用的Hooks有哪些?

在React中，Hooks 是一种让你可以在函数组件中“钩入” React 特性的方式，例如状态和生命周期等。React 提供了一些内置的 Hooks，它们可以在函数组件中使用。下面是一些常用的 React Hooks 以及它们的简要代码示例：

1. useState

useState 是一个允许你在函数组件中添加状态的 Hook。

jsximport React, { useState } from 'react';

function Example() {
// 声明一个叫 "count" 的 state 变量
const [count, setCount] = useState(0);

return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

2. useEffect

useEffect 允许你在组件渲染到屏幕之后执行副作用操作。它类似于类组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 这些生命周期方法的组合。

jsximport React, { useState, useEffect } from 'react';

function Example() {
const [count, setCount] = useState(0);

// 类似于 componentDidMount 和 componentDidUpdate:
useEffect(() => {
// 使用浏览器的 API 更新文档标题
document.title = `You clicked ${count} times`;
});

return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}

3. useContext

useContext 让你能够订阅 React 的 Context 变更，并获取最新的值。

首先，你需要使用 React.createContext 创建一个 Context：

jsxconst MyContext = React.createContext(null);

然后，你可以使用 useContext 来订阅这个 Context：

jsxfunction MyComponent() {
const value = useContext(MyContext);
// 你可以基于 value 渲染某些输出
return <div>{value}</div>;
}

4. useReducer

useReducer 是 useState 的另一种形式，它更适用于包含多个子值或需要基于前一个状态进行复杂计算的情况。

jsximport React, { useReducer } from 'react';

function myReducer(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(myReducer, {count: 0});
return (
<>
Count: {state.count}
<button onClick={() => dispatch({type: 'increment'})}>
Increment
</button>
<button onClick={() => dispatch({type: 'decrement'})}>
Decrement
</button>
</>
);
}

5. useCallback

useCallback 返回一个记忆的回调函数版本，该回调函数仅在它的依赖项改变时才会更新。

jsximport React, { useState, useCallback } from 'react';

function ExpensiveComponent(props) {
/* 渲染逻辑 */
}

function ParentComponent() {
const [count, setCount] = useState(0);

// 只有在 count 变化时，才会重新创建这个函数
const memoizedCallback = useCallback(
() => console.log(`You clicked ${count} times`),
[count], // 只有当 count 改变时，这个 callback 才会更新
);

return (
<>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
<ExpensiveComponent onClick={memoizedCallback} />
</>
);
}

这只是 React 中一些最常用的 Hooks 的示例。React 的 Hooks 提供了强大的功能，可以让你在函数组件中编写更加灵活和可复用的代码。