React组件的创建、抽离和事件处理

超、凢脫俗 2022-12-28 07:16 137阅读 0赞

### React 组件 ###

*  React 组件基本介绍
 *  创建组件
 *   *  使用函数创建组件
     *  使用类创建组件
 *  抽离组件
 *  事件处理
 *   *  类形式实现事件
     *  函数形式实现事件
     *  事件对象

# React 组件基本介绍 #

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

# 创建组件 #

## 使用函数创建组件 ##

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

import React from 'react'
    import ReactDOM from 'react-dom'
    
    // 定义函数组件
    function MyComp () { 
      return (
        <div>我是一个函数组件</div>
      )
    }
    ReactDOM.render(<MyComp />, document.querySelector('#app'))

![在这里插入图片描述][20201215132401617.png]

> 可以直接渲染组件  
> ReactDOM.render(`<MyComp></MyComp>`, document.querySelector(’\#app’))  
> 如果组件中没有其他子节点，可以改为单标签形式

## 使用类创建组件 ##

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

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

![在这里插入图片描述][20201215132714795.png]

# 抽离组件 #

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

1.  创建 MyCom.js 文件 （组件文件，内部可以使用函数组件或者类组件）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70]

// 1. 导入 React 包
    import React from 'react'
    
    // 2. 创建一个类组件 （函数组件同理）
    class MyCom extends React.Component { 
      render () { 
        return (
          <div>MyCom中定义的类组件</div>
        )
      }
    }
    
    // 定义一个函数组件
    const MyCom1 = () => { 
      return (
        <div>MyCom1--函数组件</div>
      )
    }
    
    // 3. 导入组件
    export default { 
      MyCom,
      MyCom1
    }

1.  在 index.js 文件中导入 MyCom.js 文件，再渲染组件

import React from 'react'
    import ReactDOM from 'react-dom'
    
    // 1. 导入自定义组件
    import Com from './components/MyCom'
    
    // 2. 重新定义jsx，在jsx中调用组件
    const jsx = (
      <div>
        <Com.MyCom />
        <Com.MyCom1 />
      </div>
    )
    
    // 3. 渲染 jsx，jsx中包含了自定义组件
    ReactDOM.render(jsx, document.querySelector('#app'))

![20201215133515128.png][]

# 事件处理 #

## 类形式实现事件 ##

使用 JSX 语法时需要传入一个 **函数作为事件处理函数**，而不是一个字符串。

语法：`on+事件名称={事件处理程序}`

例如：`onClick={()=>{}}`

**注意**：事件名必须用驼峰命名法

例如： onMouseEnter、onKeyUp

点击按钮触发点击事件，弹窗会提醒

import React from 'react'
    import ReactDOM from 'react-dom'
    class Show extends React.Component { 
      handleClick () { 
        alert('我被电了一下')
      }
      render () { 
        return (
          <button onClick={ this.handleClick}>点我</button>
        )
      }
    }
    
    ReactDOM.render(<Show />, document.querySelector('#app'))

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70 1]

## 函数形式实现事件 ##

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

import React from 'react'
    import ReactDOM from 'react-dom'
    
    const handleKeyUp = (e) => { 
      console.log(e.keyCode)
    }
    
    const Show = () => { 
      return (
        <input type="text" onKeyUp={ handleKeyUp} />
      )
    }
    
    ReactDOM.render(<Show />, document.querySelector('#app'))

## 事件对象 ##

*  事件处理函数中的参数就是事件对象
 *  React 中的事件对象叫做 合成事件（对象），能兼容所有浏览器

import React from 'react'
    import ReactDOM from 'react-dom'
    
    class Show extends React.Component { 
      handleKeyUp (e) { 
        console.log(e)
      }
    
      render () { 
        return (
          <input type="text" onKeyUp={ this.handleKeyUp} />
        )
      }
    }
    
    ReactDOM.render(<Show />, document.querySelector('#app'))

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70 2]  
在这里，`e`就是一个合成事件。`SyntheticEvent` 实例将被传递给事件处理函数，它是浏览器的原生事件的跨浏览器包装器。  
如果想输出当前按键的ASCII码值，就可以打印`e.keyCode`

[20201215132401617.png]: /images/20221120/807285e4b70f4915bee2f2f57ac3dda1.png
[20201215132714795.png]: /images/20221120/1f3d6833706642a8acaacd82fd577a08.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70]: /images/20221120/258be98a9bbf4fe7994b7c28400715d0.png
[20201215133515128.png]: https://img-blog.csdnimg.cn/20201215133515128.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20201215134648247.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20201215135221632.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1BJTElwaWxpcGFsYQ==,size_16,color_FFFFFF,t_70