react学习-组件和事件绑定(三)
一、函数组件
使用 JS 的函数(或箭头函数)创建的组件,就叫做函数组件
// 箭头函数
const Hello = () => {
return (
<p>hello</p>
)
}
// 普通函数
function Hi () {
return (
<p>Hi</p>
)
}
function App () {
return (
<div className="App">
<Hello></Hello>
<Hello />
<Hi></Hi>
<Hi />
</div>
)
}
export default App
注:
- 组件的名称必须首字母大写,react内部会根据这个来判断是组件还是普通的 HTML 标签
- 函数组件必须有返回值,表示该组件的 UI 结构;如果不需要渲染任何内容,则返回 null
- 组件就像 HTML 标签一样可以被渲染到页面中。组件表示的是一段结构内容,对于函数组件来说,渲染的内容是函数的返回值就是对应的内容
- 使用函数名称作为组件标签名称,可以成对出现也可以自闭合
二、类组件
import React from "react"
class Hello extends React.Component {
render () {
return (
<p>hello</p>
)
}
}
function App () {
return (
<div className="App">
<Hello />
</div>
)
}
export default App
注:
- 类名称也必须以大写字母开头
- 类组件应该继承 React.Component 父类,从而使用父类中提供的方法或属性
- 类组件必须提供 render 方法 render 方法必须有返回值,表示该组件的 UI 结构
三、事件绑定
语法
on + 事件名称 = { 事件处理程序 } ,比如:
<div onClick={()=>{}}></div>
注意点
react事件采用驼峰命名法,比如:onMouseEnter、onFocus
例:
import React from "react"
// 函数组件
const Add = () => {
const add = () => {
console.log('函数组件的Add')
}
return (
<button onClick={add}>add</button>
)
}
// 类组件
class Reduce extends React.Component {
reduce = () => {
console.log('类组件中的reduce')
}
render () {
return (
<button onClick={this.reduce}>reduce</button>
)
}
}
function App () {
return (
<div className="App">
<Add />
<Reduce />
</div>
)
}
export default App
传参
获取事件对象
const Hello = () => { const click = (e) => { console.log(e) } return ( <p onClick={click}>hello</p> ) }
传递自定义参数
const Hello = () => { const click = (name) => { console.log(name) } return ( <p onClick={() => click('xxhzm')}>hello</p> ) }
传递自定义参数并获取事件对象
const Hello = () => { const click = (e, name) => { console.log(e) } return ( <p onClick={(e) => click(e, 'xxhzm')}>hello</p> ) }
四、组件状态
在react hook出来之前,函数式组件是没有自己的状态的
1. 初始化状态
class Counter extends React.Component {
// 初始化状态
state = {
count: 0
}
render() {
return <button>button</button>
}
}
2. 读取状态
- 通过this.state来获取状态
class Counter extends React.Component {
// 初始化状态
state = {
count: 0
}
render () {
return (
<p>count{this.state.count}</p>
)
}
}
3. 修改状态
语法
this.setState({ 要修改的部分数据 })
setState方法作用
- 修改state中的数据状态
- 更新UI
思想
数据驱动视图,也就是只要修改数据状态,那么页面就会自动刷新,无需手动操作dom
注意事项
不要直接修改state中的值,必须通过setState方法进行修改
class Counter extends React.Component {
// 定义组件状态
state = {
count: 0
}
countAdd = () => {
this.setState({
count: '10'
})
}
// DOM 结构
render () {
return (
<div>
<p>count{this.state.count}</p>
<button onClick={() => this.countAdd()}>button</button>
</div>
)
}
}
计数器案例
import React from 'react'
class Counter extends React.Component {
// 定义组件状态
state = {
count: 0
}
add = () => {
this.setState({
count: this.state.count + 1
})
}
reduce = () => {
this.setState({
count: this.state.count - 1
})
}
// DOM 结构
render () {
return (
<div>
<p>{this.state.count}</p>
<button onClick={() => this.add()}>add</button>
<button onClick={() => this.reduce()}>reduce</button>
</div>
)
}
}
function App () {
return (
<div className="App">
<Counter />
</div>
)
}
export default App
1 条评论
te