摘要：此時，我將它寫下來討論和分享這些我發現的模式。正確的姿勢應該是通過的方式獲取子組件的一些信息。高階組件是需要另外一個有用的模式依賴注入。也有部分人稱它是一種模式。最直接的方式是通過每一層通過來傳遞。

原文出自：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