React 类组件你不知道的细节+案例

React基础-组件-类组件

1.组件概述

目标：了解React组件的作用和创建组件的方式

---

• 什么是组件
• 组件的设计思想

---

1.what is 组件啊？

在前端开发中组件就是用户界面当中一块独立的区域,在组件内部会包含这块区域中的视图代码,样式代码以及逻辑代码

React是采用组件的方式来构建用户界面,通过将多个组件进行组合形成完成的用户界面,就好比搭乐高一样

2.组件设计思想

组件的核心思想之一就是重复使用用,定义一次就可以在任何地方进行使用

组件可以用来封装用户界面中的重复区块,复用重复区块

组件的第二个核心思想就是解耦。

在传统的 web页面开发中,一个html文件就是一个页面,就是说当前页面中的所有代码都被写在同一个文件中,这就很容易导致代码的冲突

在组件化开发中,每个组件都有自己的作用域,组件与组件之间的代码不会发生任何冲突m从而避免在传统开发的模式中经常出现改了A，B却挂了的问题

---

2.创建组件

目标: 掌握创建类组件的方式

import ReactDOM from "react-dom/client";
import {Component} from "react"
​
//1.组件名称首字母大写
//2.只有继承了 Component类才是React 组件
//3.类中必须是包含render方法用于渲染用户界面, render方法的名字是固定的,渲染用户界面时返回 jsx,不渲染任何界面时返回 null;
class App extends Component {
  render() {
    return <div>头部组件</div>}
}
​
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App></App>) 

1.组件单独存放

在实际的React项目开发中,组件作为独立的个体一般都会被放置在单独的文件中方便维护。

//src/App.js
import {Component} from "react";
//约定：组件文件的名称和组件名称保持一致
class App extends Component {
  render() {
    return <div>头部组件</div>}
}
//导出组件,以便在其他地方导入并使用组件
export default App; 

//src/index.js
import ReactDOM from "react-dom/client";
import App from "./App";
​
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<App></App>) 

---

3.组件状态

1.组件状态什么玩意？

用一个例子来比喻就是说现实生活中的状态指同一个事物有不同形式,比如水,当水达到沸点那么就会变成水蒸气,如果水在零摄氏度以下就会结成冰

在web 应用中用户界面也是有状态的,比如有一块将要展示用户列表的区域,用户列表数据需要从服务端获取,该区域将会有以下这几种状态

状态	解释
空闲	在没有发出请求时该区域为空闲状态
加载中	请求在发出后没有得到响应前该区域为加载中状态
加载成功	当请求得到响应用户列表渲染成功后该区域为成功状态
加载失败	当请求未得到正确的响应时该区域为失败状态
结束	不论请求成功与失败请求都结束了该区域为结束状态

再比如导航链接,它具有默认状态和选中状态.下拉框具有收缩状态和展开状态

那么如何在程序中表示用户界面的状态呢?在程序中可以通过声明变量进行状态的记录

//idle:空闲状态
//loading:加载中
//success:加载成功
//error:加载失败
//finish:结束
let status = "idle" 

let navLink = "白色";
let activeNavLink = "绿色" 

React应用程序使用组件构建用户界面,所以用户界面的状态需要被声明在组件中,被声明在组件中的状态被叫做组件状态。

2.操作组件状态

目标：掌握操作组件状态的方法

在这类组件中组件状态必须声明在类的state属性中,state属性的名字时固定的,对象类型.

在render方法中通过this关键获取 state属性中的状态。

//目标：实现计数器案例,即声明组件状态 count用于存储数值,点击按钮让数值+1
class App extends Component {
  //state 对象用于存储组件状态
  state = {
    //状态count,初始值为 0
    count:0,};
  render() {
    //render 方法中的this指向组件的实例对象
    //state 属性时类的实例属性
    //所以通过this 是可以获取到state对象的
    return <button>{this.state.count}</button>}
} 

类组件中的组件状态必须通过类实例对象下的 setState 方法进行修改,只有这样才能触发视图更新.

当前组件实例下并没有setState 方法,setState方法是父类 Component提供的。

class App extends Component {
  state = {
    count:0};
  render() {
    return (
  <button onClick={()=> {
          //1.更新状态,接收对象作为参数,改哪一个状态就传递哪一个状态即可.react内部会帮助我们进行状态合并操作
          //2.更新视图
          this.setState({count:this.state.count + 1})
      }}>{this.state.count}</button>
  )}
} 

可能🤔得点:那就是之前说过事件处理函数中的this指向undefined,为什么此处它又指向了组件实例对象呢？

因为此处事件处理函数是➡️箭头函数,箭头函数不绑定this,箭头函数中的this指向了箭头函数定义处的this,由于当前的事件处理函数是在render方法中定义的,而render方法中的this指向了组件实例对象,所以该事件处理函数中的this指向了组件实例对象。

⚠️的点:在state对象存储多个状态的情况下,使用setState更新状态时只传递需要更新的状态即可,React会先接收我们传递给setState方法的状态,再使用它和原有状态进行合并,从而产生新状态。

import {Component} from "react";
​
export default class App extends Component {
  constrouct() {