react 组件

定义组件的几种方式

• 工厂函数(无状态)，一般对于简单的组件，推荐使用

// 工厂函数（无状态）创建组件，一般简单的组件推荐使用
function FunComponent() {
    return 

        

            
工厂函数创建的组件，return一个虚拟DOM对象
            
a
            
b
            
c
        
    
}
ReactDOM.render(
    ,
    document.getElementById("example")
);

• ES6 class定义组件；复杂组件推荐使用

class ClassComponent extends React.Component{
    render(){
        return 

            
es6 class定义组件
        
        }
    }
ReactDOM.render(
    ,
    document.getElementById("example1")
);

组件的调用方法

• 类似于标签的使用

<组件名称 />

注意项

• 组件的名称首字母必须大写
• 组件中的虚拟DOM对象，只能有一个跟标签，也就是，如果要渲染一个DOM集合，需要用一个容器包裹起来，否则则会被覆盖