React进阶

1.组件的拆分

实际开发中的网页是由许多的组件组成的，因此可以将实例中的文本框和按钮单独分为一个组件，显示列表为一个组件。
首先在src目录下，新建一个文件XiaojiejieItem.js，然后把基础架构搭建好：

import React, { Component } from 'react'; //快捷键imrc
class XiaojiejieItem  extends Component { //快捷键cc
    render() { 
        return ( 
            <div>小姐姐</div>
         );
    }
}
export default XiaojiejieItem;

XiaojiejieItem.js是子组件，因此需要在父组件中引入：

import XiaojijieItem from './XiaojiejiItem'

接着修改父组件：

<ul>
   {
        this.state.list.map((item,index)=>{
            return (
                <div>
                    <XiaojiejieItem /> //这里引入子组件
                </div>
            )
        })
    }
</ul>

2.父子组件的传值

1.父组件向子组件传值

虽然已经将组件进行了拆分，但是子组件XiaojiejieItem.js里面的值还是没有进行修改。这时候需要父组件给子组件传值。
方法：使用组件属性的形式父组件给子组件传值：

<XiaojiejieItem key={index+item} content={item} />
// key={index+item} 的目的就是防止浏览器出现警告

传过去的内容在子组件中通过this.props.xxx来接收：

import React, { Component } from 'react'; 
class XiaojiejieItem  extends Component { 
    render() { 
        return ( 
            <div>{this.props.content}</div>
         );
    }
}

export default XiaojiejieItem;

2.子组件向父组件传值

既然已经拆分了组件那么点击删除功能应该在子组件里实现，首先在子组件中绑定一个点击事件

import React, { Component } from 'react'; //imrc
class XiaojiejieItem  extends Component { //cc
    render() { 
        return ( 
            <div onClick={this.handleClick}>{this.props.content}</div>
         );
    }

    handleClick(){
        console.log('撩拨了小姐姐')
    }

}

export default XiaojiejieItem;

绑定成功后，现在就要通过操作子组件删除父组件里的数据了。但是React有明确规定，子组件时不能操作父组件里的数据的，所以需要借助一个父组件的方法，来修改父组件的内容。其实在以前已经写了一个删除方法deleteItem，现在要作的就是子组件调用这个方法。

要删除就要知道索引值，还是需要通过父组件传递给子组件.这里还是通过props属性的形式进行传递：

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

注意不要忘了bind(this)进行重新绑定：

return ( 
    <div onClick={this.handleClick.bind(this)}>
        {this.props.content}
    </div>
);

当然重新绑定也能够在构造函数中进行(构造函数中绑定性能会高一些，特别是在高级组件开发中，会有很大的作用)：

constructor(props){
   super(props)
   this.handleClick=this.handleClick.bind(this)
}

如果子组件要调用父组件方法，其实和传递数据差不多，只要在组件调用时，父组件把方法传递给子组件就可以了,记得这里也要进行this的绑定，如果不绑定，子组件是没办法找到这个父组件的方法的。

<ul>
    {
        this.state.list.map((item,index)=>{
            return (
                <XiaojiejieItem 
                key={index+item}  
                content={item}
                index={index}
                deleteItem={this.deleteItem.bind(this)} //传递方法
                />
            )
        })
    }
</ul>  

方法传递完了之后直接在子组件中就可以引用了：

handleClick(){
    this.props.deleteItem(this.props.index)
}

3.单项数据流和其它

1.单向数据流

React的特性中有一个概念叫做单项数据流，例如在父组件中有数据list，可以直接将它传递给子组件：

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

但是，这样传值有一个问题就是传到子组件的值只能显示无法修改，如果在子组件中的事件方法中去直接修改数据：

handleClick(){
    this.props.list=[]
    this.props.deleteItem(this.props.index)
}

就会报错：

TypeError: Cannot assign to read only property 'list' of object '#<Object>'

意思就是list是只读的，单项数据流。想要改变数据的话就需要传递父组件的方法。

2.React配合其它框架

React能和jquery等一起使用，React其实可以模块化和组件化开发。
在index.html中，React只对<div id="root"></div>进行了渲染操作，我们可以在其它地方写入另外的div标签等。

<div id="root"></div>
<div style="color:red">今天过的好开心，服务很满意！</div>

3.函数式编程

React框架采用的就是函数式编程，它的好处是：

• 函数式编程让我们的代码更清晰，每个功能都是一个函数方法(render()，constructor(props)，inputChange()，addList()，deleteItem())。
• 函数式编程为我们的代码测试代理了极大的方便，更容易实现前端自动化测试。