React 组件的创建与事件处理

一、React 组件基本介绍

• 组件是React中最重要的技术，使用React 就是在用组件
• 组件表示页面中的部分功能
• 通常一个完整的页面功能是由多个组件组合而成的
• 特点：可复用、独立、可组合

二、创建组件

2.1 使用函数创建组件

• 使用JS函数（或箭头函数）创建的组件叫做函数组件
• 函数名称首字母必须以 大写字母 开头
• 函数组件必须有返回值，而且是 JSX结构； 返回值可以为 null， 意思是不渲染任何内容
• 渲染函数组件时使用函数名作为组件标签名

import React from 'react'
import ReactDOM from 'react-dom'
 function Hello(){
   return (
     <div>这是我的第一个函数组件</div>
   )
 }
//渲染组件
ReactDOM.render(<Hello/>, document.getElementById('root'))

2.2 使用类创建组件

• 使用 class创建的组件叫做 类组件
• 类名需要 大写，必须继承 React.Component 父类，继承父类就意味着能够调用父类中提供的属性和方法
• 类组件必须要有 render 方法，render 方法必须有返回值（返回 JSX），表示该组件的结构

import React from 'react'
import ReactDOM from 'react-dom'
 class Hello extends React.Component{
   render(){
     return 
     <div>我是一个类组件</div>
   }
 }
//渲染组件
ReactDOM.render(<Hello/>,root)

2.3 抽离组件

• 将每个组件放到单独的js文件中，组件就会更加易于开发和维护
• 创建一个独立的 MyCom 组件，并在 index.js 使用该组件

步骤：

1.创建 Hello.js 文件 （组件文件，内部可以使用函数组件或者类组件）

// 导入react包
import React from "react";
//创建一个类组件
class Hello extends React.Component{
    render(){
        return(
            <div>这是第一个抽离到js文件中的组件</div>
        )
    }
}
//导出组件
export default Hello;

2.在 index.js 文件中导入 Hello.js 文件，再渲染组件

import React from 'react'
import ReactDOM from 'react-dom'
import Hello from './components/hello'

//渲染组件
ReactDOM.render(<Hello/>, document.getElementById('root'))

三、React事件处理

3.1 事件绑定

3.1.1 通过类组件绑定事件

• 使用 JSX 语法时需要传入一个 函数作为事件处理函数，而不是一个字符串。
• 语法：on + 事件名称=（事件处理程序）
• 注意：React 事件采用驼峰命名法，比如：onClick,点击按钮触发点击事件，弹窗会提醒

import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
  handleClick () {
    alert('点击事件触发了')
  }
  render () {
    return (
      <button onClick={this.handleClick}>点我,点我</button>
    )
  }
}

//渲染组件
ReactDOM.render(<App/>, document.getElementById('root'))

3.1.2 通过函数组件绑定事件

与类组件绑定方法类似，只是用函数声明组件的方式来绑定事件

import React from 'react'
import ReactDOM from 'react-dom'
function App(){
  function handleClick(){
    alert('函数组件中绑定事件成功');
  }
  return (
    <button onClick={handleClick}>点我</button>
  )
}
ReactDOM.render(<App/>, document.getElementById('root'))

3.2 事件对象

• 通过事件处理函数中的参数可以获取到事件对象
• React 中的事件对象叫做 合成事件（对象），能兼容所有浏览器

import React from 'react'
import ReactDOM from 'react-dom'
class App extends React.Component {
  handleClick (e) {
    //组织浏览器的默认行为,防止网页跳转到淘宝页面
    e.preventDefault()
    alert('a标签的点击事件触发了')
  }
  render () {
    return (
      <a href='https://www.taobao.com/' onClick={this.handleClick}>淘宝</a>
    )
  }
}
//渲染组件
ReactDOM.render(<App/>, document.getElementById('root'))

在这里，e就是一个合成事件。SyntheticEvent实例将被传递给事件处理函数，它是浏览器的原生事件的跨浏览器包装器。