摘要：此时，我将它写下来讨论和分享这些我发现的模式。正确的姿势应该是通过的方式获取子组件的一些信息。高阶组件是需要另外一个有用的模式依赖注入。也有部分人称它是一种模式。最直接的方式是通过每一层通过来传递。

原文出自：http://krasimirtsonev.com/blog/article/react-js-in-design-patterns

我想找一个好的前端前端框架，找了很久。这个框架将能够帮助我写出具有可扩展性、可维护性 UI 的代码。通过对 React.js 优势的理解，我认为“我找到了它”。在我大量的使用过程中，我发现了一些模式性的东西。这些技术被一次又一次的用于编程开发之中。此时，我将它写下来、讨论和分享这些我发现的模式。

这些所有的代码都是可用的，能够在 https://github.com/krasimir/react-in-patterns 中下载。我可能不会更新我的博客，但是我将一直在 GitHub 中发布一些东西。我也将鼓励你在 GitHub 中讨论这些模式，通过 issue 或者直接 pull request 的方式。

在使用 React 构建了几个月的情况下，你将能够体会到每一个 React Component 都是一个小系统，它能够自己运作。它有自己的 state、input、output.

React Component 通过 props 作为 input（之后用输入代替）。下面我们来写一个例子：

// 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 标签（孩子组件）将不会被渲染。

对于一个组件的间接性输入（就是多层组件传递数据的时候），我们也可以调用 context 进行数据的访问。在整个 React tree 中的每一个组件中可能会有一个 context 对象。更多的说明将在依赖注入章节讲解。

React 的输出就是渲染过后的 HTML 代码。在视觉上我们将看到一个 React 组件的样子。当然，有些组件可能包含一些逻辑，能够帮助我们传递一些数据或者触发一个事件行为（这类组件可能不会有具体的 UI 形态）。为了实现逻辑类型的组件，我们将继续使用组件的 props：

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

                
                    
                
            
        );
    }
};

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