{"id":13559831,"url":"https://github.com/lzy19926/tinyReact","last_synced_at":"2025-04-03T15:31:04.124Z","repository":{"id":143558599,"uuid":"486427022","full_name":"lzy19926/tinyReact","owner":"lzy19926","description":"原生JS手写的简易版react框架  支持函数式组件和基本hooks (更多hooks开发中) ","archived":false,"fork":false,"pushed_at":"2022-10-13T09:56:54.000Z","size":8090,"stargazers_count":19,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-04T11:38:44.220Z","etag":null,"topics":[],"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/lzy19926.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}},"created_at":"2022-04-28T03:03:17.000Z","updated_at":"2024-06-03T03:50:41.000Z","dependencies_parsed_at":"2023-03-22T12:02:24.982Z","dependency_job_id":null,"html_url":"https://github.com/lzy19926/tinyReact","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/lzy19926%2FtinyReact","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lzy19926%2FtinyReact/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lzy19926%2FtinyReact/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lzy19926%2FtinyReact/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lzy19926","download_url":"https://codeload.github.com/lzy19926/tinyReact/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247027792,"owners_count":20871594,"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-08-01T13:00:34.212Z","updated_at":"2025-04-03T15:31:01.095Z","avatar_url":"https://github.com/lzy19926.png","language":"JavaScript","readme":"#  使用说明 (需要跑在webpack环境下)\nnpm install\n\nnpm run dev \n\n# 脚手架初始化项目\n```tsx\nnpm i lzy-tinyreact-cli  -g //全局安装脚手架\n\ntinyReact -v // 查看版本号\n\ntinyReact -create \u003cprojectName\u003e // 对应目录下创建项目\n\nnpm install // 项目中安装依赖包\n```\n\n##   创建组件\n```tsx\nfunction App() {\n  return { \n    template: `\u003cdiv\u003eApp\u003c/div\u003e`,\n  }\n}\n\nexport default App\n\n// 在index中使用render方法渲染根组件\nrender(App, document.getElementById('root'))\n```\n\n\n## 使用Hook  绑定事件 \n```tsx\nimport { myUseState } from '../myReact/js/myHook/useState'\nimport { myUseEffect } from '../myReact/js/myHook/useEffect'\n\nfunction App(){\n\n  // 使用useState\n  const [num,setNum] = myUseState(0)\n\n  // myUseEffect可以通过传入不同的参数,当作生命周期钩子进行使用\n  myUseEffect(()=\u003e{\n    console.log('组件mount阶段时执行')\n  },[])\n  myUseEffect(()=\u003e{\n    console.log('num发生变化时执行')\n  },[num])\n    myUseEffect(()=\u003e{\n    console.log('组件umMount阶段时执行')\n  })\n\n  //创建事件 并在data中注册\n  function addNum(){\n    setNum(num+1)\n  }\n  \n\n  return {\n    data:{  addNum  }, //需要在data里注册事件才能绑定\n    template:`\u003cdiv onClick={ addNum }\u003eApp\u003c/div\u003e` // 在div中onClick绑定点击事件\n  }\n}\n\n```\n\n\n## 使用子组件   给子组件传递props\n```tsx\n//可以传递函数  实现事件冒泡和下发 (父子组件之间的事件传递)\nimport Test from './components/Test'\n\nfunction App(){\n\n  const obj = {a:1,b:2}\n\n  return {\n    components:{ Test }, // 在components中注册需要使用的子组件\n    data:{ obj }, // 在data里注册需要传递的props才能传递 \n    template:`\u003cTest  obj={obj} \u003e\u003c/Test\u003e` // 使用大写双标签 并传递props\n  }\n}\n\n// 在子组件中接收props(单向数据流  子组件修改props会发出警告 )\nfunction Test(props){ ... }\n```\n\n\n## 使用map渲染列表(diff开发未完成 暂时不需要传入key)\n```tsx\n//注意使用map渲染时需要使用根标签包裹起来\nconst [arr,setArr] = useState([1,2,3])\n\nreturn {\n  template:\n  `\u003cdiv\u003e\n  ${arr.map((index,item)=\u003e{\n    return `\u003cdiv\u003e${item}\u003c/div\u003e`\n  })}\n  \u003c/div\u003e`\n}\n```\n\n\n## 使用独立CSS(注意暂时仅支持原生CSS  需要注意样式名冲突) \n```tsx\nimport './App.css'\n```\n\n### 使用专用的全局状态管理器REKV (详见myRekV文件夹下的Readme)\n\n\n### 在html中预装了Bootstarp5的全局CSS样式 \n\n\n\n## 补充说明  使用注意\n1. 只能使用双标签\u003ctag\u003e\u003c/tag\u003e , \u003cApp\u003e\u003c/App\u003e  暂时不支持单标签解析\n2. 传递的props和绑定事件需要在data里面注册\n3. 事件暂时仅支持onClick  \n4. 暂时不支持行内函数\n\n\n\n## 新增功能","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flzy19926%2FtinyReact","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flzy19926%2FtinyReact","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flzy19926%2FtinyReact/lists"}