react hooks~

// useState 是 React 提供的一个 Hook，用于管理组件的状态。它接收一个参数：initialState。
import React, { useState } from 'react';

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

  const handleClick = () => {
    setCount(count + 1);
  };

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


// useEffect 是 React 提供的一个 Hook，用于管理组件的副作用。它接收两个参数：effect 和 deps。
import React, { useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch('https://api.example.com/data');
      const jsonData = await response.json();
      setData(jsonData);
    };

    fetchData();
  }, []);

  return (
    <div>
      {data ? (
        <ul>
          {data.map((item) => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      ) : (
        <p>Loading data...</p>
      )}
    </div>
  );
}


// useContext 是 React 提供的一个 Hook，用于管理组件的上下文。它接收一个参数：context。
import React, { createContext, useContext } from 'react';

const MyContext = createContext();

function MyComponent() {
  return (
    <MyContext.Provider value={{ foo: 'bar' }}>
      <ChildComponent />
    </MyContext.Provider>
  );
}

function ChildComponent() {
  const { foo } = useContext(MyContext);

  return <p>{foo}</p>;
}



// useMemo 是 React 提供的一个 Hook，用于管理组件的记忆。它接收两个参数：factory 和 deps。
import React, { useState, useMemo } from 'react';

function ItemList({ items }) {
  const [selectedItems, setSelectedItems] = useState([]);

  const totalPrice = useMemo(() => {
    console.log('Calculating total price...');
    return selectedItems.reduce((total, item) => total + item.price, 0);
  }, [selectedItems]);

  const handleItemClick = (item) => {
    setSelectedItems((prevSelectedItems) => [...prevSelectedItems, item]);
  };

  return (
    <div>
      <ul>
        {items.map((item) => (
          <li key={item.id} onClick={() => handleItemClick(item)}>
            {item.name} - ${item.price}
          </li>
        ))}
      </ul>
      <p>Total price: ${totalPrice}</p>
    </div>
  );
}
const items = [
  { id: 1, name: 'Item 1', price: 10 },
  { id: 2, name: 'Item 2', price: 20 },
  { id: 3, name: 'Item 3', price: 30 },
];

function App() {
  return <ItemList items={items} />;
}


// useCallback 是 React 提供的一个 Hook，用于管理组件的回调。它接收两个参数：callback 和 deps。

import React, { useState, useMemo, useCallback } from 'react';

function ItemList({ items }) {
  const [selectedItems, setSelectedItems] = useState([]);

  const totalPrice = useMemo(() => {
    console.log('Calculating total price...');
    return selectedItems.reduce((total, item) => total + item.price, 0);
  }, [selectedItems]);

  const handleItemClick = (item) => {
    setSelectedItems((prevSelectedItems) => [...prevSelectedItems, item]);
  };

  const handleItemDelete = useCallback((item) => {
    setSelectedItems((prevSelectedItems) =>
      prevSelectedItems.filter((selectedItem) => selectedItem.id !== item.id)
    );
  }, [selectedItems]);

  return (
    <div>
      <ul>
        {items.map((item) => (
          <li key={item.id} onClick={() => handleItemClick(item)}>
            {item.name} - ${item.price}
            <button onClick={() => handleItemDelete(item)}>Delete</button>
          </li>
        ))}
      </ul>
      <p>Total price: ${totalPrice}</p>
    </div>
  );
}

const items = [
  { id: 1, name: 'Item 1', price: 10 },
  { id: 2, name: 'Item 2', price: 20 },
  { id: 3, name: 'Item 3', price: 30 },
];

function App() {
  return <ItemList items={items} />;
}


// useRef 是 React 提供的一个 Hook，用于管理组件的引用。它接收一个参数：initialValue。
import React, { useRef } from 'react';

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

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus</button>
    </div>
  );
}