1. 组件其实可以理解为 虚拟 dom对象的集合。也是一个虚拟dom。
// 1) 工厂函数,无状态,(定义一些比较简洁的组件,推荐使用)
function MyComponent1(){
return <h2>工厂函数</h2>;
}
// 2) ES6 class方式定义组件 //推荐
class MyComponent2 extends React.Component{
render(){
return <h3>ES6 class定义组件</h3>;
}
}
1.2// 渲染组件:
ReactDOM.render(<MyComponent1/>,document.getElementById("example1"));
ReactDOM.render(<MyComponent2/>,document.getElementById("example2")); //注意组件的传入方式是</>,而之前的直接是一个虚拟dom对象 example=<h1>haha</h1>
2.在组件的写法上需要注意以下几点:
2.1 组件类首字母必须大写
2.2 虚拟dom元素只有一个根元素,即需要一个总的标签包裹住所有的虚拟dom, <div>10个h1标签</div>
2.3 虚拟dom必须有结束标签,所以组件是 <MyCom/> 或者是 <ul>haha</ul>
3. ReactDOM.render()渲染组件标签的基本流程
3.1 React内部会创建组件实例对象
3.2 得到包含的虚拟DOM,并解析为真实DOM
3.3 插入到指定部分