react组件之间传递信息/react组件之间值的传递

react组件之间传递信息/react组件之间值的传递

首先咱们先来了解一下，数据是怎么进行相互间传递的;
api和组件的区别：一个是逻辑层的方法函数，一个是表现层的组件（方法函数）。
api是一组预先定义好的函数，调用其实是调用其中的函数方法。
组件调用是直接表现在页面上。
SDK 就是 Software Development Kit 的缩写，中文意思就是“软件开发工具包”
什么是SDK？
SDK相当于开发集成工具环境，API就是数据接口。在SDK环境下调用API数据，实际上SDK包含了API的定义，API定义了一种能力，一种接口的规范，而SDK可以包含这种能力、包含这种规范。但是SDK又不完完全全只包含API以及API的实现，它是一个软件工具包，它还有很多其他辅助性的功能。
接下来说一说API和SDK之间的区别
API
API是前端调用后端数据的一个通道，就是我们俗说的接口，通过这个接口，可以访问到后端的数据，但是又无需调用源代码。
SDK
SDK是工程师为辅助开发某类软件的相关文档、范例和工具的集合，使用SDK可以提高开发效率，更简单的接入某个功能。
举例说明：一个产品想实现某个功能，可以找到相关的SDK，工程师直接接入SDK，就不用再重新开发了。

**1.组件 API中有以下7个方法:**

设置状态：setState
替换状态：replaceState
设置属性：setProps
替换属性：replaceProps
强制更新：forceUpdate
获取DOM节点：findDOMNode
判断组件挂载状态：isMounted

设置状态：setState： setState(object nextState[, function callback])
参数说明：nextState：将要设置的新状态，该状态会和当前的state合并。
callback：可选参数（可选的，不常用），回调函数，该函数会在state设置成功且组件重新渲染后调用
注意：不能在组件内部通过this.state修改状态，因为该状态会在调用setState()后被替换，setState()总是会触发一次组件重绘。

组件之间传递信息方式，总体可分为以下5种：

react重要的思想就是组件化思想。
它将可以重用的部分进行组件化开发，形成一个个相对独立的组件，那么组件化后,各个组件间需要通信，组件可以将UI切分成一些独立的、可复用的部件，这样你就只需专注于构建每一个单独的部件。
组件从概念上看就像是函数，它可以接收任意的输入值（称之为“props”），并返回一个需要在页面上展示的React元素
1.（父组件）向（子组件）传递信息
2.（父组件）向更深层的（子组件） 进行传递信息 >>利用（context）
3.（子组件）向（父组件）传递信息
4.没有任何嵌套关系的组件之间传值（比如：兄弟组件之间传值）
5.利用react-redux进行组件之间的状态信息共享（这个放在下次讲，太多了）

一.（父组件）向（子组件）传递信息 >>>主要是通过 prop进行传值

.

//父组件
var MyContainer = React.createClass({
  getInitialState: function () {
    return {
      checked: false
    };
  },
  render: function() {
    return (
      <ToggleButton text="Toggle me" checked={this.state.checked} />
    );
  }
});
// 子组件
var ToggleButton = React.createClass({
  render: function () {
    // 从（父组件）获取的值
    var checked = this.props.checked,
        text = this.props.text;
    return (
        <label>{text}: <input type="checkbox" checked={checked} /></label>
    );
  }
});

以上这个例子，子组件通过 prop拿到了text值以及checked的属性值；那么当子组件要拿到祖父级组件的信息，也是可以通过prop进行逐层的获取。来看下下面的例子。

var Button = React.createClass({
  render: function() {
    return (
      <button style={{background: this.props.color}}>
        {this.props.children}
      </button>
    );
  }
});
var Message = React.createClass({
  render: function() {
    return (
      <div>
        {this.props.text} <Button color={this.props.color}>Delete</Button>
      </div>
    );
  }
});
var MessageList = React.createClass({
  render: function() {
    var color = "purple";
    var children = this.props.messages.map(function(message) {
      return <Message text={message.text} color={color} />;
    });
    return <div>{children}</div>;
  }
});

以上的例子中第一层组件（MessageList）想要将color值传递到第三层组件（Button），通过第二层组件（Message）进行了传递。进而实现了第一层往第三层传递。但是这种方式，并不是很优雅，如果传递的层级更多时，中间的层级都需要来传递，数据的传递变的更加繁琐。所以我们就会想到，是否可以"越级"获取数据。这时候就需要使用context。能帮你 “越级” 传递数据到组件中你想传递到的深层次组件中。

二.（父组件）向更深层的（子组件） 进行传递信息

利用（context）进行更深层次的传递。

var Button = React.createClass({
  // 必须指定context的数据类型
  contextTypes: {
    color: React.PropTypes.string
  },
  render: function() {
    return (
      <button style={{background: this.context.color}}>
        {this.props.children}
      </button>
    );
  }
});
var Message = React.createClass({
  render: function() {
    return (
      <div>
        {this.props.text} <Button>Delete</Button>
      </div>
    );
  }
});
var MessageList = React.createClass({
  //父组件要定义 childContextTypes 和 getChildContext() 
  childContextTypes: {
    color: React.PropTypes.string
  },
  getChildContext: function() {
    return {color: "purple"};
  },
  render: function() {
    var children = this.props.messages.map(function(message) {
      return <Message text={message.text} />;
    });
    return <div>{children}</div>;
  }
});

以上代码中通过添加 childContextTypes 和 getChildContext() 到 第一层组件MessageList （ context 的提供者），React 自动向下传递数据然后在组件中的任意组件（也就是说任意子组件，在此示例代码中也就是 Button ）都能通过定义 contextTypes（必须指定context的数据类型） 访问 context 中的数据。这样就不需要通过第二层组件进行传递了。
指定数据并要将数据传递下去的父组件要定义 childContextTypes 和 getChildContext() ；想要接收到数据的子组件必须定义 contextTypes 来使用传递过来的 context 。

三.（子组件）向（父组件）传递信息

直接上代码

// 父组件
var MyContainer = React.createClass({
  getInitialState: function () {
    return {
      checked: false
    };
  },
  onChildChanged: function (newState) {
    this.setState({
      checked: newState
    });
  },
  render: function() {
    var isChecked = this.state.checked ? 'yes' : 'no';
    return (
      <div>
        <div>Are you checked: {isChecked}</div>
        <ToggleButton text="Toggle me"
          initialChecked={this.state.checked}
          callbackParent={this.onChildChanged}
          />
      </div>
    );
  }
});
// 子组件
var ToggleButton = React.createClass({
  getInitialState: function () {
    return {
      checked: this.props.initialChecked
    };
  },
  onTextChange: function () {
    var newState = !this.state.checked;
    this.setState({
      checked: newState
    });
    //这里将子组件的信息传递给了父组件
    this.props.callbackParent(newState);
  },
  render: function () {
    // 从（父组件）获取的值
    var text = this.props.text;
    // 组件自身的状态数据
    var checked = this.state.checked;
		//onchange 事件用于单选框与复选框改变后触发的事件。
    return (
        <label>
        {text}: <input type="checkbox" checked={checked} onChange={this.onTextChange} />
        </label>
    );
  }
});

以上例子中，在父组件绑定callbackParent={this.onChildChanged}，在子组件利用this.props.callbackParent(newState),触发了父级的的this.onChildChanged方法，进而将子组件的数据（newState）传递到了父组件。
这样做其实是依赖 props 来传递事件的引用，并通过回调的方式来实现的。

四.兄弟组件之间传值 （组件之间没有任何嵌套关系的传值）

想一想，如果组件之间没有任何嵌套关系，组件嵌套层次比较深，我们该怎样去处理各个组件中的值的传递呢？
这就需要我们引入一个PubSubJS 库，通过这个库你可以订阅的信息，发布消息以及消息退订。
// 定义一个容器（将ProductSelection和Product组件放在一个容器中）

var ProductList = React.createClass({
    render: function () {
      return (
        <div>
          <ProductSelection />
          <Product name="product 1" />
          <Product name="product 2" />
          <Product name="product 3" />
        </div>
      );
    }
});
// 用于展示点击的产品信息容器
var ProductSelection = React.createClass({
  getInitialState: function() {
    return {
      selection: 'none'
    };
  },
  componentDidMount: function () {
  	//通过PubSub库订阅一个信息
    this.pubsub_token = PubSub.subscribe('products', function (topic, product) {
      this.setState({
        selection: product
      });
    }.bind(this));
  },
  componentWillUnmount: function () {
  	//当组件将要卸载的时候，退订信息
    PubSub.unsubscribe(this.pubsub_token);
  },
  render: function () {
    return (
      <p>你已经选择了这个产品 : {this.state.selection}</p>
    );
  }
});
var Product = React.createClass({
  onclick: function () {
  	//通过PubSub库发布信息
    PubSub.publish('products', this.props.name);
  },
  render: function() {
    return <div onClick={this.onclick}>{this.props.name}</div>;
  }
});

ProductSelection和Product本身是没有嵌套关系的，而是兄弟层级的关系。但通过在ProductSelection组件中订阅一个消息，在Product组件中又发布了这个消息，使得两个组件又产生了联系，进行传递的信息。

五.利用react-redux进行组件之间的状态信息共享

提到redux的话，像基本的三个元素action，reducer，store都应该是清楚他们是干嘛的。这里就不做赘述了。

这是官方给出的redux的工作流，打个比方说，我们去图书馆借书
React Component就是图书借阅者，
action就相当于于我们的图书管理员或者借书机器，
store就是图书馆或者说是图书储存室，里面存储的都是书籍
我们去借书首先会发起action咨询图书管理员，或者直接找图书管理员来确认书籍书否可借阅(比如被借走，损坏修复中等)，
图书管理员会去图书室查询一下书籍是否可借阅，如果可借阅，那么他就会将书籍返给你，如果不行，那么也会通知你。
这就是一个简单的redux流程。就相当于一次借阅图书的过程。
比较大型的企业项目中基本都会会用到react-redux，这方面的资料可以参考阮一峰的网络日志。
地址：http://www.ruanyifeng.com/blog/2016/09/

每天一句中文式外语

俄语

过海关或安检的时候使用

1. Скажите‚пожалуйста‚где проходит контроль паспорта? 
 请问‚在那里检查护照?
(思嘎热节‚八热俄思达‚哥姐 朴拉火鸡特 嘎恩特老李 八思八了打)

2. Где надо подписаться? 
 在那签名?
 (哥姐‚那答 把特笔洒擦)

3. У меня нет вещей для таможенной декларации.
我没有什么要申报的东西.
 (屋 灭尼阿 涅特 为写以 德里呀 打毛热拿衣 接可拉腊册呀)

4. Это все мои личные вещи. 
 这些都是随身物品.
(爱达 复写 蚂蚁 力气内业 为西)

5. Я хочу связаться с консульством КНР.
 我想和中华人民共和国领事馆联系.
 (雅 哈秋 思无亚擦 思嘎恩苏里思特娃母 嘎爱勒)

6. Где взять декларацию? 
  在哪领报关单?
 (哥姐 无字压气 解渴拉腊册呀)