React学习之路（二）JSX语法简介与实例练习

今天继续跟着胖哥学习。

首先，了解一下JSX

JSX就是Javascript和XML结合的一种格式。React发明了JSX，可以方便的利用HTML语法来创建虚拟DOM，当遇到<，JSX就当作HTML解析，遇到{就当JavaScript解析.可以在{}中写js语法

import React from 'react'
const Component = React.Component


class App extends Component{
    render(){
        return (
            <ul className="my-list">
                <li>{false?'react:'vue'}</li>
                <li>I love React</li>
            </ul>
        )
    }
}

export default App;

实例练习：先创建Xiaojiejie组件

import React,{Component} from 'react'

class Xiaojiejie extends Component{
    render(){
        return  (
            <div>
               <div><input /> <button> 增加服务 </button></div>
               <ul>
                   <li>头部按摩</li>
                   <li>精油推背</li>
               </ul> 
            </div>
        )
    }
}
export default Xiaojiejie 

响应式设计和数据的绑定

React不建议你直接操作DOM元素,而是要通过数据进行驱动，改变界面中的效果。React会根据数据的变化，自动的帮助你完成界面的改变。所以在写React代码时，你无需关注DOM相关的操作，只需要关注数据的操作就可以了（这也是React如此受欢迎的主要原因，大大加快了我们的开发速度）。

现在的需求是增加小姐姐的服务项，就需要先定义数据。数据定义在Xiaojiejie组件中的构造函数里constructor。this.state类似于vue中的data（）

通过以下方式将 props 传递到父类的构造函数中：  super(props)

    constructor(props) {
        super(props)
        this.state = {
            inputValue: '',
            list: ['基础按摩','精油推背']
        }
    }

这里有个知识点Fragment标签，render中一定要有标签包裹，但是在布局的时候div会影响布局效果，所以react出了一个Fragment标签。类似于vue的template标签。

在react中绑定数据几乎像vue一样绑定，使用{ }的形式，但说白了还是在JSX中使用js代码

<input value={this.state.inputValue} /> 

绑定事件： 

这时候你到界面的文本框中去输入值，是没有任何变化的，这是因为我们强制绑定了inputValue的值。如果要想改变，需要绑定响应事件，改变inputValue的值。比如绑定一个改变事件，这个事件执行inputChange()(当然这个方法还没有)方法。

<input value={this.state.inputValue} onChange={this.inputChange} />

//错误示例
inputChange(e){
    console.log(e.target.value);
    this.state.inputValue=e.target.value;
}

改变赋值的时候，不能像vue一样，但是像上面代码this.state.inputValue=e.target.value，这样是不行的。

其实我们范了两个错误：

1. 一个是this指向不对，你需要重新用bind设置一下指向(ES6的语法)。
2. 另一个是React中改变值需要使用this.setState方法。

第一个错误很好解决，直接再JSX部分，利用bind进行绑定就好。

 <input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />

这步做完，我们还需要加入setState方法，改变值。代码如下: 

inputChange(e){
    // console.log(e.target.value);
    // this.state.inputValue=e.target.value;
    this.setState({
        inputValue:e.target.value
    })
}

增加服务选项

要增加服务选项，我们需要再增加按钮上先绑定一个方法this.addList

 <button onClick={this.addlist.bind(this)}> {true ? '增加服务' : 'zengjiafuwu'} </button>

    // 增加列表
    addlist() { 
        this.setState({
            list:[...this.state.list,this.state.inputValue]
        })
    }

这里需要说的市...这个是ES6的新语法，叫做扩展运算符。意思就是把list数组进行了分解，形成了新的数组，然后再进行组合。这种写法更简单和直观，所以推荐这种写法。

写完上面的代码，应该就可以实现增加项目了，你可以试着增加一下自己喜欢的服务进去，比如"中药泡脚"........

这里有个问题，在循环列表的时候，如果不声明key的就会报错，在vue使用v-for的时候如果你不声明key也会报错的，

 <ul>
   {
    this.state.list.map((item,index)=>{
      return <li>{item}</li>
     })
   }
</ul>  

报错代码如下， 

解决key值错误

高兴的同时其实是有一些隐患的，打开浏览器的控制台F12,可以清楚的看到报错了。这个错误的大概意思就是缺少key值。就是在用map循环时，需要设置一个不同的值，这个时React的要求。我们可以暂时用index+item的形式来实现。 

<ul>
    {
        this.state.list.map((item,index) => { 
            return <li key={index+item} onClick={this.deleteItem.bind(this,index)}>{item}</li>
        })
    }
</ul>

删除服务选项

数组下标的传递

如果要删除一个东西，就要得到数组里的一个编号，这里指下标。传递下标就要有事件产生，先来绑定一个双击事件.代码如下:

<ul>
    {
        this.state.list.map((item,index)=>{
            return (
                <li 
                    key={index+item}
                    onClick={this.deleteItem.bind(this,index)}
                >
                    {item}
                </li>
            )
        })
    }
</ul>

正式删除数据

其实这里是有个坑的，按正常的操作可能是下面的这种

//删除单项服务错误示范xxxx
deleteItem(index){
    this.state.list.splice(index,1)
    this.setState({
        list:this.state.list
    }) 
}

react是不允许直接操作state的，虽然上面的方法也管用,但是在后期的性能优化上会有很多麻烦,所以一定不要这样操作.

//删除单项服务
deleteItem(index){
    let list = this.state.list
    list.splice(index,1)
    this.setState({
        list:list
    }) 
}

这样就可以实现服务菜单的增删功能了。去试试吧，下面为组件详细代码：

import React, { Component, Fragment } from 'react';
class Xiaojiejie extends Component {
    constructor(props) {
        super(props)
        this.state = {
            inputValue: '',
            list: ['基础按摩','精油推背']
        }
    }
    render() {
        return (
            <Fragment>
                <div className="list-item">
                    <input value={this.state.inputValue} onChange={this.inputChange.bind(this)}/>
                    <button onClick={this.addlist.bind(this)}> {true ? '增加服务' : 'zengjiafuwu'} </button>
                </div>
                <ul>
                    {
                        this.state.list.map((item,index) => { 
                            return <li key={index+item} onClick={this.deleteItem.bind(this,index)}>{item}</li>
                        })
                    }
                </ul>
            </Fragment>
        )
    }
    // 绑定input的value
    inputChange(e) { 
        this.setState({
            inputValue:e.target.value
        })
    }
    // 增加列表
    addlist() { 
        this.setState({
            list:[...this.state.list,this.state.inputValue]
        })
    }
    // 删除列表
    deleteItem(index) { 
        let list = this.state.list;
        list.splice(index, 1)
        this.setState({
            list:list
        })
    }
}
export default Xiaojiejie;