React -- 数据流

在React中，数据是从父组件到子组件流动的，这条原则可以让我们只需要在父组件上操作，然后子组件就会自动更新并渲染。

这一节有两个很重要的概念：React组件的state和props。
如果初始化父组件的props，那么React就会向下遍历组件树，尝试渲染相关的子组件；而state则只涉及组件自己内部的状态，这些状态不会干扰到组件的父／子节点，仅和组件自身有关。

state

内置方法setState：当我们调用这个方法后，由于组件的状态改变，这时候，组件就会尝试重新渲染。

在React中，常常在事件处理方法中更新state，例如按钮绑定的方法等等。

一个栗子：（本栗采用ES6 class的语法方式构建组件）

import React, { Component } from 'react';class Counter extends Component {     constructor(props) {        super(props);        this.handleClick = this.handleClick.bind(this);        this.state = {             count: 0,        };     }    handleClick(e) {        e.preventDefault();        this.setState({            count: this.state.count + 1,        });     }    render() {         return (            <div>                <p>{this.state.count}</p>                <a href="#" onClick={this.handleClick}>  </a>            </div>         );    } }

props

首先给出Tab组件的基本方法，本节我们将在这个控件的基础上学习：

class Tabs extends Component {     constructor(props) {        super(props);     }    // ...    render() {        return <div className="ui-tabs"></div>;    } };

下面进入正题：

props是React用来让组件之间相互联系的机制，通俗的说，就好像是方法的参数。开发者利用props，可以在React组件之间传递数据。

组件的props一定来自于默认属性或从父组件传递而来，如果我们试图在代码中修改props的原始值，React将会报错。

栗子：

<Tabs classPrefix={'tabs'} defaultActiveIndex={0}>    <TabPane key={0} tab={'Tab 1'}> Tab1content   </TabPane>     <TabPane key={1} tab={'Tab 2'}> Tab2content   </TabPane>      <TabPane key={2} tab={'Tab 3'}> Tab2content   </TabPane></Tabs>

在组件Tabs中，classPrefix和defaultActiveIndex都是组件的props。

1、子组件prop

在React中有一个重要且内置的prop：children，它代表组件的子组件的集合。例如，上面这个Tabs的子组件就是：

    <TabPane key={0} tab={'Tab 1'}> Tab1content   </TabPane>     <TabPane key={1} tab={'Tab 2'}> Tab2content   </TabPane>      <TabPane key={2} tab={'Tab 3'}> Tab2content   </TabPane>

那么，父组件Tabs渲染子组件TabPane的方法就是：

getTabPanes() {    const { classPrefix, activeIndex, panels, isActive } = this.props;    return React.Children.map(panels, (child) => {         if (!child) { return; }        const order = parseInt(child.props.order, 10);        const isActive = activeIndex === order;        return React.cloneElement(child, {             classPrefix,            isActive,            children: child.props.children,             key: `tabpane-${order}`,        });     });}

这段代码完成的功能是渲染子组件。通过方法map遍历子组件，同时将order, isActive, children, key利用cloneElement方法克隆到一个新创建的TabPane组件中，然后返回这个新的组件集合。这样，在我们需要的时候，调用方法getTabPanes即可完成对组件的渲染。

2、其他组件prop

在前面的栗子中，组件prop我们传入的是一个固定值：

<TabPane key={0} tab={'Tab 1'}>    Tab1     </TabPane>

但是，其实prop的强大之处在于，我们可以向其中传入动态值，甚至节点（component props）。

栗子：

<Tabs classPrefix={'tabs'} defaultActiveIndex={0} className="tabs-bar">                 <TabPane        order="0"        tab={<span><i className="fa fa-home"></i>&nbsp;Home</span>}>        </TabPane>    <TabPane        order="1"        tab={<span><i className="fa fa-book"></i>&nbsp;Library</span>}>    </TabPane>    <TabPane        order="2"        tab={<span><i className="fa fa-pencil"></i>&nbsp;Applications</span>}>         </TabPane> </Tabs>

这样，配合上相关的渲染代码，在渲染后，我们就可以在每个TabPane中，插入新的元素。

渲染的关键在于遍历所有tabpane组件的tab prop，进行必需的操作后，将它们返回。

3、用function prop与父组件通信。

state的通信集中在组件内部，而对于prop，它的通信则是父组件向子组件传播。

4、propTypes

propTypes用于规范props的类型和必需的状态：如果组件定义了propTypes，那么在开发环境下，就会对prop的值新型类型检查，如果传入的prop与要求的类型不匹配，React将会在控制台中报出warning。
栗子：

static propTypes = {    classPrefix: React.PropTypes.string,     className: React.PropTypes.string,      defaultActiveIndex: React.PropTypes.number,     activeIndex: React.PropTypes.number.isRequired,// 必需    onChange: React.PropTypes.func,// func 不是 function，另外，对于布尔类型是bool 而不是 boolean    children: React.PropTypes.oneOfType([        React.PropTypes.arrayOf(React.PropTypes.node),        React.PropTypes.node,     ]),};