通过 state 做 input 数据管理

通过 event.target.value 获取input的值

通过 setState 更新 input 数据

通过 input的value绑定 state的值

｜ value={this.state.inputValue}

新增完后清空 input的值

｜ this.setState({inputValue: '' })

import React from 'react'

class TodoList extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      list:[],
      inputValue: '',
    }
  }

  handleBtnClick(){
    this.setState({
      list:[...this.state.list, this.state.inputValue],
      inputValue: ''
    })
  }
  handleInputChange(e){
    this.setState({
      inputValue: e.target.value
    })
  }

  render(){
    return (
      <div>
        <div>
          <input value={this.state.inputValue} onChange={this.handleInputChange.bind(this)}  />
          <button onClick={this.handleBtnClick.bind(this)}>添加</button>
        </div>
        <ul>
          {this.state.list.map((item, index)=>{
            return (<li key={index}>{item}</li>)
          })}
        </ul>
      </div>
    )
  }
}

export default TodoList;

编写TodoList功能

    将 App组件 改成TodoList

        App文件重命名为 Todolist

        类名改成Todolist， 导出 Todolsit

        index.js 引入 Todolist

    render 返回的最外层不能多兄弟标签

    事件名称使用小驼峰命名

    类里面方法中的this默认指向方法而不是类，所以需要对this做绑定

    不能直接赋值 state，而是通过 setState()

    ...arr 数组展开运算符，可以用于追加内容

    ｜ [...this.state.list, 'english']

简单的JSX语法

    可以用标签结构的代码

    ｜ <div>Hello</div>

    可以写JS表达式

    ｜ {1+1}

什么是组件

    从网页的角度理解

        组件是网页组成的一部分

    React是一个基于组件开发的框架

        组件用大写字母开头

        react-dom 用于挂载DOM

        ｜ ReactDOM.createRoot(document.getElementById('root'))

        ｜ #root 的div在 public/index.html 中

    App.js 是一个组件

        组件中必须有一个 render()

            里面必须有 return 

        export和import 配对使用

脚手架创建的代码介绍

    index.js    →  入口

        引入 App.js 

可精简文件

    reportWebVitals   →  报错文件

    index.css    →  样式文件

    App.test.js    →  自动化测试用的

    App.css    →  演示的样式文件

    logo.svg    →  Logo图片

nodeJs安装

    nodeJs官网

    LTS 稳定版本

    ｜ Long Term Support

    Current 最新版本

    检查nodeJs版本

        node -v

    检查 npm 版本

        npm -v

React 安装

    Creact React APP 脚手架工具

        npx create-react-app todoList    →  会创建todoList文件夹

        cd todoList    →  进入文件夹

        npm start    →  运行项目

React应用场景

• React JS   →  网页

  React Native →  手机APP

• React VR   →  VR全景视图

React Fiber

• React 16之后的版本

• 新特性：优先级、分片
  

子组件如果想和父组件通信，要调用父组件传递过来的方法

父组件通过属性的形式向子组件传递参数

子组件通过props接收父组件传递过来的参数

React开发环境搭建

--------------------------

【1】安装 nodejs （官网：LTS版本）

【2】安装 create-react-app  （官网：docs 右侧）

【3】在目录通过命令创建项目：cra XXXXX

【4】运行项目 npm start

父组件通过属性的形式向子组件传参

子组件通过props接收父组件传递过来的参数

子组件通过调用父组件传递过来的方法实现与父组件的通信

创建子组件

import {Component} from 'react'
class TodoItem extends Component{
      constructor(props){
          //优化
          this.itemDel = this.itemDel.bind(this)
      }
      itemDel(){
          this.props.itemDel()
          
          //const { itemDel } = this.props
          //itemDel()
      }
    
    render(){
        const { content } = this.props //结构赋值
        return(
          <div onClick={this.itemDel}>
            {content}
        </div>
      )
    }
}

export default TodoItem

父组件引入子组件

import {Component,Fragment} from 'react'
import TodoItem from './TodoItem'

itemDel(index){
    let list=[...this.state.list]
    list.splice(index,1)
    this.setState({list})
}

getTodoItems(){
    return(
        this.state.list.map((item,index) => {
            return (
                <TodoItem 
                    key={index} 
                    content={item} 
                    itemDel={this.itemDel.bind(this,index)}
                />
            )
        }
    )
}

render(){
    return(
        <Fragment>
            <div>
                <input className='input-style' value={this.state.inputVal} onChange={this.inputChange}/>
                <button style={{background:'blue',color:'#fff'}} onClick={this.butClick}>add</button>
            </div> 
            <ul>{this.getTodoItems()}</ul>
        </Fragment>
    )
}

//函数组件写法

const ToDoList=()=> {
    const [val,setVal] = useState('')
    const [list,setList] = useState([])
   
    const butClick=()=>{
      setList([...list,val])
      setVal('')
    }
    const inputChange=(e)=>{
      setVal(e.target.value)
    }
    const itemDel=(e)=>{
      let newList=list
      let i=e.target.dataset.inx
      newList.splice(i,1)
      setList([...newList])
    }
    useEffect(()=>{
      console.log(list)
    },[list])
    
  return (
    <div className="ToDoList">
      <div>
        <input value={val} onChange={inputChange} />
        <button onClick={butClick}>add</button>
      </div>
      <ul>
        {
          list.map((item,index)=>{
            return <li key={index} data-inx={index} onClick={itemDel}>{item}</li>
          })
          //其他传参方式 这两种每次组件渲染时会创建一个新的函数影响性能
          //箭头函数 onClick={()=>itemDel(index)}  绑定 onClick={itemDel.bind(this,index)}
        }
      </ul>
    </div>
  );
}

React面向数据编程，自动处理DOM

class组件

constructor(props){ //组件创建时自动执行
    super(props); //初始化
    this.state = { //创建state对象
        list:[],
        inputVal:''
    }
    
    //优化
    this.inputChange = this.inputChange.bind(this)
    this.butClick = this.butClick.bind(this)
    
}

btnClick() {//增加
    this.setState({//改变state数据
        list: [...this.state.list,this.state.inputVal],
        inputVal:''
    })
}

inputChange(e) {//输入框内容
    this.setState({
        inputVal: e.target.value
    })
}

itemDel(index){//删除
    let list=[...this.state.list]
    list.splice(index,1)
    this.setState({list})
}

//DOM
render(){
    return(
        <div>
            <div>
                <input value={this.state.inputVal} onChange={this.inputChange}/>
                <button onClick={this.butClick}>add</button>
            </div> 
            <ul>
                {
                    this.state.list.map((item,index) => {  //循环list
                        return <li key={index} onClick={this.itemDel.bind(this,index)}>{item}</li>
                    })
                }
            </ul>
        </div>
    )
}

JSX语法

是一种JavaScript语法扩展，在React中可以方便地用来描述UI

在JSX中插入JavaScript表达式： {JS表达式}

JS表达式就是一个短语，常用的表达式有：

常量

变量名；

函数定义表达式；

属性访问表达式；

函数调用表达式；

算数表达式；

关系表达式；

逻辑表达式；

if语句以及for循环不是JavaScript表达式，不能直接作为表达式写在{}中，但可以先将其赋值给一个变量

React基于组件开发

用户定义的组件必须以大写字母开头

以小写字母开头的元素代表一个 HTML 内置组件
比如 <div> 或者 <span> 会生成相应的字符串 'div'或者 'span' 传递给 React.createElement（作为参数）。

ReactDOM将组件挂载到页面dom节点上，渲染dom

ReactDOM.render(<App />,document.getElementById('root'));

定义React组件

class 组件名  extends  Component{
    render(){                       //必有函数，负责要显示的内容
        return(
             //要显示的内容
         ）； 
     }}

新版

function App() {
  return (
  
  );
}
export default App;