走近React的第一天（一个简单的TodoList例子）

前言

React.js是一个专注于构建视图层的JavaScript库，使用它你可以非常轻松地创建你需要的用户交互界面。为你应用的每一个状态设计简洁的视图，在数据改变时 React 也可以高效地更新渲染界面。本文仅仅只是帮组自己跟React初学者进一步的去理解学习React内部实现原理并记录的过程，对于React的具体学习教程可参考React中文网,这里就不过多的赘述了。

目标

这一章的目标是实现一个动态增减列表的ToDoList实例。

先上效果图

显示效果图

我相信有一定基础的前端coder对于实现这个效果都是顺手拈来的。

html部分

对页面结构添加一定的 HTML 结构

Block
1
2
3
4
5
<div id="root">
    <button id='add'>增加一条</button>
    <button id='reduce'>减少一条</button>
    <ul id='list' ></ul>
</div>

js部分

加入以下JavaScript的Dom操作

Block
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const UL=document.getElementById('list');
const add= document.getElementById('add');
const reduce= document.getElementById('reduce');
let num=0;
let Arr=[];
add.addEventListener('click',()=>{
    let OL=document.createElement("ol");
    let TEXT=document.createTextNode(`这里是我第${num+1}条需要做的`);
    OL.appendChild(TEXT);
    UL.appendChild(OL)
    num++;     
})
reduce.addEventListener('click',()=>{    
    if(UL.children.length){
        UL.removeChild(UL.children[UL.children.length-1]);
        num--;
    }
})

功能和实现都很简单，到这里实例已经可以简单的实现List的增加和减少了。

毫无疑问这样的代码可谓是言简意赅，很容易就能看懂每一段代码的具体目的，但是这样的代码在开发过程中的效率是很低的，没有什么复用性。如果这个时候PM过来找你说，’咱们现在不做ToDoList了，我们来做一个点赞评价模块‘，那么很不幸这块代码可能就需要全部推翻重写，对于咱们码农来说这样又平白无故的增加了不少工作量。那么我们能不能去把这些代码去抽离一下呢？客官别急，咱们后续慢慢看来！示例源码