React系列--组件Component
发布时间：2020-12-15 20:40:08 所属栏目：百科 来源：网络整理
导读：1. 组件其实可以理解为 虚拟 dom对象的集合。也是一个虚拟dom。 1.1组件定义有两种方式 // 1） 工厂函数，无状态，（定义一些比较简洁的组件，推荐使用） function MyComponent1(){ return h2工厂函数/h2; } // 2) ES6 class方式定义组件? ? ? //推荐 class
|
1. 组件其实可以理解为 虚拟 dom对象的集合。也是一个虚拟dom。 1.1组件定义有两种方式
// 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 插入到指定部分
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |