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方法作用
1. 修改state中的数据状态
2. 更新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

react学习-组件和事件绑定（三）