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
实例将被传递给事件处理函数,它是浏览器的原生事件的跨浏览器包装器。