组件是React的一等公民,使用react就是在使用组件
组件表示页面中的部分功能
组合多个组件实现完整的页面功能
组件特点:可复用、独立、可组合
react组件的两种创建方式
1.使用函数创建组件
函数组件:使用js的函数(或剪头函数)创建的组件
约定1:函数名称必须以大写字母开头
约定2:函数组件必须有返回值,表示该组件的结构
如果返回值为null,表示不渲染任何内容
function Hello(){ return (<div>这是一个函数组件</div>) } ReactDOM.render(<Hello />,document.querySelector('#root'))
2.使用类创建组件
类组件:使用ES6的class创建组件
约定1:类名必须以大写字母开头
约定2:类组件应该继承React.Component父类,从而可以使用父类中提供的方法和属性
约定3:类组件必须提供render()方法
约定4:render()方法必须有返回值,表示该组件的结构
class Hello extends React.Component { render(){ return (<div>Hello class Component</div>) } } ReactDOM.render(<Hello />,document.querySelector('#root'))