15.3 React 组件(Component)

组件是React的灵魂

React的主要目的就是为了界面开发的组件化,通过组件化来提高代码复用率、可维护性和可测试性。

在线实例代码如下:

上述代码中,我们使用React.createClass来创建一个新的组件(Component)。组件有一个要求,它们必须实现render函数,这个函数告诉组件要渲染什么内容。

为什么return后面要加上一对圆括号(parentheses)?这是因为如果没有的话,JS会自动在return后面添加分号,这样就会忽略下面的代码而返回一个空值。 如果JSX的代码和return在同一行,就可以不用圆括号。

特性(Props)

其实之前我们已经介绍过props,比如设置的JSX attributes(如className)就是props。当组件被渲染时,可以通过this.props来访问其属性。 上述的代码中就是通过this.props.message来访问message属性。