React实例(三)

一. React 实例

新建小姐姐组件

现在src的目录下面，新建一个文件Xiaojiejie.js文件，然后写一个基本的HTML结构。代码如下：

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 

这个文件现在还没有什么功能，只是写完了一个小组件。然后我们把入口文件的组件换成Xiajiejie组件。

1.1 组件外层包裹原则

这是一个很重要的原则，比如上面的代码，我们去掉最外层的<Div>，就回报错，因为React要求必须在一个组件的最外层进行包裹。

错误代码(因为外边少了最外层的包裹):

import React,{Component} from 'react'

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

所以我们在写一个组件的时候，组件的最外层都需要有一个包裹。

1.2 Fragment标签讲解

加上最外层的DIV，组件就是完全正常的，但是你的布局就偏不需要这个最外层的标签怎么办?比如我们在作Flex布局的时候,外层还真的不能有包裹元素。这种矛盾其实React16已经有所考虑了，为我们准备了<Fragment>标签。

要想使用<Fragment>，需要先进行引入。

import React,{Component,Fragment } from 'react'

然后把最外层的<div>标签，换成<Fragment>标签，代码如下。

import React,{Component,Fragment } from 'react'

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

这时候你再去浏览器的Elements中查看，就回发现已经没有外层的包裹了。

二. React中的响应式设计原理和数据的绑定方法

2.1 响应式设计和数据的绑定

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

现在的需求是增加小姐姐的服务项，就需要先定义数据。数据定义在XiaoJieJie组件中的构造函数里constructor。

//js的构造函数，由于其他任何函数执行
constructor(props){
    super(props) //调用父类的构造函数，固定写法
    this.state={
        inputValue:'' , // input中的值
        list:[]    //服务列表
    }
}

在React中的数据绑定和Vue中几乎一样，也是采用字面量(我自己起的名字)的形式，就是使用{ }来标注，其实这也算是js代码的一种声明。比如现在我们要把inputValue值绑定到input框中，只要写入下面的代码就可以了。其实说白了就是在JSX中使用js代码。

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

现在需要看一下是不是可以实现绑定效果，所以把inputValue赋予一个’Benjamin’，然后预览看一下效果。在这里我们并没有进行任何的DOM操作，但是界面已经发生了变化，这些都是React帮我们作的，它还会自动感知数据的变化。

2.2 绑定事件

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

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

现在还没有inputChange()这个方法，在render()方法的下面建立一个inputChange()方法，代码如下：

inputChange(e){
    console.log(e);
}

这时候会发现响应事件可以使用了，但是如何获得我们输入的值那，程序中输入下面的代码。

inputChange(e){
    console.log(e.target.value);
}

这时候控制台是可以打印出输入的值的，视频中会有演示。看到获得了输入的值，想当然的认为直接改变inputValue的值就可以了(错的)。

inputChange(e){
    console.log(e.target.value);
    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
    })
}

三. 让数据动起来(添加数据)

3.1 让列表动态显示

现在的列表还是写死的三个<li>标签，那要变成动态显示的，就需要把这个列表先进行数据化，然后再用javascript代码，循环在页面上。

我们先给上节课的list数组增加两个数组元素，代码如下：

constructor(props) {
        super(props);
        this.state = {
            inputValue: '',
            list: ['aaaa', 'bbbb', 'cccc']
        }
    }

有了数据后，可以在JSX部分进行循环输出，代码如下：

render() {
        return (
            <Fragment>
                <input value={this.state.inputValue} onChange={this.changeInput.bind(this)}/> 
                <button style={{backgroundColor: 'red',width: 50}} onClick={this.addList.bind(this)}>增加</button>
                <ul>
                    {
                        this.state.list.map((item,index) => {
                            return (
                                <li key={index}>{item}</li>
                            )
                        })
                    }
                </ul>
            </Fragment>
        )
    }
    

完成上面的步骤，数据就不再是固定的了，而是动态管理的，也为我们接下来的添加打下了基础，剩下的步骤也显得很简单了。

3.2 增加服务选项

要增加服务选项，我们需要再增加按钮上先绑定一个方法this.addList(这个方法目前还没有，需要我们接下来建立)。

<button onClick={this.addList.bind(this)}> 增加服务 </button>

接下来就是创建this.addList方法，代码如下：

//增加服务的按钮响应方法
addList(){
    this.setState({
        list:[...this.state.list,this.state.inputValue]
    })
}

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

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

3.3 解决key值错误

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

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

这样就解决了这个隐患

四. 让数据动起来(删除数据)

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

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

为了看着更清晰，我们在return部分加了()这样就可以换行编写JSX代码了。 在onClick我们绑定了deleteItem方法。

4.1 编写deleteItem方法

//删除单项服务
deleteItem(index){
    console.log(index)
}

这时候可以预览一下啊,已经在方法里获取到了下标。

正式删除数据

获得了数据下标后,删除数据就变的容易起来。先声明一个局部变量,然后利用传递过来的下标。 删除数组中的值，删除后用setState更新数据就可以了。

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

其实这里边是有一个坑的,有的小伙伴肯定会认为下面的代码也是正确的。

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

记住React是禁止直接操作state的,虽然上面的方法也管用,但是在后期的性能优化上会有很多麻烦,所以一定不要这样操作.这也算是我React初期踩的比较深的一个坑,希望小伙伴们可以跳坑。