TE
科技回声
首页24小时热榜最新最佳问答展示工作
GitHubTwitter
首页

科技回声

基于 Next.js 构建的科技新闻平台,提供全球科技新闻和讨论内容。

GitHubTwitter

首页

首页最新最佳问答展示工作

资源链接

HackerNews API原版 HackerNewsNext.js

© 2025 科技回声. 版权所有。

Implementing React from Scratch

177 点作者 robpruzan9 个月前

4 条评论

robpruzan9 个月前
I started this project out of interest in building a UI framework for a completely different language/platform inspired by React. Quickly realized I didn’t understand everything React was doing to allow their API. Rebuilding React was extremely useful for learning more about the framework. Hopefully, this article is useful to other people in the same way.
评论 #41341022 未加载
评论 #41340606 未加载
c-smile9 个月前
Just in case:<p>Sciter has Reactor - its own native and built-in implementation of React.<p>Main difference is that component is instanceof Element - components are DOM elements. This allows to unify React and WebComponent under the same umbrella&#x2F;mechanism. Yet to extend standard DOM methods by use of JSX, so this<p><pre><code> someDomElement.append(&lt;div&gt;Hello&lt;&#x2F;div&gt;) </code></pre> works just fine - appends content from the vDOM.<p>In fact Reactor is three entities implemented natively:<p>* JSX - embedded into JS compiler (830 LOC) - <a href="https:&#x2F;&#x2F;gitlab.com&#x2F;c-smile&#x2F;quickjspp&#x2F;-&#x2F;blob&#x2F;master&#x2F;quickjs-jsx.h" rel="nofollow">https:&#x2F;&#x2F;gitlab.com&#x2F;c-smile&#x2F;quickjspp&#x2F;-&#x2F;blob&#x2F;master&#x2F;quickjs-j...</a> , produces vDOM literals<p>* Element.prototype.patch(JSX&#x2F;vDOM) (420 LOC) - reconciliation &#x2F; diff implementation<p>* Binding of lifecycle methods (200 LOC) - componentDidMount and Co.<p>There is also native implementation of Signal&#x27;s (310 LOC) but they are optional for React&#x27;alike functionality.
评论 #41365304 未加载
评论 #41346853 未加载
eeue569 个月前
Nice! I did a similar project, more focused on creating an Elm architecture framework in TypeScript here[1]). I based it on implementing virtual-dom logic for both Elm codebases and Derw&#x27;s renderer. Since it&#x27;s a decent amount of code, I couldn&#x27;t find a good way to represent it in a blog post, and ended up making a commit-by-commit example on Github instead. Since it&#x27;s FP-focused, it doesn&#x27;t support useEffect&#x2F;useState like this post, but rather has an external subscription&#x2F;message system instead.<p>It does support server-side-rendering, hydratation, and async events. It&#x27;s a bit different in implementation in the OP&#x27;s post, but I think the most important thing any reader should take away is that at the core, virtual-doms can be quite simple with plenty of room for further optimization.<p>[1] - <a href="https:&#x2F;&#x2F;github.com&#x2F;eeue56&#x2F;make-your-own-tea&#x2F;pull&#x2F;1">https:&#x2F;&#x2F;github.com&#x2F;eeue56&#x2F;make-your-own-tea&#x2F;pull&#x2F;1</a>
评论 #41347450 未加载
efortis9 个月前
About React.createElement, implementing a compatible version ended up being my goto helper for small UIs.<p>For example, I use it in mockaton here:<p><a href="https:&#x2F;&#x2F;github.com&#x2F;ericfortis&#x2F;mockaton&#x2F;blob&#x2F;7e6ad6226d7ed48e17897e5e66efe2fe2102ca49&#x2F;src&#x2F;Dashboard.js#L313">https:&#x2F;&#x2F;github.com&#x2F;ericfortis&#x2F;mockaton&#x2F;blob&#x2F;7e6ad6226d7ed48e...</a><p>So if at some point I need React I can simply delete my version of createElement