React钩

React Hooks 是React 16.8版本引入的一个重要特性，它极大地改变了React组件的编写方式，使得状态管理和副作用处理变得更加简洁、高效。React Hooks允许在不编写类组件的情况下使用state和其他React特性，如生命周期方法。 1. useState useState是React中最基础的Hook，用于在函数组件中添加状态管理。它接受一个初始值，并返回一对值：状态变量和更新该状态的函数。例如： ```jsx import React, { useState } from 'react'; function Example() { 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是React中的副作用处理Hook，用于执行副作用操作，如数据获取、订阅、手动更改DOM等。它接受两个参数：一个执行副作用的函数和一个依赖数组。当依赖项改变时，useEffect会重新运行。 ```jsx import React, { useState, useEffect } from 'react'; function Example() { const [data, setData] = useState(null); const [loading, setLoading] = useState(true); useEffect(() => { async function fetchData() { const response = await fetch('https://api.example.com'); const json = await response.json(); setData(json); setLoading(false); } fetchData(); }, []); if (loading) return <p>Loading...</p>; return <div>Data: {data}</div>; } ``` 3. useContext useContext接受一个context对象（React.createContext的返回值），并返回当前组件所在的树中最近的Provider组件的值。这样可以避免多层组件间的props传递。 ```jsx import React, { createContext, useContext, useState } from 'react'; const ThemeContext = createContext(); function App() { const [theme, setTheme] = useState('light'); return ( <ThemeContext.Provider value={theme}> <Toolbar /> </ThemeContext.Provider> ); } function Toolbar() { const theme = useContext(ThemeContext); return ( <div> <h1>Theme: {theme}</h1> </div> ); } ``` 4. useReducer useReducer适用于更复杂的状态逻辑，类似于Redux的reducer。它接受一个reducer函数和一个初始状态，返回当前状态和dispatch函数。 ```jsx import React, { useReducer } from 'react'; const 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({ initialState }) { const [state, dispatch] = useReducer(reducer, initialState); return ( <div> Count: {state.count} <button onClick={() => dispatch({ type: 'increment' })}>+</button> <button onClick={() => dispatch({ type: 'decrement' })}>-</button> </div> ); } ``` 5. useMemo 和 useCallback useMemo用于记忆化计算结果，避免不必要的重新计算。它接受一个计算函数和依赖数组，只有当依赖项改变时，才会重新计算。 ```jsx import React, { useMemo } from 'react'; function ExpensiveComputation(props) { // Only recompute the expensive function when props.a changes const result = useMemo(() => computeExpensiveResult(props.a), [props.a]); return <div>{result}</div>; } ``` useCallback与useMemo类似，但用于记忆化函数，避免因组件重渲染而创建新的函数实例。 ```jsx import React, { useCallback } from 'react'; function ParentComponent({ children }) { const handleClick = useCallback(() => { console.log('Button clicked'); }, []); return <ChildComponent onClick={handleClick}>{children}</ChildComponent>; } ``` 这些React Hooks仅仅是React Hooks生态中的一部分，还有许多其他有用的Hooks，如useRef、useImperativeHandle、useLayoutEffect、useDebugValue等。React Hooks通过提供声明式编程的方式，让React组件更加模块化、可读性更强，同时降低了状态管理和副作用处理的复杂度。