react(todoList)

最新推荐文章于 2024-06-10 19:12:00 发布

zenkle

最新推荐文章于 2024-06-10 19:12:00 发布

阅读量106

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/qq_35142645/article/details/103081935

版权

本文探讨了React的核心概念，包括组件化管理、jsx语法、state和setState的使用。详细阐述了如何通过父子组件传值实现功能，并介绍了结合Redux管理应用状态的流程，包括actionCreator、reducer和store的角色。

摘要由CSDN通过智能技术生成

react主要是组件化管理，写法上都是使用jsx，将代码渲染到页面上也是通过render函数，通过虚拟dom的patch将vNode渲染到页面上

1、首次创建todoList:

state:state相当于vue中的data，通过操作state来更新界面数据
setState:没有办法实现vue的响应式，通过setState手动更改state数据状态
this指向:需要搞清楚this到底指向的是哪个作用域以及箭头函数this指向
封装后的组件需要export导出将其暴露（export default导出import引入无需添加{}）
组件{Component}或者React.Component,组件名必须要大写

import React,{Component} from 'react';
class App extends Component {
  constructor(){
    super();   
   this.state={
    list:['123','456'],
    inputValue:''
   }
  }
  buttonClick(){
    this.setState({
      list:[...this.state.list,this.state.inputValue],
      inputValue:''
    })  
  }
  inputChange(e){
    this.setState({
      inputValue:e.target.value
    })
  }
  handleDelete(index){
   const list=[...this.state.list]
   list.splice(index,1)
   this.setState({
    list:list
   })
  }
  render(){
    return (
      <div >
        <input value={this.state.inputValue} onChange={this.inputChange.bind(this)}></input>
        <button onClick={this.buttonClick.bind(this)}>提交</button>
        <ul>
          {
            this.state.list.map((item,index)=>{
              return (<li onClick={this.handleDelete.bind(this,index)} key={index}>{item