{"id":21358126,"url":"https://github.com/daotin/react-in-one-day","last_synced_at":"2026-01-02T15:50:04.552Z","repository":{"id":263731075,"uuid":"890098752","full_name":"Daotin/react-in-one-day","owner":"Daotin","description":"一天学会react","archived":false,"fork":false,"pushed_at":"2024-11-20T07:31:40.000Z","size":22,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-22T18:32:46.674Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Daotin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-18T01:28:29.000Z","updated_at":"2024-11-20T07:31:44.000Z","dependencies_parsed_at":"2024-11-20T06:37:41.271Z","dependency_job_id":null,"html_url":"https://github.com/Daotin/react-in-one-day","commit_stats":null,"previous_names":["daotin/react-in-one-day"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Daotin%2Freact-in-one-day","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Daotin%2Freact-in-one-day/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Daotin%2Freact-in-one-day/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Daotin%2Freact-in-one-day/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Daotin","download_url":"https://codeload.github.com/Daotin/react-in-one-day/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243830956,"owners_count":20354856,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-22T05:14:31.060Z","updated_at":"2026-01-02T15:50:04.525Z","avatar_url":"https://github.com/Daotin.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-in-one-day\n\n## 一天学会 react\n\n快速学习路径：\n\n1、jsx 语法、useState 和 useEffect 了解下，基础用法和 Vue 对比着学： [https://component-party.dev/](https://component-party.dev/) 。\n\n2、然后敲个 todolist ，期间有什么不会的直接问 gpt\n\n搞完这些就可以说自己会 React 了。\n\nreact 文档：https://zh-hans.react.dev/learn\n\n---\n\n\u003e 下面的react状态管理库如何选择？Redux、Dva、React-Toolkit、MobX，zustand，以及 useContext 结合 useReducer 的管理方式\n\nRedux系列：Redux Toolkit \u003e Redux \u003e Dva\n\n推荐尽量选择现代化、社区活跃的库（如 Redux Toolkit 或 Zustand）\n\n最终，react技术栈选择：Vite + React + Ant Design + Zustand + TailwindCSS\n\n\nreact 项目模板：\n- slash-admin(1.8k): https://github.com/d3george/slash-admin (需要的依赖好多)\n- react-ts-template：https://github.com/huangmingfu/react-ts-template （依赖多，没有ant design，因为考虑到移动端，对应的就是antd mobile了）\n- react-app-template：https://github.com/Gzbox/react-app-template （没有Zustand）\n\n---\n\n## React 的不可变数据设计\n\nReact 的不可变数据设计是一种处理数据状态的哲学和模式，强调**不要直接修改原始数据，而是通过创建数据的副本来更新状态**。这种设计理念与 React 的高效更新机制密切相关，确保组件能够正确地重新渲染。\n\n- 对于引用数据类型，数据一旦创建，不能直接修改；需要通过生成新数据的方式来更新状态。\n- 对于基本数据类型，它们本身就不会被直接修改，而是被重新赋值。因此，对于基本数据类型，不需要像对象或数组那样进行拷贝操作，直接赋值即可。\n\n### 为什么 React 使用不可变数据设计？\n\n1. 提高性能\n\nReact 使用 虚拟 DOM 来高效更新 UI：\n\n- 每次状态更新，React 通过比较前后状态的引用来判断是否需要更新组件。\n- 如果状态的引用未改变，React 会跳过重新渲染，提高性能。\n- 使用不可变数据设计能确保每次更新时生成一个新的引用，从而触发正确的更新。\n\n2. 方便调试\n\n- 不可变数据设计使得状态变更变得更加明确。\n- 你可以在状态变更前后轻松比较数据，快速定位问题。\n- 例如，调试工具（如 Redux DevTools）依赖这种机制来记录和回溯状态。\n\n3. 数据安全性\n\n- 避免直接修改原始数据可能带来的副作用（如意外更改其他地方引用同一对象的数据）。\n- 确保状态变更在预期范围内。\n\n## useEffect\n\n`useEffect` 是 React 中的一个 Hook，用于在函数组件中执行副作用操作。副作用操作包括数据获取、订阅、手动更改 DOM 等。`useEffect` 接受两个参数：一个是副作用函数，另一个是依赖项数组。\n\n### 基本用法\n\n```javascript\nimport React, { useState, useEffect } from 'react';\n\nfunction MyComponent({ someProp }) {\n  const [count, setCount] = useState(0);\n\n  useEffect(() =\u003e {\n    console.log('副作用函数执行');\n\n    // 设置一个定时器\n    const interval = setInterval(() =\u003e {\n      setCount((prevCount) =\u003e prevCount + 1);\n    }, 1000);\n\n    // 返回清理函数\n    return () =\u003e {\n      console.log('清理函数执行');\n      clearInterval(interval); // 清理定时器\n    };\n  }, [someProp]); // 依赖项数组\n\n  return \u003cdiv\u003eCount: {count}\u003c/div\u003e;\n}\n\nexport default MyComponent;\n```\n\n- 如果`依赖项数组`为空，那么只会在`组件加载`的时候，执行`副作用函数`，然后在组件卸载的时候执行`清理函数`。\n- 如果`依赖项数组`不为空（比如为 someProp），那么当 someProp 发生变化时，`清理函数`会先执行，然后`副作用函数`会重新执行。最后当组件卸载时，`清理函数`又会执行。\n\n## 学习井字棋游戏的 2 点困惑\n\n1、React 的状态更新是异步的，即便是使用 setTimeout 获取的仍是旧的数据。在 vue 中可以使用 nextTick，在 react 中一般的的做法是什么？（不想使用 useEffct）\n\n2、在 vue 中，所有的状态都可以写在对顶层，然后全局可用，但是 react 中，所有的状态，函数都是要由顶层组件传递过去，非常麻烦。比如 Game 需要传递很多便利和函数给 Borad，是我代码设计不合理吗？\n\n在 React 中，如果你想在状态更新后立即获取最新值，有以下几种方法：\n\n- 使用 flushSync\n\n```js\nimport { flushSync } from 'react-dom';\n\nfunction handleClickSquare(i) {\n  flushSync(() =\u003e {\n    setSquareArray(newSquareArray);\n  });\n  // 这里可以立即获取到更新后的值\n  console.log(squareArray);\n}\n```\n\n- 使用状态更新的回调形式\n\n```js\nfunction handleClickSquare(i) {\n  setSquareArray(newSquareArray, () =\u003e {\n    // 在这里可以访问到最新的状态\n    if (newWinner) {\n      alert(`${newWinner} is winner!`);\n    }\n  });\n}\n```\n\n- 使用 useRef 跟踪最新值\n\n```js\nfunction Game() {\n  const [squareArray, setSquareArray] = React.useState([]);\n  const squareArrayRef = React.useRef(squareArray);\n\n  // 当 squareArray 更新时，更新 ref\n  React.useEffect(() =\u003e {\n    squareArrayRef.current = squareArray;\n  }, [squareArray]);\n\n  // 需要获取最新值时，使用 squareArrayRef.current\n}\n```\n\n2. 关于状态管理\n\n确实，React 的 props 传递可能会显得比较繁琐。对于这个问题，有以下几种解决方案：\n\n- 使用 Context API\n\n```js\n// 创建 Context\nconst GameContext = React.createContext();\n\nfunction Game() {\n  const [squareArray, setSquareArray] = React.useState([]);\n  const [nextStep, setNextStep] = React.useState('X');\n  // ... 其他状态\n\n  const contextValue = {\n    squareArray,\n    setSquareArray,\n    nextStep,\n    setNextStep,\n    // ... 其他状态和方法\n  };\n\n  return (\n    \u003cGameContext.Provider value={contextValue}\u003e\n      \u003cdiv\u003e\n        \u003cdiv\u003eNext step: {nextStep}\u003c/div\u003e\n        \u003cBoard /\u003e\n        \u003cHistory /\u003e\n      \u003c/div\u003e\n    \u003c/GameContext.Provider\u003e\n  );\n}\n\n// 在子组件中使用 Context\nfunction Board() {\n  const { squareArray, setSquareArray, nextStep } = React.useContext(GameContext);\n  // ... 组件逻辑\n}\n```\n\n- 使用状态管理库\n  对于较大的应用，可以使用 Redux、Zustand 或 Jotai 等状态管理库\n  这些库提供了更强大的全局状态管理能力\n\n- 重构组件结构\n\n```js\n// 将相关逻辑封装到自定义 Hook\nfunction useGame() {\n  const [squareArray, setSquareArray] = React.useState([]);\n  const [nextStep, setNextStep] = React.useState('X');\n\n  const handleMove = React.useCallback((i) =\u003e {\n    // 处理移动逻辑\n  }, []);\n\n  return {\n    squareArray,\n    nextStep,\n    handleMove,\n  };\n}\n\n// 在组件中使用\nfunction Game() {\n  const gameLogic = useGame();\n  return (\n    \u003cdiv\u003e\n      \u003cBoard {...gameLogic} /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## doubleCount 自动是响应式的吗？\n\n```js\nfunction Demo() {\n  const [count, setCount] = useState(10);\n  const doubleCount = count * 2; // 每次 count 改变时，这行代码都会重新执行\n  // ...\n}\n```\n\n是的，doubleCount 是自动响应式的！\n在 React 中，每当组件的状态（比如 count）发生变化时，组件会重新渲染，这时所有在组件函数体内的代码都会重新执行。\n\n### 在 react 组件中什么时候组件重新渲染？\n\n在 React 中，组件重新渲染的情况主要有以下几种：\n\n### 1. 状态（State）变化\n\n```javascript\nfunction Component() {\n  const [count, setCount] = useState(0);\n\n  // 调用 setCount 会触发重新渲染\n  const handleClick = () =\u003e setCount(count + 1);\n}\n```\n\n### 2. 属性（Props）变化\n\n```javascript\nfunction Child(props) {\n  // 当父组件传入的 props 变化时，Child 组件会重新渲染\n  return \u003cdiv\u003e{props.value}\u003c/div\u003e;\n}\n\nfunction Parent() {\n  const [value, setValue] = useState(0);\n  // value 改变会导致 Child 重新渲染\n  return \u003cChild value={value} /\u003e;\n}\n```\n\n### 3. 父组件重新渲染\n\n```javascript\nfunction Parent() {\n  const [count, setCount] = useState(0);\n\n  return (\n    \u003cdiv\u003e\n      \u003cChild /\u003e {/* Parent 重新渲染时，Child 也会重新渲染 */}\n    \u003c/div\u003e\n  );\n}\n```\n\n### 4. Context 值变化\n\n```javascript\nconst MyContext = React.createContext();\n\nfunction Child() {\n  const value = useContext(MyContext);\n  // Context 值变化时，使用该 Context 的组件会重新渲染\n  return \u003cdiv\u003e{value}\u003c/div\u003e;\n}\n```\n\n### 优化方案：\n\n1. **使用 memo 阻止不必要的重新渲染**\n\n```javascript\nconst Child = React.memo(function Child(props) {\n  // 只有当 props 真正变化时才重新渲染\n  return \u003cdiv\u003e{props.value}\u003c/div\u003e;\n});\n```\n\n2. **使用 useMemo 缓存计算值**\n\n```javascript\nfunction Component() {\n  const expensiveValue = useMemo(\n    () =\u003e {\n      // 复杂计算\n      return heavyComputation();\n    },\n    [\n      /* 依赖项 */\n    ]\n  );\n}\n```\n\n3. **使用 useCallback 缓存函数**\n\n```javascript\nfunction Parent() {\n  const handleClick = useCallback(\n    () =\u003e {\n      // 处理点击\n    },\n    [\n      /* 依赖项 */\n    ]\n  );\n\n  return \u003cChild onClick={handleClick} /\u003e;\n}\n```\n\n4. **合理拆分组件和状态**\n\n```javascript\nfunction Parent() {\n  return (\n    \u003cdiv\u003e\n      \u003cStaticComponent /\u003e {/* 静态组件不需要重新渲染 */}\n      \u003cDynamicComponent /\u003e {/* 只有需要更新的部分重新渲染 */}\n    \u003c/div\u003e\n  );\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaotin%2Freact-in-one-day","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaotin%2Freact-in-one-day","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaotin%2Freact-in-one-day/lists"}