{"id":16493810,"url":"https://github.com/linbudu599/mutable-music-app","last_synced_at":"2025-04-03T05:21:24.363Z","repository":{"id":41711120,"uuid":"240691056","full_name":"linbudu599/Mutable-Music-App","owner":"linbudu599","description":"Make A Mutable App By Immutable.Js😼","archived":false,"fork":false,"pushed_at":"2023-01-05T07:22:00.000Z","size":8888,"stargazers_count":0,"open_issues_count":26,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-01T20:54:12.325Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/linbudu599.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-02-15T10:55:41.000Z","updated_at":"2020-02-20T03:13:10.000Z","dependencies_parsed_at":"2023-02-03T18:02:15.037Z","dependency_job_id":null,"html_url":"https://github.com/linbudu599/Mutable-Music-App","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/linbudu599%2FMutable-Music-App","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linbudu599%2FMutable-Music-App/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linbudu599%2FMutable-Music-App/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/linbudu599%2FMutable-Music-App/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/linbudu599","download_url":"https://codeload.github.com/linbudu599/Mutable-Music-App/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246940237,"owners_count":20858092,"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-10-11T14:10:47.214Z","updated_at":"2025-04-03T05:21:24.339Z","avatar_url":"https://github.com/linbudu599.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Mutable-Music-App\n\nMake A Mutable App By ImmutaJs😼\n\n## 挖挖挖坑\n\n- 暂时不启用严格的 tsx 检查\n\n- `styled-components` 与 `ts` 协作\n\n- react-router-config\n\n实现命令式路由，很像 Vue-router\n\n- forwardRef 与 useImperativeHandle\n\n  - useRef，使函数式组件也能够享受到获取 DOM 元素或者自定义组件，父组件获取子组件引用而后调用子组件方法，如 focus 等。\n  - forwardRef，可以获取父组件的 ref 实例作为子组件的参数（与 props 同级），然后再把这个 ref 绑定到自己内部节点，就可以实现 ref 的透传了！\n  - useImperativeHandle，常与 forwardRef 搭配使用，可以控制向父组件暴露的属性以及方法，第一个参数即为 forwardRef 包裹后得到的父组件 ref 实例。\n\n    ```tsx\n    const Test: FC = (): JSX.Element =\u003e {\n      const testRef: MutableRefObject\u003cany\u003e = useRef(\"faaather\");\n      const handleClick = (e: SyntheticEvent\u003cHTMLButtonElement\u003e): void =\u003e {\n        console.log(\"自身button的内容：\", e.currentTarget.innerText);\n        console.log(\"子组件input的对象:\", testRef.current);\n        console.log(\"子组件input的value值：\", testRef.current.value);\n        console.log(\"子组件input的类型：\", testRef.current.type());\n      };\n      return (\n        \u003cFragment\u003e\n          \u003cTestChildForward ref={testRef} /\u003e\n          \u003cbutton onClick={handleClick}\u003e获取子组件的input的value和type\u003c/button\u003e\n        \u003c/Fragment\u003e\n      );\n    };\n    export default Test;\n\n    function TestChild(props: {}, ref: Ref\u003cany\u003e): JSX.Element {\n      const testRef: MutableRefObject\u003cany\u003e = useRef(); //创建一个自身的ref，绑定到标签节点上\n      console.log(ref);\n      //暴露出一个想要让父组件知道的对象,里面可以是属性也可以是函数\n      useImperativeHandle(ref, () =\u003e {\n        //第一个参数，要暴露给哪个(ref)？第二个参数要暴露出什么？\n        return {\n          //(testRef.current as HTMLInputElement) 类型断言，自己肯定就是这样的类型\n          value: (testRef.current as HTMLInputElement).value, //暴露出input的value\n          type: () =\u003e (testRef.current as HTMLInputElement).type, //暴露出input的type类型\n          test: \"test\"\n        };\n      });\n      return (\n        \u003c\u003e\n          \u003cinput\n            type=\"text\"\n            value={\"input的内容\"}\n            ref={testRef}\n            onChange={(e: ChangeEvent\u003cHTMLInputElement\u003e) =\u003e {\n              console.log(e.currentTarget.value);\n              console.log(e.currentTarget.type);\n            }}\n          /\u003e\n        \u003c/\u003e\n      );\n    }\n    export const TestChildForward: ForwardRefExoticComponent\u003cany\u003e = memo(\n      forwardRef(TestChild)\n    );\n    ```\n\n## 为什么是...？\n\n### Styled-Components\n\n`All In Js`！\n它解决了哪些痛点？\n\n- CSS 耦合程度高\n- 支持预处理器如嵌套语法\n- CSS 代码现在可以处理逻辑了！\n- 语义化，总觉得 Html5 的语义化少了点什么吧？\n\n## Immutable.JS\n\n- fromJS/toJs\n- get/getIn\n\n  ```js\n  let jsObj = { a: { b: 1 } };\n  let res = jsObj.a.b;\n  //immutable 对象\n  let immutableObj = fromJS(jsObj);\n  let res = immutableObj.getIn([\"a\", \"b\"]); // 注意传入的是一个数组\n  ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinbudu599%2Fmutable-music-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flinbudu599%2Fmutable-music-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flinbudu599%2Fmutable-music-app/lists"}