react常用hook的实现示例

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // 初始值为0

  return (
    <button onClick={() => setCount(count + 1)}>
      点击次数：{count}
    </button>
  );
}

import { useEffect } from 'react';

function Timer() {
  useEffect(() => {
    const id = setInterval(() => {
      console.log('tick');
    }, 1000);

    return () => clearInterval(id); // 清理定时器
  }, []); // 仅在组件挂载时执行一次
}

useEffect(() => {
  console.log("Effect ran"); // 在开发模式下会打印两次
  
  return () => {
    console.log("Cleanup"); // 也会执行两次
  };
}, []);

import { useRef } from 'react';

function InputFocus() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus(); // 直接操作 DOM
  };

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>聚焦输入框</button>
    </>
  );
}

import { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

function ThemedButton() {
  const theme = useContext(ThemeContext); // 获取上下文值
  return <button className={theme}>主题按钮</button>;
}

import { useMemo } from 'react';

function ExpensiveComponent({ input }) {
  const result = useMemo(() => {
    return expensiveCalculation(input);
  }, [input]);

  return <div>{result}</div>;
}

import { useCallback } from 'react';

function Parent() {
  const handleClick = useCallback(() => {
    console.log('Clicked');
  }, []);

  return <Child onClick={handleClick} />;
}

import { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <button onClick={() => dispatch({ type: 'increment' })}>
      {state.count}
    </button>
  );
}