第二讲 React组件(component)的基本使用

Sian

1、前面已经讲到了如何使用React进行DOM的基本操作，通过ReactDOM的render()方法来渲染Html视图；

[HTML] 纯文本查看 复制代码

   ReactDOM.render(
     <h1>Hello React</h1>,
     document.getElementById("container")
   );
// 等同于
    ReactDOM.render(
      React.createElement("h1",null,"Hello React"),
      document.getElementById("container")
    );

2、上面的<h1>Hello React</h1>和Html标签一模一样，但在这里不能理解成是Html标签，而是JSX语法，也可以理解成是React自带的基础组件，最终会被解释成下面的样式，被Javascript执行；
3、这种所谓的基础组件，对应Html标签都有一个与之一模一样的组件，方便使用，除此之外还支持自定义组件丰富实际开发需要；
4、使用React的createClass()方法创建一个组件，写法与格式以及说明在注释中注明

[HTML] 纯文本查看 复制代码

/**
     * 创建一个组件，用于输出Hello React
     1、组件类名以大写字母开头，大驼峰命名法；
     2、在React中使用React.createClass方法创建一个组件类
     3、核心代码：每个组件都必须实现自己的render()方法,输出定义好的组件模板，返回值：null,false、组件模板
     4、注意：组件类只能包含一个顶层标签
     */

     // 代码示例
     var HelloMessage = React.createClass({
       render:function(){
         return <h1>Hello React</h1>;
       }
     });

     ReactDOM.render(
       //  模板中插入<HelloMessage />会自动生成一个实例
       <HelloMessage />,
       document.getElementById("container")
     );

效果链接：http://www.yusian.com/react/component/index.html
5、组件还可以通过嵌套组成复合组件
5.1、先创建两个组件，分别实现不同的内容

[JavaScript] 纯文本查看 复制代码

     var WebName = React.createClass({
       render:function(){
         return <h1>Sian</h1>;
       }
     });

     var WebLink = React.createClass({
       render:function(){
         return <a href="http://www.yusian.com">http://www.yusian.com</a>
       }
     });

5.2、再创建一个组件，该组件包含的内容为前面所创建的组件，这就叫复合组件

[JavaScript] 纯文本查看 复制代码

     var WebShow = React.createClass({
       render:function(){
         return (
           <div>
            <WebName />
            <WebLink />
           </div>
         );
       }
     });

5.3、再渲染时直接使用该复合组件即可得到前面两组件的效果和

[JavaScript] 纯文本查看 复制代码

     ReactDOM.render(
       <WebShow />,
       document.getElementById("container")
     );

5.4、效果链接：http://www.yusian.com/react/component/index1.html
6、在浏览器空白处右击，点击“检查”查看浏览器最终解释的Html结构；