40行代码理解React.js组件化

144 浏览量更新于2024-08-28 收藏 104KB PDF 举报

"40行代码实现React.js的基本思想与组件化概念" React.js是一个流行的JavaScript库，用于构建用户界面，尤其是单页应用。其核心理念是组件化，即将UI拆分成独立可重用的部分，每个部分称为组件。本文将通过40行代码，不依赖任何额外库，讲解如何用纯JavaScript实现React的基础功能，帮助初学者理解组件化编程的精髓。首先，我们从一个简单的点赞功能开始。在HTML中，我们可以创建一个包含“点赞”文字和计数的按钮元素。这只是一个静态的HTML结构，我们需要添加JavaScript来赋予它交互性。如下： ```html <body> <div class='wrapper'> <button class='like-btn'> <span class='like-text'>点赞</span> <span>??</span> </button> </div> </body> ``` 接着，我们通过JavaScript选择按钮元素并监听点击事件，用变量`isLiked`记录点赞状态，根据状态切换按钮文字： ```javascript const button = document.querySelector('.like-btn'); const buttonText = button.querySelector('.like-text'); let isLiked = false; button.addEventListener('click', function() { isLiked = !isLiked; if (isLiked) { buttonText.innerHTML = '取消'; } else { buttonText.innerHTML = '点赞'; } }, false); ``` 现在，这个点赞按钮具有了基本的功能。然而，如果要复用这个功能，需要复制整个HTML和JavaScript代码，这显然不符合组件化的设计原则。在React中，我们可以将组件定义为一个函数或类，接受属性（props）并返回表示UI的JavaScript对象（JSX）。为了模拟React组件，我们可以封装当前的逻辑到一个名为`LikeButton`的函数中： ```javascript function LikeButton() { let isLiked = false; return { button: document.createElement('button'), init() { const btn = this.button; const text = document.createElement('span'); const count = document.createElement('span'); btn.classList.add('like-btn'); text.classList.add('like-text'); count.textContent = '??'; btn.appendChild(text); btn.appendChild(count); btn.addEventListener('click', () => { isLiked = !isLiked; text.innerHTML = isLiked ? '取消' : '点赞'; }, false); document.body.appendChild(btn); } }; } const likeBtn = new LikeButton(); likeBtn.init(); ``` 在这个简化版的React实现中，`LikeButton`函数创建了一个新的组件实例，包含了按钮的生成和事件绑定。通过`init`方法，我们可以将组件插入到DOM中。虽然这40行代码还不能完全模拟React的生命周期和状态管理，但它展示了React组件的基本思路：封装UI逻辑和数据，使其可复用。需要注意的是，这个简化的实现并不具备React的全部功能，例如状态提升、props传递、虚拟DOM等。在实际项目中，我们应当使用完整的React库，以充分利用其提供的高级特性。但是，这个例子可以帮助初学者理解React的组件化思想，为深入学习React奠定基础。

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

1、前言

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

本文的目的是：揭开对初学者看起来很很难理解的 React.js 的组件化形式的外衣。如果你刚开始学习 React.js 并且感觉很迷

茫，那么看完这篇文章以后就能够解除一些疑惑。

另外注意，本文所实现的代码只用于说明教学展示，并不适用于生产环境。代码托管这个仓库。心急如焚的同学可以先去看

代码，但本文会从最基础的内容开始解释。

2、一切从点赞说起

接下来所有的代码都会从一个基本的点赞功能开始演化，你会逐渐看到，文章代码慢慢地越来越像 React.js 的组件代码。而

在这个过程里面，大家需要只需要跟着文章的思路，就可以在代码的演化当中体会到组件化形式。

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

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

HTML:

<body>

</button>

</div>

</body>

为了现实当中的实际情况，所以这里特意把这个 button 的 HTML 结构搞得稍微复杂一些。有了这个 HTML 结构，现在就给它

加入一些 JavaScript 的行为：

JavaScript：

const button = document.querySelector('.like-btn')

const buttonText = button.querySelector('.like-text')

let isLiked = false

button.addEventListener('click', function () {

isLiked = !isLiked

if (isLiked) {

buttonText.innerHTML = '取消'

} else {

buttonText.innerHTML = '点赞'

}

}, false)

功能和实现都很简单，按钮已经可以提供点赞和取消点赞的功能。这时候你的同事跑过来了，说他很喜欢你的按钮，他也想用

你写的这个点赞功能。你就会发现这种实现方式很致命：你的同事要把整个 button 和里面的结构复制过去，还有整段

JavaScript 代码也要复制过去。这样的实现方式没有任何可复用性。

3、实现可复用性

所以现在我们来想办法解决这个问题，让这个点赞功能具有较好的可复用的效果，那么你的同事们就可以轻松自在地使用这个

点赞功能。

3.1 结构复用

现在我们来重新编写这个点赞功能。这次我们先写一个类，这个类有 render 方法，这个方法里面直接返回一个表示 HTML 结

构的字符串：

下载后可阅读完整内容，剩余5页未读，立即下载

weixin_38607088

粉丝: 5
资源: 920

40行代码理解React.js组件化

react下的react.min.js和react-dom.js

react下载,包括react.development.js;babel.min.js;react-dom.development.js

React.JS:React.JS练习

React.jsVideo:React.js-视频

kaushiknishchay.github.io:一个React.JS PWA，也具有代码拆分，延迟加载等

js代码-react.js相关

react.nim：Nim的React.js绑定

React.js

react:所有与react.js和react native相关的代码

react.js组件实现拖拽复制和可排序的示例代码

最新资源