React résume

React:

1. utilisé node JS
2. pour créer le projet, utiliser Nextjs ou Vite
3. Pour lancer le projet, npm run dev
4. Hooks:
   1. 规则
      1. 使用use开头 useXxxx
      2. 只能在两个地方调用hook，组件内，其他hook内
      3. 保持顺序一致，不可放到if，for等逻辑语句内
      4. 闭包陷阱
   2. gestion stats:
      1. useState:
         1. example:function Counter() {
            const [count, setCount] = useState(0);useEffect(() => {
            document.title = `Count: ${count}`;
            }, [count]);return (
            <div>
            <p>Count: {count}</p>
            <button onClick={() => setCount(count + 1)}>Increase</button>
            </div>
            );
            }
      2. useEffect: （在开发环境会执行两次，在生产环境执行一次）
         1. useEffect(() => {
            // ✅ 这里是副作用逻辑，创建时候执行
            return () => {
            // 🔁 可选：清理函数（组件卸载或依赖更新前执行）
            };
            }, [依赖项(就是更新哪个参数时候运行）]);
      3. immer：
         1. example:
            1. import { useState } from ‘react’;
               import { produce } from ‘immer’;function App() {
               const [user, setUser] = useState({ name: ‘Tom’, age: 20 });const updateAge = () => {
               setUser(produce(draft => {
               draft.age += 1;
               }));
               };

               return (
               <div>
               <p>{user.name} – {user.age}</p>
               <button onClick={updateAge}>增加年龄</button>
               </div>
               );
               }

      4. useMemo (在计算量大的时候使用）
         1. import { useMemo } from ‘react’;function ExpensiveComponent({ number }) {
            const squared = useMemo(() => {
            console.log(‘计算 square…’);
            return number * number;
            }, [number]);return <div>平方值: {squared}</div>;
            }
      5. useCallback，在依赖项变动时候运行
         1. const memoizedFn = useCallback(() => {
            // 你的函数逻辑
            }, [依赖项]);
      6. 自定义hook，避免重复使用代码
         1. function useMyHook() {
            const [value, setValue] = useState(0);
            useEffect(() => {
            console.log(« value 改变了 »);
            }, [value]);
            return [value, setValue];
            }
         2. function useTitle(title: string) {
            useEffect(() => {
            document.title = title
            }, [])
            }
      7. 第三方hooks
5. classNames:
   1. 样式名字要用驼峰写法
   2. 使用classname插件
      1. example
      2. import classNames from ‘classnames’;const MyComponent = ({ isActive, isDisabled }) => {
         const btnClass = classNames(‘btn’, {
         ‘btn-active’: isActive,
         ‘btn-disabled’: isDisabled,
         });return <button className={btnClass}>Click Me</button>;
         };
      3. css module
6. Router
   1. // App.js
      import { BrowserRouter, Routes, Route } from ‘react-router-dom’;
      import Home from ‘./pages/Home’;
      import About from ‘./pages/About’;function App() {
      return (
      <BrowserRouter>
      <Routes>
      <Route path= »/ » element={<Home />} />
      <Route path= »/about » element={<About />} />
      </Routes>
      </BrowserRouter>
      );
      }export default App;
   2. tailwind css
7. UI 组件
   1. Material UI
   2. Tailwind CSS
   3. Ant Design
8. 表单组件：
9. 后端服务
   1. 搭建Mock服务
      1. ajax: axios
      2. mockjs, 只能劫持xmlhttprequest，不能劫持fetch，而且上线前要注销
         1. 劫持服务器
         2. random
      3. craco, 用webback配置陆游