响应式设计思想和事件绑定

React与以往框架不同，它是一个响应式的框架，它在做编程的时候，强调的是操作数据而不是dom，通过数据的变化，React会自动感知到数据的变化，自动的帮你生成dom.

所以在写react的时候，我们再也不用关注dom的操作了，我们只需关注数据层的操组即可。

拿todolist来说，需要多少数据呢？

只需要2个，一个存储input里面的值，一个存储list列表

react事件和与原生js一样，只不过第二个单词的字母要大写，如原生绑定onclick,onchange到react就变成onClick,onChange, 即事件名称的首字母要大写

• onClick
• onChange

react如何定义数据

todoList是一个组件，或者说是一个类，那么每一个类中都有一个constructor的函数，当我们在创建类的实例的时候constructor,是第一个被执行的函数，所以我们可以把数据的初始化工作放在constructor里面。 constructor的写法比较固定：

constructor(props){
    super(props); //super指的是父类，这里也就是React.Componet,先调用一次父类的构造函数
    //state存储组件的数据
    this.state={
        inputValue:"",
        list:[]
    }
}

访问组件数据

注意{}表示的是一个js表达式

this.state.inputValue
this.state.list

改变组件数据

必须调用setState方法

//同步
this.setState({
    inputValue : "",
    list:[...this.state.list,this.state.inputValue]
})
//异步1
this.setState(()=>({
    inputValue : "",
}))
//异步2
this.setState((prevState)=>({
    inputValue:"",
    list:[...prevState.list,prevState.inputValue]
}))

react定义方法

import React from 'react';
import { Component, Fragment } from 'react' //Fragment占位符，大写字母开头，它本质是一个组件

class TodoList extends Component{
    constructor(props){
        super(props)
        this.state={
            inputValue:"",
            list:[]
        }
    }
    render(){
        return (
            <Fragment>
                   <input 
                   type="text" 
                   value={this.state.inputValue} 
                   onChange={this.handleInputChange.bind(this)}
                   //通过绑定组件的this来改变函数的this指向，实际改变作用域
                   //如果这里不绑定this（this.handleInputChange），通过console.log(this)你将得到undifined 
                   /> <button>提交</button>
            <ul>
                <li>apple</li>
                <li>pear</li>
            </ul>
            </Fragment>
        )
    }
    handleInputChange(e){ //handleInputChange 可以接收一个event参数，
        this.setState({
            inputValue:e.target.value //e.target是一个dom元素
            // list:[list...,e.target.value]
        })
    }
}

export default TodoList;