一、React应用的架构图

顶层组件.png

二、组件通信的实现

首先，组件通信只能实现上下两层组件的直接通信，如果不是上下两层组件之间的通信,需要不断的进行信息传递，间接通信

• 父组件向子组件发送信息
  父组件通过组件属性向子组件发送信息，子组件通过props接收

  • 父组件发送

  <TodoItem 
          key = {index}
          content = {curValue}
          index = {index}
          deleteList = {this.deleteList}
  /> 
  

  值得注意的是，父组件传递方法给子组件，应该先将方法的this绑定到父组件自身。这个是避免事件调用时，方法的this为undefined。

  • 子组件接收

  <li onClick={this.props.deleteList}>{this.props.content}</li>
  

  这里值得注意的是，onClick中不能写成{this.deleteItem(this.props.index)}，onClick的值要是函数，不是函数调用

• 子组件向父组件发送操作信息
  子组件不能直接修改父组件传递过来的数据，而是使用父组件传递过来的方法间接修改父组件的数据

  • 子组件修改父组件的数据

  deleteItem(){
        const {deleteList, index} = this.props
        deleteList(index)
  }
  

  子组件通过调用父组件传递过来的deleteList方法，修改父组件中的数据，从而实现deleteItem方法

三、React的特点

react的特点：
1.声明式开发 ： 创建数据（图纸），让react完成dom的操作和页面的渲染
2.可以与其它框架并存 ： 只管理页面其中的一部分，比如<div id='root'></div>
3.组件化
4.单项数据流 子组件不能修改父组件数据
5.视图层框架 --> 如果通信线路复杂，会‘奔溃’的，所以要数据层框架的帮助
6.函数式编程 --> 清晰简单，便于前端自动化测试