1. 函数创建组件
- 函数名称必须以大写字母开头
- 函数组件必须有返回值 ——return()
- 如果返回值为null表示不渲染任何内容
function Hello(){
return null //则不会渲染下边的div标签
return (
<div>函数创建组件</div>
)
}
2.class类创建组件
- class类组件应该继承 React.Component父类,以便使用父类的方法和属性。
类组件必须提供render()方法,且必须有返回值,表示该组件的结构。
class Hello extends React.component{
render(){
return <div>class类组件</div>
}
}
//引用
ReactDom.render(<Hello/>,root)
3.React事件处理
3.1 函数组件中的事件处理
function Hello(){
function handleClick(){
console.log('事件处理函数')
}
return (
<button onClick={handleClick}>点击事件</button>
)
}
※:在返回的标签中绑定事件后用 ={} 装事件名称
3.2 class组件中的事件处理
class Hello extends React.Component{
function handleClick(){
consloe.log('点击事件')
}
render(){
return (
<button onClick={this.handleClick}></button>
)
}
}
※:在返回的标签中绑定事件后用 ={this.事件名称} 装事件名称