React实战-模块化条件下的6种数据传递方式

React实战-模块化条件下的6种数据传递方式

当前新的前段框架中最突出就是模块化，然后模块化后，数据的传递方式与之前的方式也不尽相同，尤其是框架各自定义的方式也不一样。规则这东西归根到底是个度的问题，没有规则，就会混乱，规则多了，就死板。所以规则多少是个很难把握的东西（微信：react-javascript）。

刚开始接触ReactJS的时候，你会觉得很别扭，一些取值、赋值的方式将违背你的习惯。还是那句话：当你在通过Dom直接取值、赋值的时候，你可能就错了。这不仅仅是我们，就连ReactJS生态圈里有名的控件库Material-UI在版本演变过程中也在不断的调整编程方式，早期版本中DropDownList也有selectItemValue，selectItemIndex，慢慢逐步被ReactJs的单一数据流方式取代，界面控件的变化一般不采用直接赋值，而是一般依据绑定数据的变化引起界面展示变化。

在ReactJs中组件间数据传递不仅有父组件向子组件数据传递，子组件向父组件数据传递，组件内部数据传递的三种基本方式，也有在不断演进中的其他方式。

1.组件内部数据传递

ReactJs组件可大可小，大的组件可以是多个组件的集合，也可能是一个元素，也可能是一个页面。但只要被定义为一个组件，内部数据改变，都通过state进行传递。

State的方式也是实现了组件内部数据的封装，排除了外来数据干扰。props则负责接收外部数据。所有state和props也就成了ReactJS组件需要重点关注的东西，在ReactJs组件的生命周期的事件基本上都是关于state和props的。state数据的变化也就引起组件的render。

组件mounting的调用的顺序依次是:getDefaultProps,getInitialState,componentWillMount,render,componentDidMount.

组件unmounting的调用的是componentWillUnmount.

组件Updating(re-render)的调用的顺序依次是componentWillReceiveProps，shouldComponentUpdate,componentWillUpdate,render,componentDidUpdate.

在组件内部操作数据时：

a.组件展示数据来源于state；

b.数据变化采用的方式是由事件触发state数据的变化，由state数据变化导致组件re-render。如下：

var Counter = React.createClass({

  getInitialState: function() {

    return {count: 4};

  },

  handleClick: function() {

    this.setState({count: this.state.count + 1});

  },

  render: function() {

    return <div onClick={this.handleClick}>{this.state.count}</div>;

  }

});

 

ReactDOM.render(<Counter initialCount={7}/>, mountNode);

2.父组件向子组件数据传递

父组件向子组件的数据传递方式一般采用props，但是当一个页面为一个组件时，由于展示的数据来源于数据模型，也可能会先将模型中数据加载到父组件的state中，子组件作为父组件的一个元素，从state中获取数据，则实现方式与上面的类似了。

但是一般作为独立的子组件，最常见的还是采用props的方式。如下：
var ProductCategoryRow = React.createClass({

  render: function() {

    return (<tr><th colSpan="2">{this.props.category}</th></tr>);

  }

});

var ProductTable = React.createClass({

  render: function() {

    var rows = [];

    var lastCategory = null;

    this.props.products.forEach(function(product) {

            rows.push(<ProductCategoryRow category={product.category} key={product.category} />);

      }

    });

    return (

      <table>

        <thead>

          <tr>

            <th>Name</th>

            <th>Price</th>

          </tr>

        </thead>

        <tbody>{rows}</tbody>

      </table>

    );

  }

});

需要注意的是在上例中子组件的key必须唯一。

3.子组件向父组件数据传递

在ReactJS中由于采用了单向数据流的方式，无论是子组件，还是父组件都可以采用改变数据模型，从而引发组件state中数据的变化，从而改变组件展示方式。但是也存在一些其他情况下，父组件操作、获取子组件数据的情况。当然子组件也是个对象，最简单的方式是直接调用子组件对象的方法，对数据进行操作。

4.Context数据传递方式

Context是一种较少使用的方式，在早期的版本中有使用，不建议使用了，但是还作为一种数据传递方式的了解吧。如下：

var A = React.createClass({

    contextTypes: {

        name: React.PropTypes.string.isRequired,

},

    render: function() {

        return <div>My name is: {this.context.name}</div>;

    }

});

React.withContext({'name': 'Jonas'}, function () {

    // Outputs: "My name is: Jonas"

    React.render(<A />, document.body);

});

5.Ref取值方式

ReactJs依然提供Dom的取值方式，也不是直接取值，而是采用ref的方式。

 render: function() {

    return <TextInput ref={(c) => this._input = c} />;

  },

  componentDidMount: function() {

    this._input.focus();

  },

或者采用ref直接取值

<input ref="myInput" />

var input = this.refs.myInput;

var inputValue = input.value;

6.其他方式

除了以上的方式，我们还可以采用回调函数的方式，将父组件的方法做为回调函数传人子组件，进行数据传递。

总之，在新老交替的时候，我们往往会出现新瓶装老醋的情况，用的ReactJs的框架，实现方式还是老的方式，就违背了ReactJs的思想。新的不一定就好，但是在用这个框架的时候尽量还是采用ReactJs推荐的方式吧，等非常熟悉了再去选择。ReactJs也在不断变化，不断改进，其实也是在各种实现方式上的取舍而已，至于哪种好，就交给时间吧。