React学习笔记day01_react组件及jsx语法（React事件处理函数为什么要bind绑定this）

1.基本模板

import React,{Component} from 'react'

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

render(){
<span>lux </span>
}
}

export default TodoList

创建一个TodoList.js文件，按如上代码完成组件模板
（1）组件被创建的第一个时刻constructor被执行
（2）this.state定义组件的数据
（3）render（）渲染
在index.js文件里

import React from 'react'
import ReactDom from 'react-dom'
import TodoList from "./TodoList";

ReactDom.render(<TodoList/>, document.getElementById("root"))

完成组件在页面上的渲染

2.完整的组件

import React, {Component , Fragment } from 'react'
import './style.css'
class TodoList extends Component{
//组件被创建的第一个时刻constructor被执行
    constructor(props) {
        super(props);
        //1.提升性能
        this.handleInputChange = this.handleInputChange.bind(this)
        this.handleKeyUp = this.handleKeyUp.bind(this)
        //定义组件的数据
        this.state = {
            inputValue : '',
            list : []
        }

    }
    //2.换成函数管理
    handleInputChange(e){
        this.setState({
            inputValue: e.target.value
        })
    }
    handleKeyUp(e){
        if(e.keyCode === 13 && e.target.value !== '' ){
            const list = [...this.state.list, this.state.inputValue]

            this.setState({
                list,
                inputValue:''
            })
        }
    }
    handleItemClick(index){

        const list = [...this.state.list]
        list.splice(index,1)
        this.setState({
            list
        })
    }
    getListItems(){
        return  this.state.list.map((value,index) =>{
            //return () 可以写多行
            return(<li key = {index} onClick={this.handleItemClick.bind(this,index)}
                dangerouslySetInnerHTML={{__html :value}}>
            {/*  设置html标签里的内容为value不做转义  */}

            </li>)
        })

    }
    render() {
        return(
            <Fragment>
            {/*bind绑定当前this，即render的this，组件自身    */}
            <label htmlFor = 'myinput' >请输入内容</label>
            {/* 3.注意className和htmlFor*/}
            <input id = 'myinput'
                className='input' value= {this.state.inputValue}
            onChange = {this.handleInputChange}
            onKeyUp = {this.handleKeyUp}

            />

             {/*jsx语法中js变量/表达式外加花括号{}*/}
            <ul>
                {this.getListItems()}
            </ul>
            </Fragment>
    )
    }
}
//fragment 占位符
export default TodoList;

3.React事件处理函数为什么要bind绑定this

    getListItems(){
        return  this.state.list.map((value,index) =>{
            //return () 可以写多行
            return(<li key = {index} onClick={this.handleItemClick.bind(this,index)}
                dangerouslySetInnerHTML={{__html :value}}>
            {/*  设置html标签里的内容为value不做转义  */}

            </li>)
        })

    }

相当于调用者是onClick对应的’<li>'而不是当前的组件对象，类似于

let obj  = {
	name : lux,
    myfun: function(){
	console.log(this.name)
   }
}

let showname = obj.myfun

showname() // undefined 

所以通过bind改变this指向为组件对象，也就是当前getListTtems（）的this指向。（一般函数的this指向只有调用的时候才确定，在渲染时调用getListItems（），getListItems（）的指向是组件）

这样的效果是每次执行时都会进行一次bind生成一个新的函数，如果没有index的影响，可以在构造函数里只绑定一次this即可，提升性能。

 
        this.handleInputChange = this.handleInputChange.bind(this)
        this.handleKeyUp = this.handleKeyUp.bind(this)