React学习（三）—— 组件基础

最新推荐文章于 2025-05-08 18:13:19 发布

何七七KongKwan

最新推荐文章于 2025-05-08 18:13:19 发布

阅读量101

点赞数

分类专栏： React学习文章标签： react.js 学习 javascript

本文链接：https://blog.youkuaiyun.com/GIN0913/article/details/132514300

版权

React学习专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了如何在React中创建和渲染函数组件和类组件，包括它们的事件绑定方法，以及如何为组件设置和修改状态。重点讲解了事件处理函数的定义和使用，以及类组件的状态管理，如数组和对象的操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习目标：

（1）学会创建函数组件和类组件

（2）学会函数组件和类组件的事件绑定

（3）能够为组件设置状态和修改状态的值

一、创建和渲染组件

1、函数组件

// 创建函数组件
function HelloFun(){
  return <div>hello, 我是函数组件</div> ;
}

function App() {
  return (
    <div className="App">
      {/* 渲染函数组件 */}
      <HelloFun></HelloFun>
      <HelloFun/>
    </div>
  );
}
export default App;

2、类组件

import React,{Component} from "react";
// 创建类组件
class HelloClass extends Component{
  render(){
    return <div>hello, 我是类组件</div> ;
  }
}

function App() {
  return (
    <div className="App">
      {/* 渲染类组件 */}
      <HelloClass></HelloClass>
      <HelloClass/>
    </div>
  );
}
export default App;

3、两者的共同点和不同点

共同点

（1）组件的名称首字母都要是大写的（React内部会根据这个来判断是组件还是内部标签的）

（2）函数组件都必须要有返回值

（3）渲染的时候使用名称作为组件标签名称，可以成对出现也可以自闭合

不同点：

（1）类组件需要引入React，继承React.Component父类，使用父类提供的方法或属性

（2）类组件必须使用render方法进行return

二、函数组件的事件绑定

1、直接上代码，这样似乎更能意会一些

// 创建函数组件
function HelloFun(){

  const handleClick=(e,name)=>{
    console.log('你点的是函数组件:',e.target,name)
  }
  
  // function handleClick(e,name){
  //   console.log('你点的是函数组件:',e.target,name)
  // }

  return (
    <>
      <div onClick={handleClick}>hello, 我是函数组件</div>
      <div onClick={(e)=>handleClick(e,'何七七')}>hello, 我是传递参数的函数组件</div>
    </>
  );
  
}

2、执行结果

3、总结

（1）在标签内通过 on + 事件名称 = { 事件处理函数} 的形式就能绑定事件

（2）事件处理函数的定义和JS是一样的，可以使用函数声明的形式，也可以采用箭头函数等

（3）如果需要获取事件对象，只需要在事件的回调函数中补充一个形参e即可拿到

（4）如果需要传递额外的参数改造事件绑定为箭头函数在箭头函数中完成参数的传递

三、类组件的事件绑定

1、老规矩，先上代码

// 创建类组件
class HelloClass extends Component{
  // 这里必须是箭头函数
  handleClick=(e,name)=>{
    console.log('你点的是类组件：',e.target, name)
  }
  render(){
    // 这里要使用this
    return(
      <>
        <div onClick={this.handleClick}>hello, 我是类组件</div> 
        <div onClick={(e)=>this.handleClick(e,'又是我何七七')}>hello, 我是带参数的类组件</div> 
      </>
    );
  }
}

2、执行结果

3、总结

我们可以看出，类组件和函数组件绑定事件的方式是相似的，只是有一些不同点：

（1）类组件的绑定需要借助this关键词获取

（2）定义的使用的是class类语境下的写法，不需要带const

import React,{Component} from "react";
// 创建类组件
class HelloClass extends Component{
  // 事件函数不用加const，且必须是箭头函数
  handleClick=()=>{
    console.log('ddddd')
  }
  render(){
    // 这里要使用this
    return <div onClick={this.handleClick}>hello, 我是类组件</div> ;
  }
}

扩展：在代码中，我说这里我们的事件处理函数必须是箭头函数，是根据this指向得到：这里采用箭头函数是最合适的，不需要额外去纠正this的指向。如果你需要更加深层地了解关于this指向的问题我另外写了一篇文章，有兴趣可以看看：

四、类组件状态

1、例子

先用一个例子来体会一下：实现计数器功能，当点击计数按钮的时候，数字就会+1

import React,{Component} from "react";

// 创建类组件
class Counter extends Component{
  // 初始化状态
  state={
    count:0
  }

  // 修改状态
  handleClick=()=>{
    this.setState({
      count:this.state.count+1
    })
  }
  render(){
    return(
      <>
        <button onClick={this.handleClick}>计数器</button>
        {/* 读取状态 */}
        <div>{this.state.count}</div>
      </>
    );
  }
}

2、总结

（1）React中通过state来初始化，state的值是一个对象结构，一个组件可以有多个数据状态

（2）读取的时候不能直接使用变量名，要使用this.state来读取

（3）修改的时候不要直接通过赋值的方式，要使用setState方法，语法是：this.setState({ 要修改的部分数据 })

3、其他数据类型的修改

1、数组增加

（1）方法：可以使用扩展运算符和concat方法，这两种方法都能够返回修改后的数组

（2）示例如下：实现效果是当点击增加的时候，往里加入一个 or 多个对象

import React,{Component} from "react";

// 创建类组件
class Man extends Component{
  // 初始化状态
  state={
    manList:[
      {id:0,name:'BillKin'},
      {id:1,name:'PP'},
      {id:2,name:'Ohm'},
      {id:3,name:'NaNon'}
    ]
  }

  addList=[
    {id:4,name:'Earth'},
    {id:5,name:'Mix'}
  ]

  // 修改状态
  handleClick=()=>{
    this.setState({
      // manList:this.state.manList.concat({id:4,name:'Gulf'})
      // manList:this.state.manList.concat(this.addList)
      // manList:[...this.state.manList,{id:4,name:'Gulf'}]
      // manList:[...this.state.manList,...this.addList]
    })
  }
  render(){
    return(
      <>
        <ul>
          {this.state.manList.map(item=><li key={item.id}>{item.name}</li>)}
        </ul>
        <button onClick={this.handleClick}>增加</button>
      </>
    );
  }
}

2、数组修改

（1）方法：可以使用map方法，如果是对象数组的话，可以在里面采用扩展运算符，把旧的值通过覆盖的方式修改

（2）示例：每个li后面有一个按钮，点击就会修改对应的name

import React,{Component} from "react";

// 创建类组件
class Man extends Component{
  // 初始化状态
  state={
    manList:[
      {id:0,name:'BillKin'},
      {id:1,name:'PP'},
      {id:2,name:'Ohm'},
      {id:3,name:'NaNon'}
    ]
  }

  handleDelete=(id)=>{
   this.setState({
    manList:this.state.manList.map(item=>{
      if(item.id===id){
        return {...item,name:'我的人'} 
      }
      else{
        return item
      }
    })
   })
  }


  render(){
    return(
      <>
        <ul>
          {this.state.manList.map(item=>
          <li key={item.id}>
            {item.name}
            <button onClick={()=>this.handleDelete(item.id)}> 点击获取他的新名字 </button >
          </li>)}
        </ul>
      </>
    );
  }
}

3、数组删除

（1）方法：使用filter方法

（2）示例：在每个li有一个删除按钮，点击即可删除对应的li

import React,{Component} from "react";

// 创建类组件
class Man extends Component{
  // 初始化状态
  state={
    manList:[
      {id:0,name:'BillKin'},
      {id:1,name:'PP'},
      {id:2,name:'Ohm'},
      {id:3,name:'NaNon'}
    ]
  }

  handleDelete=(id)=>{
    // 删除删除
    this.setState({
    manList:this.state.manList.filter(item=>item.id!==id)
   })
  }
  render(){
    return(
      <>
        <ul>
          {this.state.manList.map(item=>
          <li key={item.id}>
            {item.name}
            <button onClick={()=>this.handleDelete(item.id)}> 删除 </button >
          </li>)}
        </ul>
      </>
    );
  }
}

4、对象的增删改

对象的增删改都可以通过扩展运算符的方式

（1）增改

 person: {
    ...this.state.person,
    // 覆盖原来的属性 或者创建新的属性，达到修改和增加属性的效果
    name: 'rose'
}

（2）删除

import React,{Component} from "react";

// 创建类组件
class Author extends Component{
  // 初始化状态
  state={
    author:{
      name:'KongKwan',
      gender:'女',
      age:18
    }
  }

  handleDelete=(id)=>{
    // 删除删除
    const { age, ...newAuthor } = this.state.author;
    this.setState({
      author:newAuthor
   })
  }
  render(){
    return(
      <>
        <p>作者的名字：{this.state.author.name}</p>
        <p>作者的性别：{this.state.author.gender}</p>
        <p onClick={this.handleDelete}>作者的年龄：{this.state.author.age}</p>
      </>
    );
  }
}