{"id":18286864,"url":"https://github.com/chenhcy/reactjsproject","last_synced_at":"2025-04-09T06:26:58.743Z","repository":{"id":156874432,"uuid":"624132242","full_name":"ChenHCY/ReactJSProject","owner":"ChenHCY","description":" React Js project and knowledge","archived":false,"fork":false,"pushed_at":"2024-02-16T11:16:41.000Z","size":578,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-15T00:47:00.701Z","etag":null,"topics":["react-hooks","react-router","reactcomponents","reactjs"],"latest_commit_sha":null,"homepage":"","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/ChenHCY.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}},"created_at":"2023-04-05T20:14:33.000Z","updated_at":"2023-05-04T09:59:14.000Z","dependencies_parsed_at":"2024-02-16T12:38:28.771Z","dependency_job_id":null,"html_url":"https://github.com/ChenHCY/ReactJSProject","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChenHCY%2FReactJSProject","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChenHCY%2FReactJSProject/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChenHCY%2FReactJSProject/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ChenHCY%2FReactJSProject/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ChenHCY","download_url":"https://codeload.github.com/ChenHCY/ReactJSProject/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247989582,"owners_count":21029335,"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":["react-hooks","react-router","reactcomponents","reactjs"],"created_at":"2024-11-05T13:22:36.739Z","updated_at":"2025-04-09T06:26:58.705Z","avatar_url":"https://github.com/ChenHCY.png","language":"JavaScript","readme":"# React.memo() AND useMemo() in JavaScript\n==\u003e 这两个选项都允许您通过记忆功能组件的输出来优化功能组件的性能。\n\n1. React.memo():\n\n使用 React.memo()包装componment，React将记住componment的结果，并且只有在 props 发生变化时才重新渲染它。\n\n```JavaScript\nimport React from 'react';\n\nconst MyComponent = React.memo((props) =\u003e {\n  // Component logic here\n});\n\nexport default MyComponent;\n```\n\n2. useMemo():\n在这种方法中，您可以使用useMemo() hook 来记住值或计算的结果。dependencies 数组 `[dependency1, dependency2]` 是指定哪些值应该触发重新计算记忆值。\n\n==》通过记忆组件或特定值的输出，您可以防止不必要的重新渲染并提高 React 应用程序的性能。\n\n\n```JavaScript\nimport React, { useMemo } from 'react';\n\nconst MyComponent = (props) =\u003e {\n  // Component logic here\n\n  const memoizedValue = useMemo(() =\u003e {\n    // Memoized value calculation\n    return someValue;\n  }, [dependency1, dependency2]);\n\n  return (\n    // JSX rendering using memoizedValue\n  );\n};\n\nexport default MyComponent;\n```\n\n\n# React Rounter in React.js\n==\u003e Beacuse Create React App doesn't include page routing. so the React Router is the most popular solution.\n\n因为react创建的时候是没有页面路径功能，React Rounter就是创建React App的页面路径功能，从而达到切换页面的效果\n\nAdd React Router：`npm install react-router-dom`\n\n使用的import: `import { BrowserRouter, Route, Switch } from 'react-router-dom';`\n\n模板：\n```JSX\n return (\n    \u003cBrowserRouter\u003e\n      \u003cRoutes\u003e\n        \u003cRoute path=\"/\" element={\u003cLayout /\u003e}\u003e\n          \u003cRoute index element={\u003cHome /\u003e} /\u003e\n          \u003cRoute path=\"blogs\" element={\u003cBlogs /\u003e} /\u003e\n          \u003cRoute path=\"contact\" element={\u003cContact /\u003e} /\u003e\n          \u003cRoute path=\"*\" element={\u003cNoPage /\u003e} /\u003e\n        \u003c/Route\u003e\n      \u003c/Routes\u003e\n    \u003c/BrowserRouter\u003e\n  );\n```\n# React Redux in React.js\nRedux 是 JavaScript 应用的state容器，提供可预测的state管理。\n==\u003e 也就是说Redux是React项目储存所有变量的容器，可以避免我们使用call back()来访问父层级的变量\n\n1. 安装Redux Toolkit：`npm install @reduxjs/toolkit`\n\n2. 安装Redux 核心库: `npm install redux`\n\n3. 创建一个 React Redux 应用: `npx create-react-app my-app --template redux`\n\n# setState 的 async特性\n\nsetState 的asyc特性，不会立即改变变量的值 ==\u003e 在一个function里面 的所以setState都是基于一个相同的值\n\nsetStaet 和 console.log 的区别就是 console.log会立即加入\n\n==\u003e 通常的setState改变量值: `setCount(count + 1) `\n\n==\u003e 可以使用arrow function改变变量值，每次重新读取一场这个变量值 ==\u003e 这样可以消除async异步，形成两个setState的顺序改变变量\n\n# fn componment useEffect()\n\n首先因为fn componment中是不允许使用arrow function进行call back的, 所以我们使用useEffect来完成一些操作，\n\n==》 1. componentDidMount(): componentDidMount 方法在组件首次挂载到 DOM 中时被调用。 您可以使用 useEffect 通过将空数组作为第二个参数传递给 useEffect 来执行类似的行为。 \n  ==\u003e 这将导致效果仅在安装组件时运行一次。\n \n```React.js\nuseEffect(() =\u003e {\n    // code to run when component is mounted\n}, []);\n```\n\n==》2. componentDidUpdate(): 监控一些变量依赖项的改变，来执行对应的操作\n\n```React.js\nuseEffect(() =\u003e {\n      // code to run when component updates\n}, [prop1, prop2]);\n```\n    \n==》 3. componmentWillUmount(): setState()执行完毕之后，最后再执行的操作\n\n```React.js\nuseEffect(() =\u003e {\n    // code to run when component is mounted\n  return () =\u003e {\n    // cleanup code to run when component is unmounted\n  };\n}, []);\n```\n`return ()`: useEffect hook中的语句称为clean up 函数。 ==\u003e 它用于在组件componment卸载 或 if-statement 依赖项数组中的依赖项更改时执行任何必要的清理或拆卸。\n\nFor Example：`return () =\u003e clearInterval(interval)`\n\n在这个例子中， cleanup 函数清除了组件挂载时创建的interval function。 ==\u003e 这确保在componment卸载 或  isRunning 状态从 true 变为 false 时 stop time interval。\n\n简单来说，通过从 useEffect 钩子返回清理函数，当组件卸载或 isRunning 状态从 true 变为 false 时，React 将自动调用它。\n    \n```    \n==\u003e 其他重点： function() 定义在useEffect() hook中，是无法在外部进行访问的，包括在button onclick中使用\n  \n ==\u003e 所以如果要使这种function可以在外部被访问，我们需要定义在useEffect hook的外面，然后在hook中调用\n```\n \n# class componment call back\n\narrow function 相当于call back, 它会在每次setState执行完毕之后，然后执行这个function\n\n#  React-rounter Install Step\n Step 1: `npm install react-router-dom`\n \n Step 2: add file in index.js or App.jsx ==\u003e `import { BrowserRouter, Route, Switch } from 'react-router-dom';`\n \n Step 3: `\u003cBrowserRouter\u003e ... \u003c/BrowserRouter\u003e`\n\n# React-Bootstrap Modals Install Step\n  Step 1: install bootstrap package: 在my-app里面 ==》 npm install react-bootstrap bootstrap\n\t\n  Step 2: add file in index.js ==》 import 'bootstrap/dis/css/bootstrap.min.css';\n  \n  Step 3: 在对应的JSX file中，都要 ==》 import Modal componment and use it \n  \n  ==\u003e import { Modal } from 'react-bootstrap';\n  \n 使用模板： \n ```JSX\n \u003cModal show = {一个boolean变量控制是否打开} onHide = {一个控制关闭的function}\u003e\n \t\u003cModal.Header closeButton\u003e\n            \u003cModal.Title\u003e提示框的标题\u003c/Modal.Title\u003e\n         \u003c/Modal.Header\u003e\n\t \n\t /*提示框的主题内容*/\n\t  \u003cModal.Body\u003e\n\t\t\u003clabel\u003eUser Name:\u003c/label\u003e\n                \u003cinput type=\"text\" style={{\"margin\": \"10px\"}} id=\"nameInput\"/\u003e\n                \u003cp\u003e\u003c/p\u003e\n                \u003clabel\u003eUser Email:\u003c/label\u003e\n                \u003cinput type=\"email\" style={{\"margin\": \"10px\"}} id=\"emailInput\"/\u003e\n                \u003cp\u003e\u003c/p\u003e\n                \u003clabel\u003eUser ID:\u003c/label\u003e\n                \u003cinput type=\"id\" style={{\"margin\": \"10px\"}} id=\"idInput\"/\u003e\n           \u003c/Modal.Body\u003e\n\t   \n\t   /*提示框的结束button*/\n\t   \u003cModal.Footer\u003e\n                \u003cButton variant=\"secondary\" onClick={一个控制关闭的function}\u003e\n                    Close\n                \u003c/Button\u003e\n                \u003cButton variant=\"primary\" onClick={一个控制储存新信息function}\u003e\n                    Save Changes\n                \u003c/Button\u003e\n            \u003c/Modal.Footer\u003e\n\t  \u003c/Modal\u003e\n```\n  \n# onHide() in React-Bootstrap Modals\n`onHide()` 是 React.js 中常用的 prop，用于处理隐藏或关闭组件或元素时的事件。它通常与模态或弹出组件结合使用。\n\n在 React Bootstrap 中，`onHide()` 通常用于模态组件，例如\u003cModal\u003e和\u003cPopover\u003e。\n\n==\u003e 当模式或弹出框关闭或隐藏时，传递给的函数onHide被调用。这对于在用户关闭模式后执行某些操作很有用，例如重置组件的状态。\n\n# starWith() in JavaScript\nThe startsWith() method returns true if a string starts with a specified string.\n==\u003e Otherwise it returns false.\n\nstring.startsWith(searchValue, start) 用来判断这个string是否是以searchValue开头的, 如果是，返回true, 不是，返回false\n\nThe startsWith() method is case sensitive. ==\u003e starWith()是区分大小写的\n\t\n# Array.filter() in JavaScript\n==\u003e 数组过滤器\n\n1. The filter() method creates a new array filled with elements that pass a test provided by a function.\n\n==\u003e 该filter()方法创建一个新数组，其中填充了通过函数提供的测试的元素。\n\n2. The filter() method does not execute the function for empty elements.\n\t\n==\u003e 该filter()方法不执行空元素的功能。\n\t\n3. The filter() method does not change the original array.\n\n==\u003e 该filter()方法不会更改原始数组。\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchenhcy%2Freactjsproject","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchenhcy%2Freactjsproject","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchenhcy%2Freactjsproject/lists"}