import React, { useState } from 'react';

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

  return (
    <div>
      <p>當(dāng)前計(jì)數(shù): {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function 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() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count}</p>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </div>
  );
}

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

const useFetchData = (url, params) => {
  const [data, setData] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get(url, { params });
        setData(response.data);
      } catch (err) {
        setError(err.message);
      } finally {
        setIsLoading(false);
      }
    };

    fetchData();
  }, [url, params]); // 依賴項(xiàng)包括 URL 和參數(shù)，以便在它們變化時(shí)重新獲取數(shù)據(jù)

  return { data, isLoading, error };
};

export default useFetchData;

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState((prevState) => ({ count: prevState.count + 1 }));
  };

  render() {
    return (
      <div>
        <p>當(dāng)前計(jì)數(shù): {this.state.count}</p>
        <button onClick={this.increment}>
          Click me
        </button>
      </div>
    );
  }
}

import React, { useState, createContext } from 'react';
const MyContext = createContext();

function App() {
    const [globalState, setGlobalState] = useState({ count: 0 });

    return (
        <MyContext.Provider value={{ globalState, setGlobalState }}>
            <ComponentA />
            <ComponentB />
        </MyContext.Provider>
    );
}

import React, { useContext } from 'react';
import MyContext from './MyContext';

function ComponentA() {
    const { globalState, setGlobalState } = useContext(MyContext);

    const increment = () => {
        setGlobalState(prevState => ({...prevState, count: prevState.count + 1 }));
    };

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

import { create } from 'zustand';

const useStore = create((set) => ({
  count: 0, // 初始狀態(tài)
  increment: () => set((state) => ({ count: state.count + 1 })), // 增加count的函數(shù)
  decrement: () => set((state) => ({ count: state.count - 1 })), // 減少count的函數(shù)
}));

import React from 'react';
import { useStore } from './store';

function Counter() {
  const { count, increment, decrement } = useStore();
  
  return (
    <div>
      <p>Count: {count}</p>
      <button notallow={increment}>Increment</button>
      <button notallow={decrement}>Decrement</button>
    </div>
  );
}

// store.js
import { create } from 'zustand';
 
const useStore = create((set) => ({
  count: 0,
  name: 'Zustand Store',
  increment: () => set((state) => ({ count: state.count + 1 })),
  setName: (newName) => set({ name: newName }),
}));
 
export default useStore;

// MyComponent.js
import React from 'react';
import useStore from './store';

function MyComponent() {
  const { count } = useStore((state) => ({ count: state.count }));

  return (
    <div>
      <p>Count: {count}</p>
    </div>
  );
}

export default MyComponent;

import { atom } from 'jotai';

export const countAtom = atom(0);

import { atom } from 'jotai';
import { countAtom } from './atoms';

export const doubleCountAtom = atom((get) => get(countAtom) * 2);

import React from 'react';
import { useAtom } from 'jotai';
import { countAtom } from './atoms';

const Counter = () => {
  const [count, setCount] = useAtom(countAtom);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount((prev) => prev + 1)}>Increment</button>
      <button onClick={() => setCount((prev) => prev - 1)}>Decrement</button>
    </div>
  );
};

export default Counter;

import React from 'react';
import { useAtomValue } from 'jotai';
import { doubleCountAtom } from './derivedAtoms';

const DoubleCounter = () => {
  const doubleCount = useAtomValue(doubleCountAtom);

  return <p>Double Count: {doubleCount}</p>;
};

export default DoubleCounter;

import React from 'react';
import { useAtomValue } from 'jotai';
import { countAtom } from './derivedAtoms';

const IncrementButtonComponent = () => {
    const setCount = useSetAtom(countAtom);
    return (
        <button onClick={() => setCount((prevCount) => prevCount + 1)}>Increment</button>
    );
};

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

function APP() {
  // data保存服務(wù)器返回的數(shù)據(jù)，loading表示是否正在加載，error保存可能發(fā)生的錯(cuò)誤信息。
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  const fetchData = async () => {
    try {
      const response = await fetch('https://api.example.com/data');
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      const result = await response.json();
      setData(result); // 更新數(shù)據(jù)狀態(tài)
    } catch (err) {
      setError(err.message); // 設(shè)置錯(cuò)誤信息
    } finally {
      setLoading(false); // 請(qǐng)求完成后關(guān)閉加載狀態(tài)
    }
  }

  useEffect(() => {
    fetchData();
  }, []);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error}</p>;

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

export default DataFetcher;

import { useRequest } from 'ahooks';
import React from 'react';
import Mock from 'mockjs';

function getUsername(): Promise<string> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(Mock.mock('@name'));
    }, 1000);
  });
}

export default () => {
  const { data, loading, run, cancel } = useRequest(getUsername, {
    pollingInterval: 1000,
    pollingWhenHidden: false,
  });

  return (
    <>
      <p>Username: {loading ? 'loading' : data}</p>
      <button type="button" onClick={run}>
        start
      </button>
      <button type="button" onClick={cancel} style={{ marginLeft: 8 }}>
        stop
      </button>
    </>
  );
};

import {
  useQuery,
  useMutation,
  useQueryClient,
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query'
import { getTodos, postTodo } from '../my-api'

const queryClient = new QueryClient()

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Todos />
    </QueryClientProvider>
  )
}

function Todos() {
  const queryClient = useQueryClient()

  const query = useQuery({ queryKey: ['todos'], queryFn: getTodos })

  const mutation = useMutation({
    mutationFn: postTodo,
    onSuccess: () => {
      queryClient.invalidateQueries({ queryKey: ['todos'] })
    },
  })

  return (
    <div>
      <ul>{query.data?.map((todo) => <li key={todo.id}>{todo.title}</li>)}</ul>

      <button
        onClick={() => {
          mutation.mutate({
            id: Date.now(),
            title: 'Do Laundry',
          })
        }}
      >
        Add Todo
      </button>
    </div>
  )
}

render(<App />, document.getElementById('root'))

import React, { useState } from 'react';
import useSWR from 'swr';
import axios from 'axios';

// 自定義的 fetcher 函數(shù)，使用 axios
const fetcher = (url) => axios.get(url).then((res) => res.data);

// 自定義的 SWR 配置選項(xiàng)
const swrConfig = {
    // 重試次數(shù)
    retry: 3,
    // 緩存時(shí)間（毫秒）
    revalidateOnFocus: false,
    shouldRetryOnError: false,
};

function BlogPosts() {
    const [page, setPage] = useState(1);
    const perPage = 10;

    // 構(gòu)建 API URL，包含分頁參數(shù)
    const apiUrl = `https://api.example.com/posts?page=${page}&perPage=${perPage}`;

    // 使用 SWR 獲取文章數(shù)據(jù)
    const { data: posts, error, isValidating } = useSWR(apiUrl, fetcher, swrConfig);

    // 數(shù)據(jù)轉(zhuǎn)換：按日期排序
    const sortedPosts = posts?.sort((a, b) => new Date(b.date) - new Date(a.date)) || [];

    if (error) return <div>加載出錯(cuò): {error.message}</div>;
    if (!posts) return <div>正在加載... {isValidating && '重新驗(yàn)證...'}</div>;

    return (
        <div>
            <h1>博客文章</h1>
            <ul>
                {sortedPosts.map((post) => (
                    <li key={post.id}>
                        <h2>{post.title}</h2>
                        <p>{post.content}</p>
                        <small>發(fā)布于: {new Date(post.date).toLocaleDateString()}</small>
                    </li>
                ))}
            </ul>
            <button onClick={() => setPage(page - 1)} disabled={page === 1}>
                上一頁
            </button>
            <button onClick={() => setPage(page + 1)}>
                下一頁
            </button>
        </div>
    );
}

export default BlogPosts;

// 定義路由
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import UserDetail from './UserDetail';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/users/:userId" element={<UserDetail />} />
      </Routes>
    </Router>
  );
}

export default App;

// 路由跳轉(zhuǎn)
<Link to="/users/123">用戶中心</Link>

// 使用參數(shù)
import { useParams } from 'react-router-dom';

function UserDetail() {
  const { userId } = useParams();

  return (
    <div>
      <h1>User Detail</h1>
      <p>User ID: {userId}</p>
    </div>
  );
}

export default UserDetail;

// 定義路由
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import SearchResults from './SearchResults';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/search" element={<SearchResults />} />
      </Routes>
    </Router>
  );
}

export default App;

// 路由跳轉(zhuǎn)
<Link to="/search?keyword=phone">搜索</Link>

// 使用參數(shù)
import { useLocation } from 'react-router-dom';

function SearchResults() {
  const location = useLocation();
   const queryParams = new URLSearchParams(location.search);

  return (
    <div>
      <h1>搜索結(jié)果</h1>
      <p>關(guān)鍵詞: {queryParams.get('keyword') || 'None'}</p>
    </div>
  );
}

export default SearchResults;

// 源頁面?zhèn)鬟f狀態(tài)
import { useNavigate } from 'react-router-dom';

function ProductList() {
  const navigate = useNavigate();

  const handleAddToCart = (productId) => {
    navigate('/cart', {
      state: { productId }
    });
  };

  return (
    <div>
      <h1>商品列表</h1>
      <button onClick={() => handleAddToCart('123')}>添加到購物車</button>
    </div>
  );
}

export default ProductList;

// 新頁面使用狀態(tài)
import { useLocation } from 'react-router-dom';

function Cart() {
  const location = useLocation();
  const { state } = location;

  return (
    <div>
      <h1>購物車</h1>
      {state ? (
        <p>商品ID: {state.productId}</p>
      ) : (
        <p>購物車為空</p>
      )}
    </div>
  );
}

export default Cart;

// 定義路由
import { createRouter } from '@tanstack/react-router';

const router = createRouter({
  routes: [
    {
      path: '/products/:id',
      element: () => import('./pages/ProductDetail'),
    },
  ],
});

export default router;

// 獲取路徑參數(shù)
import React from 'react';
import { useParams } from '@tanstack/react-router';

function ProductDetail() {
  const params = useParams();

  return <div>{params.id}</div>;
}

export default ProductDetail;

// 路由跳轉(zhuǎn)
import { Link } from '@tanstack/react-router';

function SearchLink() {
  return (
    <Link to="/search?q=laptop&sort=price_asc">搜索</Link>
  );
}

// 獲取查詢參數(shù)
import React from 'react';
import { useSearchParams } from '@tanstack/react-router';

function SearchResults() {
  const [searchParams] = useSearchParams();
  const query = searchParams.get('q') || '';
  const sort = searchParams.get('sort') || 'desc';

  return (
    <div>
      <p>搜索: {query}, 分類: {sort}</p>
    </div>
  );
}

export default SearchResults;

// 傳遞狀態(tài)
import { useRouter } from '@tanstack/react-router';

function SubmitFormButton() {
  const router = useRouter();

  function handleSubmit() {
    const formData = {
      name: 'John Doe',
      email: 'john.doe@example.com',
    };

    // Navigate to the next page and pass state
    router.navigate('/confirmation', { state: formData });
  }

  return <button onClick={handleSubmit}>Submit Form</button>;
}

// 獲取狀態(tài)
import React from 'react';
import { useLocation } from '@tanstack/react-router';

function ConfirmationPage() {
  const location = useLocation();
  const { state } = location;
  const { name, email } = state || {};

  return (
    <div>
      <p>Name: {name}</p>
      <p>Email: {email}</p>
    </div>
  );
}

export default ConfirmationPage;

import React, { useState } from 'react';

function LoginForm() {
  const [formData, setFormData] = useState({
    username: '',
    password: ''
  });

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData(prevState => ({
      ...prevState,
      [name]: value
    }));
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('表單數(shù)據(jù)', formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>用戶名:</label>
        <input
          type="text"
          name="username"
          value={formData.username}
          onChange={handleChange}
        />
      </div>
      <div>
        <label>密碼:</label>
        <input
          type="password"
          name="password"
          value={formData.password}
          onChange={handleChange}
        />
      </div>
      <button type="submit">登錄</button>
    </form>
  );
}

export default LoginForm;

import React from 'react';
import { useForm } from 'react-hook-form';

function LoginForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <div>
        <label>用戶名:</label>
        <input
          {...register('username', { required: '用戶名是必填項(xiàng)' })}
        />
        {errors.username && <p>{errors.username.message}</p>}
      </div>
      <div>
        <label>密碼:</label>
        <input
          type="password"
          {...register('password', { required: '密碼是必填項(xiàng)' })}
        />
        {errors.password && <p>{errors.password.message}</p>}
      </div>
      <button type="submit">登錄</button>
    </form>
  );
}

export default LoginForm;

import React from 'react';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';

// 使用 Yup 定義驗(yàn)證模式
const validationSchema = Yup.object().shape({
  username: Yup.string()
    .required('用戶名是必填項(xiàng)'),
  password: Yup.string()
    .required('密碼是必填項(xiàng)')
});

function LoginForm() {
  return (
    <Formik
      initialValues={{ username: '', password: '' }} // 設(shè)置初始表單值
      validationSchema={validationSchema} // 定義驗(yàn)證規(guī)則
      onSubmit={(values, actions) => {
        console.log(values);
        // 可選地，在這里執(zhí)行異步操作，并在完成后調(diào)用 actions.setSubmitting(false)
        actions.setSubmitting(false);
      }}
    >
      {({ isSubmitting }) => ( // 獲取提交狀態(tài)
        <Form>
          <div>
            <label>用戶名:</label>
            <Field name="username" type="text" /> {/* 創(chuàng)建用戶名輸入框 */}
            <ErrorMessage name="username" component="div" /> {/* 顯示用戶名的錯(cuò)誤信息 */}
          </div>
          <div>
            <label>密碼:</label>
            <Field name="password" type="password" /> {/* 創(chuàng)建密碼輸入框 */}
            <ErrorMessage name="password" component="div" /> {/* 顯示密碼的錯(cuò)誤信息 */}
          </div>
          <button type="submit" disabled={isSubmitting}> {/* 提交按鈕，當(dāng)提交中時(shí)禁用 */}
            登錄
          </button>
        </Form>
      )}
    </Formik>
  );
}

export default LoginForm;

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

function PersistentForm() {
  const [formData, setFormData] = useState(() => {
    // 初始化狀態(tài)時(shí)從 sessionStorage 中讀取數(shù)據(jù)
    return JSON.parse(sessionStorage.getItem('formData')) || {};
  });

  useEffect(() => {
    // 每次狀態(tài)變化時(shí)更新 sessionStorage
    sessionStorage.setItem('formData', JSON.stringify(formData));
  }, [formData]);

  const handleChange = (event) => {
    const { name, value } = event.target;
    setFormData((prevData) => ({
      ...prevData,
      [name]: value,
    }));
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('提交表單:', formData);
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>用戶名:</label>
        <input
          type="text"
          name="username"
          value={formData.username || ''}
          onChange={handleChange}
        />
      </div>
      <div>
        <label>密碼:</label>
        <input
          type="password"
          name="password"
          value={formData.password || ''}
          onChange={handleChange}
        />
      </div>
      <button type="submit">登錄</button>
    </form>
  );
}

export default PersistentForm;

import create from 'zustand'
import { persist } from '@zustand/middleware'
import { localStoragePersist } from 'zustand/persist'

const persistConfig = {
  key: 'myStore', // 存儲(chǔ)在 localStorage 中的鍵名
  storage: localStoragePersist, // 使用 localStorage 作為存儲(chǔ)介質(zhì)
}

const createStore = () =>
  create(
    persist(
      (set, get) => ({
        count: 0,
        increment: () => set(state => ({ count: state.count + 1 })),
        decrement: () => set(state => ({ count: state.count - 1 })),
      })),
      persistConfig
    )

export const useStore = createStore

import React from 'react'
import { useStore } from './store'

const App = () => {
  const { count, increment, decrement } = useStore()

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

export default App

import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; // 使用默認(rèn)的localStorage
import rootReducer from './reducers'; // 引入根reducer
 
// 配置redux-persist
const persistConfig = {
  key: 'root', // 保存數(shù)據(jù)時(shí)使用的鍵名
  storage, // 存儲(chǔ)機(jī)制
};
 
// 創(chuàng)建持久化后的reducer
const persistedReducer = persistReducer(persistConfig, rootReducer);
 
// 創(chuàng)建Redux Store
const store = createStore(persistedReducer);
 
// 創(chuàng)建persistor對(duì)象，用于在應(yīng)用中集成PersistGate
const persistor = persistStore(store);
 
export { store, persistor };

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { PersistGate } from 'redux-persist/integration/react';
import { store, persistor } from './store'; // 引入剛才設(shè)置的store和persistor
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <App />
    </PersistGate>
  </Provider>,
  document.getElementById('root')
);