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

注:

  1. 组件的名称必须首字母大写,react内部会根据这个来判断是组件还是普通的 HTML 标签
  2. 函数组件必须有返回值,表示该组件的 UI 结构;如果不需要渲染任何内容,则返回 null
  3. 组件就像 HTML 标签一样可以被渲染到页面中。组件表示的是一段结构内容,对于函数组件来说,渲染的内容是函数的返回值就是对应的内容
  4. 使用函数名称作为组件标签名称,可以成对出现也可以自闭合

二、类组件

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

注:

  1. 类名称也必须以大写字母开头
  2. 类组件应该继承 React.Component 父类,从而使用父类中提供的方法或属性
  3. 类组件必须提供 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

最后修改:2022 年 06 月 20 日
如果觉得我的文章对你有用,请随意赞赏