React 组件的创建与事件处理

React组件

  • 一、React 组件基本介绍
  • 二、创建组件
      • 2.1 使用函数创建组件
      • 2.2 使用类创建组件
      • 2.3 抽离组件
  • 三、React事件处理
      • 3.1 事件绑定
        • 3.1.1 通过类组件绑定事件
        • 3.1.2 通过函数组件绑定事件
      • 3.2 事件对象

一、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'))

React 组件的创建与事件处理_第1张图片

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'))

React 组件的创建与事件处理_第2张图片

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'))

React 组件的创建与事件处理_第3张图片
在这里,e就是一个合成事件。SyntheticEvent实例将被传递给事件处理函数,它是浏览器的原生事件的跨浏览器包装器。

你可能感兴趣的:(React,react.js,javascript,前端)