40 行代码内实现一个 React.js

发布时间：2020-12-15 07:32:53 所属栏目：百科来源：网络整理

导读：作者：胡子大哈原文链接：http://huziketang.com/blog/posts/detail?postId=58aea515204d50674934c3ac 转载请注明出处，保留原文链接和作者信息。目录 1 前言 2 一切从点赞说起 3 实现可复用性 3.1 结构复用 3.2 生成 DOM 元素并且添加事件 4 为什么不暴力

作者：胡子大哈
原文链接：http://huziketang.com/blog/posts/detail?postId=58aea515204d50674934c3ac

转载请注明出处，保留原文链接和作者信息。

1 前言

本文会教你如何在 50 行代码内，不依赖任何第三方的库，用纯 JavaScript 实现一个 React.js 。

本文的目的是：揭开对初学者看起来很很难理解的 React.js 的组件化形式的外衣，让你有更多的精力和注意力去学习 React.js 精髓的地方。如果你刚开始学习 React.js 并且感觉很迷茫，那么看完这篇文章以后就能够解除一些疑惑。

另外注意，本文所实现的代码只用于说明教学展示，并不适用于生产环境。代码托管这个仓库。心急如焚的同学可以先去看代码，但本文会从最基础的内容开始解释。

2 一切从点赞说起

接下来所有的代码都会从一个基本的点赞功能开始演化，你会逐渐看到，文章代码慢慢地越来越像 React.js 的组件代码。而在这个过程里面，大家需要只需要跟着文章的思路，就可以在代码的演化当中体会到组件化形式。

假设现在我们需要实现一个点赞、取消点赞的功能。

[image:B4B41FF2-519A-4A7C-8035-0D5CD4EE8FFA-86900-00013723B2CAE361/8D274601-162D-4B36-B1E0-9C65FB0C494F.png]

如果你对前端稍微有一点了解，你就顺手拈来：

HTML:

<body>
    <div class='wrapper'>
      <button class='like-btn'>
        <span class='like-text'>点赞</span>
        <span>                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!