说明：react in patterns这个系列是我翻译过来的一些文章。原书的地址在： react-in-patterns 是一本很不错的书。

本指南是针对已经对React的基本理念和他的工作原理比较了解的开发人员。这并不是一个完整的操作指南，而是作为对流行概念设计模式的介绍。社区引入或多或少的范式。它指向你一个抽象思维。例如，它没有谈论Flux，而是谈论数据流。没有谈及高级组件，而是谈论组合。

基础知识

通讯

每个react组件应该像一个独立运行的小型系统。它有自己的状态，输入和输出。
[图片上传失败...(image-ec7401-1524960539084)]

输入

react组件的输入是它的props。

//title.jsx
const Title = (props) => {
    return <h1>{props.text}</h1>
}

Title.propTypes = {
    text: PropTypes.string
};

Title.defaultProps = {
    text: 'hello word'
};

//app.jsx

const App = () => {
    return <Title text='Hello React' />
}

Title组件仅仅只有一个props输入，它的父组件App应该在使用Title组件是为它提供这个输入。我们也提供了propTypes去定义每个属性类型，react会在控制台为我们打印那些属性传入的是不合法的。当然使用defaultProps是一个比较好的选择。我们可以用它来设置组件的默认值。这样开发人员如果忘记传入某些属性，也能正常的显示了。react并没有严格定义传入的属性的具体内容，它可能是组将的另一个组成部分。

const SomethingElse = ({answer}) => {
    return <div>答案是：{answer}</div>
}

const Answer = () => {
    return <span>42</span>
}

<SomethingElse answer={<Answer />} />

react 为我们提供了一个props.children属性让我们可以访问组件所有的子组件

const Title = ({text, children}) => {
    return(
        <h1>
            {text}
            {children}
        </h1>
    );
}

const App = () => {
    return(
        <Title text='Hello React'>
            <span>community</span>
        </Title>
    );
}

在这个例子中<span>community</span>，是作为Title的children传入到Title组件中去的。

输出

react组件的第一个明显的输出是呈现的HTML。在视觉上，这就是我们得到的。

const NameField = ({valueUpdated}) => {
    return(
        <input onChange={event => valueUpdated(e.target.value)}/>
    );
}

class App extends React.Component {
    constructor(props) {
        super(props);
        
        this.state = {name: ''}
    }
    
    render() {
        return(
            <div>
                <NameField valueUpdated = {name => this.setState({name})} />
            </div>
        );
    }
    
}

最后的想法

把react组将视为一个黑盒子是很令人兴奋的，它有自己的输入，生命周期和输出。由我们来组成这些盒子。这也许是react提供的优势之一。易于抽象和撰写。

个人的一些看法

我们可以把每个组件看成是无状态的函数，传入相同的props我们能得到相同的component,然后在通过view组合这些componet，这样我们就能将状态放在view层统一管理。