react18常用的hooks

react18引入的Hooks是一种新的react特性，它允许在无需编写类组建的情况下，使用状态和其他React特性。

一、useState:用于在函数组件中使用状态

import React, {useState} from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);
  const  increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  )
}

二、useEffect:用于在函数组件中执行副作用操作(如数据获取，订阅等)

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

const DataFetching = () => {
  const [data, setData] = useState(null);
  useEffect(()=> {
    fetchData();
  }, []);

  const fetchData = async()=> {
    const response = await fetch('https://api.example.com');
    const data = await response.json();
    setData(data);
  }
  return (
    <div>
      {data ? (
        <ul>
          {data.map((item)=>(
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      ) :(
        <p>Loading...</p>
      )}
    </div>
  )
}

三、useContext：用于在函数组件中访问上下文

import React, { useContext } from 'react';

const ThemeContext = React.createContext();
const ThemeProvider = ({ children}) => {
  const theme = 'dark';
  return <ThemeContext.Provider value={theme}>{children
    }</ThemeContext.Provider>
}

const ThemeButton = () => {
  const theme = useContext(ThemeContext);
  return <button style={{background: theme}}>Button</button>
}

const App = () => {
  return (
    <ThemeProvider>
      <ThemeButton/>
    </ThemeProvider>
  )
}

四，useReducer:用于在函数组件中使用Reducer状态管理

import React, { useReducer } from 'react';

const initialState = { count: 0};

const reducer = (state, action) => {
  switch(action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      return state;
  }
}

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  const increment = () => {
    dispatch({type: 'increment'});
  };

  const decrement = () => {
    dispatch({type: 'decrement'})
  };

  return(
    <div>
      <p>Count: {state.count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  )
}