React设计模式:深入理解React&Redux原理套路

原文地址

本文从属于笔者的React入门与最佳实践系列，推荐阅读GUI应用程序架构的十年变迁:MVC,MVP,MVVM,Unidirectional,Clean

Communication

React组件一个很大的特性在于其拥有自己完整的生命周期，因此我们可以将React组件视作可自运行的小型系统，它拥有自己的内部状态、输入与输出。

Input

对于React组件而言，其输入的来源就是Props，我们会用如下方式向某个React组件传入数据:

// Title.jsx
class Title extends React.Component {
  render() {
    return 
{ this.props.text }
;
  }
};
Title.propTypes = {
  text: React.PropTypes.string
};
Title.defaultProps = {
  text: 'Hello world'
};

// App.jsx
class App extends React.Component {
  render() {
    return 
    );
  }
};

注意，如果我们不主动在Title组件的render函数中设置{this.props.children}，那么span标签是不会被渲染出来的。除了Props之外，另一个隐性的组件的输入即是context，整个React组件树会拥有一个context对象，它可以被树中挂载的每个组件所访问到，关于此部分更多的内容请参考依赖注入这一章节。

Output

组件最明显的输出就是渲染后的HTML文本，即是React组件渲染结果的可视化展示。当然，部分包含了逻辑的组件也可能发送或者触发某些Action或者Event。

class Title extends React.Component {
  render() {
    return (
      

        
          
        
      
    );
  }
};

class App extends React.Component {
  render() {
    return