React简单模拟语法(一)

原创 Lin_Grady 教程 javascript/jQuery 122阅读 2019-03-18 17:39:26 举报

React系列

React简单模拟语法(一)
Jsx, 合成事件与Refs(二)
virtualdom diff算法实现分析(三)
从Mixin到HOC再到HOOKS(四)
createElement, ReactElement与Component部分源码解析(五)

前言

我们先不讲什么语法原理,先根据API效果强行模拟语法使用,实现一个简易版的React.

render

第一步我们先用类创建一个元素返回,并且绑定点击事件,代码如下,可以正常看到一个按钮出现了.

state && setState

实现类状态和修改状态方法

渲染之后看到this dom输出已经发现改变了,但是视图并没有渲染,那是因为这是结尾一次性插入,下面就渲染视图这块往下走

重新渲染

我们现在把插入数据的操作内置到class里面,新增一个方法插入新元素移除旧元素.

现在效果虽然实现,但是还是得开头手动把元素插入视图

抽取公用类

我们先将一些共有方法提取到一个单独类

然后组件只需要直接继承Component然后处理自己逻辑即可

还有一个问题是点击事件暂时还是耦合进Component里面,先略过不提.

ReactDom.render

大家都知道React会提供这么一个方法将组件插入一个指定元素,我们直接模拟

Props

还有一个重要的传输数据实现如下

至此,抛开实际思路不说,我们已经简单模拟出来React的一般语法实现了.

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复