{"id":13817696,"url":"https://github.com/chinanf-boy/didact-explain","last_synced_at":"2025-04-06T07:11:17.939Z","repository":{"id":60163329,"uuid":"123883497","full_name":"chinanf-boy/didact-explain","owner":"chinanf-boy","description":"🇨🇳翻译: 「 Didact 」 DIY React  ❤ 更新 ✔","archived":false,"fork":false,"pushed_at":"2024-03-21T07:14:26.000Z","size":3115,"stargazers_count":353,"open_issues_count":3,"forks_count":52,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-30T05:08:12.307Z","etag":null,"topics":["didact","explain","react","zh"],"latest_commit_sha":null,"homepage":"","language":null,"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/chinanf-boy.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":"2018-03-05T07:47:10.000Z","updated_at":"2025-03-20T11:48:32.000Z","dependencies_parsed_at":"2024-08-04T06:12:10.545Z","dependency_job_id":null,"html_url":"https://github.com/chinanf-boy/didact-explain","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/chinanf-boy%2Fdidact-explain","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chinanf-boy%2Fdidact-explain/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chinanf-boy%2Fdidact-explain/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chinanf-boy%2Fdidact-explain/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chinanf-boy","download_url":"https://codeload.github.com/chinanf-boy/didact-explain/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247445669,"owners_count":20939958,"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":["didact","explain","react","zh"],"created_at":"2024-08-04T06:00:53.898Z","updated_at":"2025-04-06T07:11:17.910Z","avatar_url":"https://github.com/chinanf-boy.png","language":null,"readme":"# didact [![explain]][source] [![translate-svg]][translate-list]\n\n[explain]: http://llever.com/explain.svg\n[source]: https://github.com/chinanf-boy/Source-Explain\n[translate-svg]: http://llever.com/translate.svg\n[translate-list]: https://github.com/chinanf-boy/chinese-translate-list\\\n\n「 一个DIY指南 \u003e 建立你自己的React 翻译」\n\n[中文](./readme.md) |  [english](https://engineering.hexacta.com/didact-learning-how-react-works-by-building-it-from-scratch-51007984e5c5)\n\n---\n\n### 更新 √\n\n\u003c!-- doc-templite START generated --\u003e\n\u003c!-- repo = 'pomber/didact' --\u003e\n\u003c!-- time = '2018 3.7' --\u003e\n\u003c!-- commit = '6a86fc8bd58a56d65a720457d2b8be5e8282e99b' --\u003e\n翻译的原文 | 与日期 | 最新更新 | 更多\n---|---|---|---\n[commit] | ⏰ 2018 3.7 | ![last] | [中文翻译][translate-list]\n\n[last]: https://img.shields.io/github/last-commit/pomber/didact.svg\n[commit]: https://github.com/pomber/didact/tree/6a86fc8bd58a56d65a720457d2b8be5e8282e99b\n\u003c!-- doc-templite END generated --\u003e\n\n### 贡献\n\n欢迎 👏 勘误/校对/更新贡献 😊 [具体贡献请看](https://github.com/chinanf-boy/chinese-translate-list#贡献)\n\n## 生活\n\n[help me live , live need money 💰](https://github.com/chinanf-boy/live-need-money)\n\n---\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"https://cloud.githubusercontent.com/assets/1911623/26426031/5176c348-40ad-11e7-9f1a-1e2f8840b562.jpeg\"\u003e\u003c/p\u003e\n\n# Didact [![Build Status](https://travis-ci.org/hexacta/didact.svg?branch=master)](https://travis-ci.org/hexacta/didact) [![npm version](https://img.shields.io/npm/v/didact.svg?style=flat)](https://www.npmjs.com/package/didact)\n\n\n这个存储库与[系列帖子](https://engineering.hexacta.com/didact-learning-how-react-works-by-building-it-from-scratch-51007984e5c5)一起使用,这解释了如何从头开始逐步构建React. \n\n## 动机\n\nDidact的目标是, 通过提供相同API的更简单实现, 以及如何构建它的逐步说明,使React的内部更容易理解. 一旦你理解了React如何在内部工作,使用它将更容易. \n\n## 分步指南\n\n| Medium 博文 `en-翻墙`                                                                                                       |                             代码示例                             |                                                                                                                                       提交                                                                                                                                      |                                                            其他语言                                                           |\n| -------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------: |\n| [介绍](https://engineering.hexacta.com/didact-learning-how-react-works-by-building-it-from-scratch-51007984e5c5) |                                                              |                                                                                                                                                                                                                                                                               |                                                                                                        [中文](#介绍)                    |\n| [渲染DOM元素](https://engineering.hexacta.com/didact-rendering-dom-elements-91c9aa08323b)                          | [codepen](https://codepen.io/pomber/pen/eWbwBq?editors=0010) |                                                                                           [diff](https://github.com/hexacta/didact/commit/fc4d360d91a1e68f0442d39dbce5b9cca5a08f24)                                                                                           |               [中文](#1-%E6%B8%B2%E6%9F%93dom%E5%85%83%E7%B4%A0)               |\n| [元素创建和JSX](https://engineering.hexacta.com/didact-element-creation-and-jsx-d05171c55c56)                       | [codepen](https://codepen.io/pomber/pen/xdmoWE?editors=0010) |                                                                                           [diff](https://github.com/hexacta/didact/commit/15010f8e7b8b54841d1e2dd9eacf7b3c06b1a24b)                                                                                           |           [中文](#2-%E5%85%83%E7%B4%A0%E5%88%9B%E5%BB%BA%E5%92%8Cjsx)          |\n| [虚拟DOM和对比](https://engineering.hexacta.com/didact-instances-reconciliation-and-virtual-dom-9316d650f1d0)       | [codepen](https://codepen.io/pomber/pen/WjLqYW?editors=0010) | [diff](https://github.com/hexacta/didact/commit/8eb7ffd6f5e210526fb4c274c4f60d609fe2f810) [diff](https://github.com/hexacta/didact/commit/6f5fdb7331ed77ba497fa5917d920eafe1f4c8dc) [diff](https://github.com/hexacta/didact/commit/35619a039d48171a6e6c53bd433ed049f2d718cb) | [中文](#3-%E5%AE%9E%E4%BE%8B-%E5%AF%B9%E6%AF%94%E5%92%8C%E8%99%9A%E6%8B%9Fdom) |\n| [组件和状态](https://engineering.hexacta.com/didact-components-and-state-53ab4c900e37)                              |        [codepen](https://codepen.io/pomber/pen/RVqBrx)       |                                                                                           [diff](https://github.com/hexacta/didact/commit/2e290ff5c486b8a3f361abcbc6e36e2c21db30b8)                                                                                           |            [中文](#4-%E7%BB%84%E4%BB%B6%E5%92%8C%E7%8A%B6%E6%80%81)            |\n| [Fibre-递增对比](https://engineering.hexacta.com/didact-fiber-incremental-reconciliation-b2fe028dcaec)               |        [codepen](https://codepen.io/pomber/pen/veVOdd)       |                                              [diff](https://github.com/hexacta/didact/commit/6174a2289e69895acd8fc85abdc3aaff1ded9011) [diff](https://github.com/hexacta/didact/commit/accafb81e116a0569f8b7d70e5b233e14af999ad)                                              |              [中文](#5-fibre-%E9%80%92%E5%A2%9E%E5%AF%B9%E6%AF%94)             |\n\n## 用法\n\n\u003e 🚧请勿将其用于生产代码!\n\n用npm或yarn安装: \n\n    $ yarn add didact\n\n然后像使用React一样使用它: \n\n```jsx\n/** @jsx Didact.createElement */\nimport Didact from 'didact';\n\nclass HelloMessage extends Didact.Component {\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      count: 1\n    };\n  }\n\n  handleClick() {\n    this.setState({\n      count: this.state.count + 1\n    });\n  }\n\n  render() {\n    const name = this.props.name;\n    const times = this.state.count;\n    return (\n      \u003cdiv onClick={e =\u003e this.handleClick()}\u003e\n        Hello {name + \"!\".repeat(times)}\n      \u003c/div\u003e\n    );\n  }\n}\n\nDidact.render(\n  \u003cHelloMessage name=\"John\" /\u003e,\n  document.getElementById('container')\n);\n```\n\n### 介绍\n\n一步一步地来, 本文只是对作者-项目-解释-的中文翻译 「英文原版需要翻墙」\n\n`我很想知道React`\n\n幸运的是，如果我们不关心性能，可调试性，可移植性等等，React的三个或四个主要特性并不是很难重写。\n\n实际上，它们非常简单，可以用不到200行代码编写。\n\n我们将这样做。使用相同的API在不到200行的代码中编写React的工作版本。鉴于这个图书馆的教学性质，我们将其称为`Didact`。\n\n[\u003e\u003e\u003e 最后成果 codepen.io](https://codepen.io/pomber/pen/RVqBrx?editors=0010)\n\n---\n\n\n### 1. 渲染DOM元素\n\n[\u003e\u003e 1.Rendering-DOM-elements.md](./1.Rendering-DOM-elements.md)\n\n### 2. 元素创建和JSX\n\n[\u003e\u003e 2.JSX.md](./2.JSX.md)\n\n### 3. 实例-对比和虚拟DOM\n\n[\u003e\u003e 3.Virtual.md](./3.Virtual.md)\n\n### 4. 组件和状态\n\n[\u003e\u003e 4.Components-and-State.md](./4.Components-and-State.md)\n\n### 5. Fibre-递增对比\n\n[\u003e\u003e 5.Fibre.readme.md](./5.Fibre.readme.md)\n\n## 演示\n\n[你好,世界](https://rawgit.com/hexacta/didact/master/examples/hello-world/index.html)\\\n[你好,世界JSX](https://rawgit.com/hexacta/didact/master/examples/hello-world-jsx/index.html)\\\n[todomvc](https://didact-todomvc.surge.sh)\\\n[递增渲染,演示](https://pomber.github.io/incremental-rendering-demo/didact.html)\n\n\n## 执照\n\nMIT©[Hexacta](https://www.hexacta.com)","funding_links":[],"categories":["Others"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchinanf-boy%2Fdidact-explain","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchinanf-boy%2Fdidact-explain","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchinanf-boy%2Fdidact-explain/lists"}