react 组件

定义组件的几种方式

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

// 工厂函数（无状态）创建组件，一般简单的组件推荐使用
function FunComponent() {
    return <div>
        <ul>
            <li>工厂函数创建的组件，return一个虚拟DOM对象</li>
            <li>a</li>
            <li>b</li>
            <li>c</li>
        </ul>
    </div>
}
ReactDOM.render(
    <FunComponent />,
    document.getElementById("example")
);

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

class ClassComponent extends React.Component{
    render(){
        return <div>
            <p>es6 class定义组件</p>
        </div>
        }
    }
ReactDOM.render(
    <ClassComponent />,
    document.getElementById("example1")
);

组件的调用方法

• 类似于标签的使用

<组件名称 />

注意项

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