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

0 下载量 174 浏览量 更新于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奠定基础。