组件通讯

React 组件的输入是它的 props 。它传递数据的方式如下所示:

组件只有一个输入属性 text 。父组件 (App) 在使用 <Title> 标签时提供此属性。在定义组件的同时我们还定义了 propTypes 。在 propTypes 中我们定义了每个属性的类型，这样的话，当某些属性的类型并非我们所预期时，React 会在控制台中进行提示。defaultProps 是另一个有用的选项。我们可以使用它来为组件的属性设置默认值，这样就算开发者忘记传入属性也能保障组件具有有效值。

还有一个 属性，它可以让我们访问父组件标签内的子元素。例如:

在这个示例中，App 组件中的 <span>community</span> 就是 Title 组件中的 children 属性。注意，如果我们将 { children } 从 Title 组件中移除，那么 标签将不会渲染。

16.3 版本之前，组件还有一种间接输入，叫做 context 。整个 React 组件树可能有一个 context 对象，组件树中的每个组件都可以访问它。想了解更多，请阅读 章节。

在下面的示例中，我们有一个组件 <NameField />，它接受用户的输入并能将结果发送出去。

通常，我们需要逻辑的切入点。React 自带了十分方便的生命周期方法，它们可以用来触发操作。例如，在某个页面，我们需要获取外部的数据资源。

我们可以将每个 React 组件想象成是一个黑盒，这种方式很不错。它有自己的输入、生命周期及输出。我们所需要做的只是将这些盒子组合起来。这或许就是 React 所提供的优势之一: 易于抽象，易于组合。