Awesome

didact

「一个DIY指南 > 建立你自己的React 翻译」

更新 √

翻译的原文	与日期	最新更新	更多
commit	⏰ 2018 3.7		中文翻译

贡献

欢迎 👏 勘误/校对/更新贡献 😊 具体贡献请看

生活

help me live , live need money 💰

Didact

这个存储库与系列帖子一起使用,这解释了如何从头开始逐步构建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 (
      <div onClick={e => this.handleClick()}>
        Hello {name + "!".repeat(times)}
      </div>
    );
  }
}

Didact.render(
  <HelloMessage name="John" />,
  document.getElementById('container')
);

介绍

一步一步地来, 本文只是对作者-项目-解释-的中文翻译「英文原版需要翻墙」

我很想知道React

幸运的是，如果我们不关心性能，可调试性，可移植性等等，React的三个或四个主要特性并不是很难重写。

实际上，它们非常简单，可以用不到200行代码编写。

我们将这样做。使用相同的API在不到200行的代码中编写React的工作版本。鉴于这个图书馆的教学性质，我们将其称为Didact。

>>> 最后成果 codepen.io

演示

你好,世界
 你好,世界JSX
todomvc
递增渲染,演示

Awesome

didact

更新 √

贡献

生活

Didact

动机

分步指南

用法

介绍

1. 渲染DOM元素

2. 元素创建和JSX

3. 实例-对比和虚拟DOM

4. 组件和状态

5. Fibre-递增对比

演示

执照