react创建组件的方式:
(1)工厂(无状态)函数(最简洁,推荐使用)
function Component() { return<h1>工厂(无状态)函数(最简洁,推荐使用)</h1> }
(2)ES6语法,(复杂组件,推荐使用)
//定义的组件类Component必须继承React的核心组件类Component,extends是继承的意思,render()方法是react最常用的方法 class Component extends Component{ render(){ return <h2>ES6语法,(复杂组件,推荐使用)</h2> } } 共同点:在这两种方法中,return的都是虚拟DOM对象集合.
还有es5的老语法来创建组件,不过已经不推荐使用,在这里就不再说了。
渲染组件标签:
ReactDOM.render(<Component1 />, document.getElementById('root'));
注意点:
(1)用class定义的组件类必须首字母大写
(2)虚拟DOM元素必须只有一个根元素
(3)虚拟DOM元素必须有结束标签
React.dom.render()渲染组件标签的基本流程:
(1)React内部会创建组件实例对象
(2)组件实例对象调用render()方法,返回(即return)虚拟DOM对象,ReactDOM.render()将虚拟DOM对象转化为真实DOM对象
(3)将真实DOM对象插入指定的页面元素内部