React组件(函数组件和类组件)

React组件(函数组件和类组件)

1.创建组建的两种方式

1.1 函数组件

1.函数组件:使用js函数创建组件;

2.约定:函数名称必须以大写字母开头( React 据此区分 组件 和 普通的React 元素),

3.函数组件必须有返回值,表示该组件的结构;

4.若返回值为null,表示不渲染任何内容;

5.渲染函数组件:用函数名作为组件标签名,组件标签可以是单标签也可以是双标签;

//函数组件
function App() {
    return (
    	<div>这是函数组件</div>
    )
}
//利用ReactDOM.render()进行渲染
ReactDOM.render(<App/>,document.getElementById('root'))

1.2 类组件

1.类组件:使用ES6的class创建的组件;

2.类名称必须以大写字母开头;

3.类组件应该继承React.Component父类,从而可以使用父类中提供的方法或属性;

4.类组件必须提供render()方法;

5.render()方法必须有返回值,表示该组件的结构;

//创建类组件
class App extends React.Component{
    render() {
        return(
        	<div>这是类组件</div>
        )
    }
}
//使用ReactDOM进行渲染
ReactDOM.render(<App/>,document.getElementById('root'))