＜React＞前端框架教你用五十多行写一个简单的todolist

最新推荐文章于 2025-05-29 15:55:56 发布

原创最新推荐文章于 2025-05-29 15:55:56 发布 · 889 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #前端框架 #javascript

本文介绍了基于React的前端应用开发，包括输入框事件处理、动态添加删除列表项功能，并展示了相关代码。作者强调了React简化组件化开发的优势，以及前端框架如何整合HTML、CSS和JavaScript。文章还探讨了前端在用户交互、数据反馈和个性化推荐中的角色，并以淘宝为例解释了成熟平台的运作方式。

一.先上结果介绍功能

1.在文本框上输入自己的信息

2.点按按钮可以增加事件和删除事件

3.每完成一件事件可以会弹出剩余多少件事情的窗口

4.没有事件或完成的时候会弹出提示语

二.代码展示：

import React, { Component } from 'react'

export default class App extends Component {
    myRef = React.createRef();
    state = {
        list:[{
            id:1,
            mytext:"年薪没1W"
        },
        {
            id:2,
            mytext:"还是搬砖去吧"
        },{
            id:3,
            mytext:"别来敲代码"
        }]

    }

在类里面创建对象将对象中的键值对预先创建好

添加信息后指定id为健而myText为值，方便后续增加和删除的标记

render() {
      
    return (
      <div className="tdContainer">
          <input ref={this.myRef}/>
          <button  onClick={()=>{
              
            this.BtnOnclick();
          }}>add1</button>
          <ul>
              {
                this.state.list.map((item,index) =><li key={item.id}>{item.mytext}
                <button onClick={()=>{
                    this.BtnDelOnClick(index)
                }}>del</button></li>)
              }
          </ul>
          <h1 className={this.state.list.length===0?"visible":"hidden"}>
              嗯，是不是还得干点什么
          </h1>
      </div>
    )
  }

利用render进行渲染，整体结构很简单，输入文本，取值，将文本信息提取，按钮

这里在button中利用了jsx的语法内容（即在js程序里面写入html的代码，利用箭头可以保持函数作用域与外界对应作用域相同，极大地解决了this关键字指向不明的问题）（es6新特性）

根据索引的增减自动增减按钮，方便事件完成后点按不同的按钮来结束一件事情

在事件清空后，会显示列表已空，加入事情后字会消失

利用了三目运算符，利用改变类名名字切换样式display的属性

<h1 className={this.state.list.length===0?"visible":"hidden"}>

.hidden{
    display: none;
}

事件完成一件后，会弹出弹窗，代表还有几件事情没有完成。。

  BtnOnclick(){
      
      console.log("点按按钮",this.myRef.current.value);
      let newlist = [...this.state.list];
      newlist.push({
          id:Math.random()*1000000,
          mytext:this.myRef.current.value
      })
      this.setState({
          list:newlist
      }
      ) 
      this.myRef.current.value = ""
  }
  BtnDelOnClick(index){
    
    console.log("click",index)
    let newlist = this.state.list.concat()
    newlist.splice(index,1)
    var out = "你还有"+newlist.length+"件事情未完成,加油!"
    this.setState({list:newlist})
    alert(out)
  }
}

想说的话

个人理解的前端：和用户进行交互的图形化界面，从用户角度设计出符合用户点按界面，从而引导用户进行操作，最后将数据反馈到后端。

前端框架并不高深也并不难，只是将你学的三大件汇聚成一个更简单的模块，让设计模块化后根据组件调整好相应的位置

常用的前端框架有:Node React Vue Angular 这些后面都有一个.js，说明js是一个比较重要的交互文件，里面同时也可以设计插入html和设计css的方法，将组件独立化而不分开，例如之前学的html是一个房子的骨架，css是房子的布局和色彩，js是进入房子后给人的感受，那么react一定是成型的毛胚房子，至于房间的布局，你可以根据客户的需求去更改和变换

总的来说:有了框架，你的开发会变得更简单。

成熟的公司就是有相对稳定的员工进行分工处理代码，前端负责写交互，后端负责收集数据，通过算法分析出用户的使用习惯调整前端，最后公司依据收集的数据进行针对性的提问，让每个用户都有一个个性化的数据，最后销售人员根据这些个性化推荐相似的商品。这就是成熟淘宝的简单运作方式。

太久没更新博客了，又是随缘一更