🇨🇳翻译: 「 Didact 」 DIY React ❤ 更新 ✔
「 一个DIY指南 > 建立你自己的React 翻译」
翻译的原文 |
与日期 | 最新更新 | 更多 |
---|---|---|---|
commit | ⏰ 2018 3.7 | 中文翻译 |
欢迎 👏 勘误/校对/更新贡献 😊 具体贡献请看
help me live , live need money 💰
这个存储库与系列帖子一起使用,这解释了如何从头开始逐步构建React.
Didact的目标是, 通过提供相同API的更简单实现, 以及如何构建它的逐步说明,使React的内部更容易理解. 一旦你理解了React如何在内部工作,使用它将更容易.
| Medium 博文
en-翻墙| 代码示例 | 提交 | 其他语言 | | -------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------------------------------: | | 介绍 | | | 中文 | | 渲染DOM元素 | codepen | diff | 中文 | | 元素创建和JSX | codepen | diff | 中文 | | 虚拟DOM和对比 | codepen | diff diff diff | 中文 | | 组件和状态 | codepen | diff | 中文 | | Fibre-递增对比 | codepen | diff diff | 中文 |
🚧请勿将其用于生产代码!
用npm或yarn安装:
$ yarn add didact
然后像使用React一样使用它:
/** @jsx Didact.createElement */ import Didact from 'didact';class HelloMessage extends Didact.Component {
constructor(props) { super(props); this.state = { count: 1 }; }
handleClick() { this.setState({ count: this.state.count + 1 }); }
render() { const name = this.props.name; const times = this.state.count; return (
this.handleClick()}> Hello {name + "!".repeat(times)}); } }Didact.render( , document.getElementById('container') );
一步一步地来, 本文只是对作者-项目-解释-的中文翻译 「英文原版需要翻墙」
我很想知道React
幸运的是,如果我们不关心性能,可调试性,可移植性等等,React的三个或四个主要特性并不是很难重写。
实际上,它们非常简单,可以用不到200行代码编写。
我们将这样做。使用相同的API在不到200行的代码中编写React的工作版本。鉴于这个图书馆的教学性质,我们将其称为
Didact。
>> 1.Rendering-DOM-elements.md
你好,世界\ 你好,世界JSX\ todomvc\ 递增渲染,演示
MIT©Hexacta