React创建组件的两种方式及事件处理

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.事件名称} 装事件名称