{"id":21625922,"url":"https://github.com/debbl/learn-react-notes","last_synced_at":"2026-04-29T23:06:49.792Z","repository":{"id":114467509,"uuid":"472345332","full_name":"Debbl/learn-react-notes","owner":"Debbl","description":null,"archived":false,"fork":false,"pushed_at":"2022-04-16T10:51:52.000Z","size":2400,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-18T20:22:11.620Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/Debbl.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":"2022-03-21T13:17:12.000Z","updated_at":"2022-04-04T05:22:09.000Z","dependencies_parsed_at":"2023-06-08T06:30:21.299Z","dependency_job_id":null,"html_url":"https://github.com/Debbl/learn-react-notes","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Debbl/learn-react-notes","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Debbl%2Flearn-react-notes","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Debbl%2Flearn-react-notes/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Debbl%2Flearn-react-notes/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Debbl%2Flearn-react-notes/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Debbl","download_url":"https://codeload.github.com/Debbl/learn-react-notes/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Debbl%2Flearn-react-notes/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264465866,"owners_count":23612581,"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-25T01:11:22.508Z","updated_at":"2026-04-29T23:06:44.773Z","avatar_url":"https://github.com/Debbl.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 一些重点\r\n## 1. 数组的 map\r\n```jsx\r\n{/*数组的 map 高阶函数*/}\r\nconst names = ['abc', 'cba', 'mba'];\r\n\r\nconst newNames = names.map((item, index, arr) =\u003e {\r\n    return item;\r\n})\r\n```\r\n## 2. 类组件中 `this` 的指向\r\n\u003e 函数的 this 指向有四种，和函数的调用者有关，如 button 的 onClick 事件是有外部调用的，所以这里要考虑 this 的指向\r\n- 第一种解决方案\r\n\u003e 使用 函数的 bind() 显示绑定\r\n```jsx\r\n\u003cbutton onClick={handleClick.bind(this)}\u003e按钮\u003c/button\u003e\r\n```\r\n\u003e 在类组件中的 constructor 中重新赋值 函数\r\n```jsx\r\nclass App extends React.Component {\r\n  constructor() {\r\n    super();\r\n    // 重新赋值 handleClick 函数\r\n    this.handleClick = this.handleClick.bind(this);\r\n  }\r\n\r\n  handleClick() {\r\n    console.log(this);\r\n    console.log(\"按钮点击了\");\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      \u003cdiv\u003e\r\n        \u003ch2\u003eApp\u003c/h2\u003e\r\n        {/* 这里传递的是 绑定 this 后的函数 */}\r\n        \u003cbutton onClick={this.handleClick}\u003e按钮\u003c/button\u003e\r\n      \u003c/div\u003e\r\n    )\r\n  }\r\n}\r\n```\r\n- 第二种解决方案\r\n\u003e 使用箭头函数。因为箭头函数不绑定 this，箭头函数的 this，指向的上层作用域的 this\r\n```jsx\r\n\u003cbutton onClick={() =\u003e this.handleClick()}\u003e按钮\u003c/button\u003e\r\n```\r\n\r\n## 3. React 的设计原则 state 中的数据是不可变的\r\n\r\n## 4. 生命周期（类组件）\r\n\r\n- https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/\r\n\r\n### 生命周期是一个抽象的概念，在生命周期的整个过程，分成了很多个阶段；\r\n\r\n- 比如装载阶段（Mount），组件第一次在DOM树中被渲染的过程；\r\n- 比如更新过程（Update），组件状态发生变化，重新更新渲染的过程；\r\n- 比如卸载过程（Unmount），组件从DOM树中被移除的过程；\r\n\r\n### React内部为了告诉我们当前处于哪些阶段，会对我们组件内部实现的某些函数进行回调，这些函数就是生命周期函数：\r\n\r\n- 比如实现`componentDidMount`函数：组件已经挂载到DOM上时，就会回调；\r\n- `shouldComponentUpdate` 组件即将更新，可以做一些优化，`memo`\r\n- 比如实现`componentDidUpdate`函数：组件已经发生了更新时，就会回调；\r\n- 比如实现`componentWillUnmount`函数：组件即将被移除时，就会回调；\r\n\r\n## 5. 组件间的通信\r\n\r\n## 6. 跨组件通信\r\n\r\n### Props\r\n\r\n### Contenxt\r\n\r\n### Events\r\n\r\n## 7. setState的使用\r\n\r\n### 如何获取异步的结果\r\n\r\n\u003e this.setState({}, callback)\r\n\r\n```javascript\r\nthis.setState({\r\n  message: \"Hello React\",\r\n}, () =\u003e {\r\n  console.log(this.state.message);\r\n})\r\n```\r\n\r\n```javascript\r\ncomponentDidMount() {\r\n  console.log(this.state.message);\r\n}\r\n```\r\n\r\n- 在组件生命周期或React合成事件中，setState是**异步**； \r\n- 在setTimeout或者原生dom事件中，setState是**同步**；\r\n\r\n### 数据合并\r\n\r\n\u003e Object.assign()\r\n\r\n### 本身的合并，异步的关系\r\n\r\n```javascript\r\n// 1. setState 本身的合并\r\nthis.setState({\r\n    counter: this.state.counter + 1,\r\n})\r\nthis.setState({\r\n    counter: this.state.counter + 1,\r\n})\r\nthis.setState({\r\n    counter: this.state.counter + 1,\r\n})\r\n```\r\n\r\n\u003e 解决方案\r\n\r\n```javascript\r\nthis.setState((preState, props) =\u003e {\r\n  console.log(props);\r\n  return  {\r\n    counter: preState.counter + 1\r\n  }\r\n})\r\nthis.setState((preState, props) =\u003e {\r\n  return  {\r\n    counter: preState.counter + 1\r\n  }\r\n})\r\nthis.setState((preState, props) =\u003e {\r\n  return  {\r\n    counter: preState.counter + 1\r\n  }\r\n})\r\n```\r\n\r\n## 8. React 性能优化\r\n\r\n- key\r\n- PureComponet/React.memo() 的 shallowEqual 浅层比较\r\n\r\n### setState 不可变的力量\r\n\r\n- 有利于 shouldComponentUpdate 优化\r\n\r\n## 9. ref 受控组件和非受控组件\r\n\r\n### ref\r\n\r\n- 字符串\r\n- 对象\r\n- 函数\r\n\r\n\u003e forwordRef\r\n\r\n### 受控组件\r\n\r\n\u003e 所有会改变的数据都应该放在 state 里\r\n\r\n- 单项数据流\r\n\r\n## 10. 高阶组件\r\n\r\n- 增强 Props\r\n- 登录鉴权\r\n- 生命周期劫持\r\n- redux connect\r\n- react router 的 withRouter\r\n\r\n## 11. CSS\r\n\r\n- 内联样式\r\n- 普通 CSS\r\n- css-in-js\r\n\r\n## 12. classnames\r\n\r\n\u003e 和 Vue 一样的效果\r\n\r\n```bash\r\nyarn add classnames\r\n```\r\n\r\n## 13. AntDesign\r\n\r\n## 14. React-transition-group\r\n\r\n- Transition\r\n\r\n- CSSTransition'\r\n\r\n  \u003e 三种状态\r\n\r\n  - -appear、-appear-active、-appear-done\r\n  - -enter、-enter-active、-enter-done\r\n  - -exit、-exit-active、-exite-done\r\n\r\n- SwitchTransition\r\n- TransitionGroup\r\n\r\n## 15. redux\r\n\r\n- reducer\r\n- store\r\n- action\r\n\r\n### redux 中的异步操作\r\n\r\n- 可以把网络请求放在 redux 里面在更新数据，直接封装一层，组件只关心派发 action 来操作数据。\r\n- 默认在 redux 中不支持异步请求。\r\n- 可以使用中间件。\r\n\r\n## 16. React-router\r\n\r\n- hash\r\n- history\r\n\r\n## 17. React-Hooks\r\n\r\n- `useState()`\r\n  - state 更新的值要不一样， React 内部会做优化，复杂值（如数组）一样会导致组件不会重新渲染。\r\n- `useEffect()`\r\n\r\n  - 不传第二个参数，`componentDidMount() componentDidUpdate()`\r\n  - return 一个函数，`componentWillUnmount()`, 有区别\r\n\r\n  - 模仿组件的生命周期。\r\n- `useContext()`\r\n- `useReducer()` 是 `useState()` 的替代品\r\n  - 多个 `reducer` 不可以共享里面的数据\r\n- `useCallback()` 进行性能优化的\r\n  - 函数返回一个 memoized 的值\r\n  - 函数依赖不变，多次定义返回相同的值\r\n  - **用在将组件中的一个函数传给一个子组件使用**，避免子组件的 props 中的函数值会重新定义获得的是一个不一样的值，没有很好的优化，重复渲染\r\n- `useMemo()` \r\n  - 返回一个 memoized 的值\r\n- `useRef()`\r\n  - 返回一个`ref`对象，这个对象在组件的整个生命周期保持不变，初始赋值\r\n  - 用法\r\n    - 引入 `DOM`\r\n    - 保存数据，在组件的整个生命周期保持不变\r\n- `useImperativeHandle()`\r\n  - 自定义暴露给父组件的`ref` 属性\r\n- `useLayoutEffect()`\r\n  - useEffect会在渲染的内容更新到DOM上后执行，不会阻塞DOM的更新\r\n  - useLayoutEffect会在渲染的内容更新到DOM上之前执行，**会阻塞DOM的更新**；\r\n- 自定义 Hook\r\n  - 以`use` 开头\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdebbl%2Flearn-react-notes","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdebbl%2Flearn-react-notes","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdebbl%2Flearn-react-notes/lists"}