组件通讯
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 所提供的优势之一: 易于抽象,易于组合。