React18版本基础2 -- 组件

一. 函数组件和类组件

•         函数组件：使用JS的函数或者箭头函数创建的组件

  • 使用 JS 的函数(或箭头函数)创建的组件，叫做函数组件

  • 约定1：函数名称必须以大写字母开头，React 据此区分组件和普通的 HTML标签

  • 约定2：函数组件必须有返回值，表示该组件的 UI 结构；如果不需要渲染任何内容，则返回 null

• 使用函数创建组件

• 使用 ES6 的 class 创建的组件，叫做类（class）组件

• 约定1：类名称也必须以大写字母开头

• 约定2：类组件应该继承 React.Component 父类，从而使用父类中提供的方法或属性

• 约定3：类组件必须提供 render 方法

• 约定4：render 方法必须有返回值，表示该组件的 UI 结构

import React from 'react'
//类组件
class Hello extends React.Component {
  render() {
    return <div>Hello Class Component!</div> 
  }
}
//函数组件
const Hello1 = ()=>{
return(
<div> 函数组件 </div>
)}
createRoot.querySelector(‘#root).render(<><Hello /><Hello1/></>)y

有状态组件和无状态组件：

//类组件有状态 

class App extends Components{

        const state = {

        age:18,

        name:'郭纲’

}

render(){

        return(

        <div> 姓名: {this.state.name} -- 年龄：{this.state.age}</div>

)

}

}

// 函数组件 无状态

const App1 = ()=>{

return(

        <div>函数组件无状态</div>

)

}

---

事件处理-注册事件：

• React注册事件与DOM的事件语法非常像

• 语法on+事件名 =｛事件处理程序｝ 比如onClick={this.handleClick}

• 注意：React事件采用驼峰命名法，比如onMouseEnter, onClick

 class App extents Component{
    handleClick(){
    console.log('按钮被点击了')
}
    render(){
return (
    <button onClick={this.handleClick}>按钮点击</button>
)
}
}

事件处理-事件对象：

• 可以通过事件处理程序的参数获取到事件对象

• 注意：React 中的事件对象是 React 内部处理后的事件对象，一般称为：SyntheticBaseEvent 合成事件对象。用法与 DOM 原生的事件对象用法基本一致

function handleClick(e){
    e.preventDefault()
console.log('事件对象'，e)
}
<a onClick={this.handleClick}>点我，不会跳转页面</a>

react中this指向问题：

• 事件处理程序中的this指向的是undefined

• render方法中的this指向的是当前react组件。只有事件处理程序中的this有问题

• 原因

  • 事件处理程序的函数式函数调用模式，在严格模式下，this指向undefined

  • render函数是被组件实例调用的，因此render函数中的this指向当前组件

class App extends Component {
    state = {
        msg:'哈喽你好'
    }
    handleClick（）{
        console.log(this.state.msg)
    }
    render(){
    return(
    <div>
    <button onClick={this.handleClick}>点我</button>
</div>    
)
}
}

1. 在react的事件处理函数中，this指向undefined

事件处理-this指向解决方案

• 解决事件处理程序中this指向问题主要有三种方式

• 方式1：箭头函数

class App extends React.Component {
  state = {
    msg: 'hello react'
  }
  handleClick() {
    console.log(this.state.msg)
  }
  render() {
    return (
      <div>
        <button onClick={() => this.handleClick()}>点我</button>
      </div>
    )
  }
}

• 方式2：bind

class App extends React.Component {
  state = {
    msg: 'hello react'
  }
  handleClick() {
    console.log(this.state.msg)
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick.bind(this)}>点我</button>
      </div>
    )
  }
}

• 方式3：箭头函数形式的实例方法 - 推荐使用

class App extends React.Component {
  state = {
    msg: 'hello react'
  }

  handleClick = () => {
    console.log(this.state.msg)
  }
  render() {
    return (
      <div>
        <button onClick={this.handleClick}>点我</button>
      </div>
    )
  }
}