组件化概念
与vue相同,将界面分成一些部分,分块维护,实现复用,
react把组件分为了函数组件和类组件
函数组件
// 函数组件的创建和渲染
// 创建
function Hello () {
return <div>Hello</div>
}
// 渲染<Hello/> 或者<Hello></Hello>
function App () {
return (
<div className="App">
<Hello />
<Hello></Hello>
</div>
)
}
约定说明
- 组件的名称必须首字母大写,react内部会根据这个来判断是组件还是普通的HTML标签
- 函数组件必须有返回值,表示该组件的 UI 结构;如果不需要渲染任何内容,则返回 null
- 组件就像 HTML 标签一样可以被渲染到页面中。组件表示的是一段结构内容,对于函数组件来说,渲染的内容是函数的返回值就是对应的内容
- 使用函数名称作为组件标签名称,可以成对出现也可以自闭合
类组件
import React from "react"
// 类组件的创建和渲染
// 创建,组件名称首字母大写,必须要有返回值,不写就为null
class HelloComponent extends React.Component {
render () {
return <div>this is class Component</div>
}
}
// 渲染<HelloComponent/> 或者<HelloComponent></HelloComponent>
function App () {
return (
<div className="App">
<HelloComponent />
<HelloComponent></HelloComponent>
</div>
)
}
export default App
约定说明
- 类名称也必须以大写字母开头
- 类组件应该继承 React.Component 父类,从而使用父类中提供的方法或属性
- 类组件必须提供 render 方法render 方法必须有返回值,表示该组件的 UI 结构
事件绑定
- 语法
on + 事件名称 = { 事件处理程序 } ,比如:<div onClick={ onClick }></div>
- 注意点
react事件采用驼峰命名法,比如:onMouseEnter、onFocus
import React from "react"
function Hello () {
const clickHandler = () => {
console.log("hello 组件触发")
}
return <div onClick={clickHandler}>Hello</div>
}
class HelloComponent extends React.Component {
// 事件回调函数(标准写法)
clickHandler = () => {
console.log("类组件事件触发")
}
render () {
return <div onClick={this.clickHandler}>this is class Component</div>
}
}
function App () {
return (
<div className="App">
<Hello />
<HelloComponent />
</div>
)
}
export default App
获取事件对象
function HelloF2 () {
const clickHandler = (e) => {
console.log(e)
e.preventDefault()//阻止事件,当前表示阻止a链接跳走
console.log("hello 组件触发")
}
return <div><a onClick={clickHandler} href="http://www.baidu.com">baidu</a></div>
}
传递额外参数
function HelloF3 () {
const clickHandler = (msg) => {
console.log(msg)
console.log("hello 组件触发")
}
return <div><span onClick={() => clickHandler("hello, f2")} href="http://www.baidu.com">baidu</span></div>
}
function HelloF3 () {
const clickHandler = (e,msg) => {
console.log(e)
console.log(msg)
console.log("hello 组件触发")
}
return <div><span onClick={(e) => clickHandler(e,"hello, f2")} href="http://www.baidu.com">baidu</span></div>
}