前言

在前端的学习和开发中，React是一个十分实用的工具。它可以提供一种高效的可扩展的方式来创建复杂的用户界面，而组件化是它的一大特色。在React中，用户界面被拆分成一系列可复用的组件，每个组件都负责渲染和管理一部分独立的UI。组件可以进行嵌套构成组件树。

类组件

类组件是React中基于ES6创建的定义组件的一种方式，允许开发者定义组件的状态和生命周期方法，并且可以使用React组件类的实例方法。

用React完成的页面是由一个个组件构成的，他们共同构成了一个组件树。如图：

组件是构成页面用户的基本模块，主要由HTML，JS，CSS组成的可返回JSX函数构成。它包含props和state。

props：是组件之间传递数据的主要方式，它们是从父组件传递给子组件的只读属性，子组件不可以修改这些属性，只能用它们来渲染UI。

state：是组件内部的可变数据。在组件内管理，并且可随时间改变。组件的state变化时，React会自动重新渲染UI。

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />     //组件
  </React.StrictMode>,
)

在入口文件中，导入了React库，ReactDOM模块，并在根节点root上挂载了App.jsx组件。

往后我们开发项目时也只需在App.jsx上挂载组件。

App.jsx:

import AppHeader from './components/app-header'
// 父组件
const App = () =>{
  return (
    <div className="container">
      {/* 子组件 */}
      <AppHeader name='Ro9nin'/>
    </div>
  )
}

export default App

我们在App.jsx上挂载了AppHeader组件，接下来对AppHeader组件进行开发和改进。

import { Component } from 'react'
// 类组件
// es6  Component基类 继承 
class AppHeader extends Component {

    constructor(props){
        // super 父类构造函数
        super(props)
        // 组件中的数据  props之外，还有state  自有状态
        // state 状态 
        this.state={
            // 状态
            emoji:'😅'
        }

首先导入组件的基类 Component，然后用extends声明AppHeader类继承Component类。这样就能访问Component上的属性和方法。其中constructor(){}是构造函数，属性由props传递。super()可以调用父类的构造函数。类组件可以有自有状态(this.state={...})。

// 生命周期函数 组件挂载到页面后
    componentDidMount(){
        console.log('2222');
        // 组件已挂载
        setInterval(() => this.changeEmoji(),1000)
    }
    componentDidUpdate(){
        console.log('update',this.state.emoji);
    }

在React类组件中，componentDidMount()和componentDidUpdate()是两个重要的生命周期方法。分别在组件挂载完成后和组件更新后被调用。在这段代码中，componentDidMount()里设置了一个定时器setInterval()。这意味着每当组件挂载后，这个定时器就会开始工作，每隔一段时间更新一次组件状态，从而触发组件的重新渲染。

changeEmoji = () => {
        // Component 内置方法 setState
        this.setState({
            emoji: this.state.emoji === '😅' ? '😭' : '😅'
        })
    }

定义changeEmoji方法更改组件的状态。setState()是React类组件中用于更新状态的一个重要方法。状态发生变化时，React会自动重新渲染该组件，反映新的状态值。

 render(){
        const { name } = this.props
        const { emoji } = this.state
        return(
            <div className="app-header">
                <h1 className='title'>{name} {emoji}</h1>
            </div>
        )
    }
}

render()方法负责生成并返回组件的JSX。利用解构获取this.props中的name和state属性。

完整代码如下：

import { Component } from 'react'
// 类组件
// es6  Component基类 继承 
class AppHeader extends Component {

    constructor(props){
        // super 父类构造函数
        super(props)
        // 组件中的数据  props之外，还有state  自有状态
        // state 状态 
        this.state={
            // 状态
            emoji:'😅'
        }
        // setInterval(() => this.changeEmoji(),2000)
    }
    // onload...
    // 生命周期函数 组件挂载到页面后
    componentDidMount(){
        console.log('2222');
        // 组件已挂载
        setInterval(() => this.changeEmoji(),1000)
    }
    componentDidUpdate(){
        console.log('update',this.state.emoji);
    }
    // 方法
    changeEmoji = () => {
        // Component 内置方法 setState
        this.setState({
            emoji: this.state.emoji === '😅' ? '😭' : '😅'
        })
    }

    // 类里的abstruct方法,必须实现
    // 没有render  哪里有html呢？
    render(){
        const { name } = this.props
        const { emoji } = this.state
        return(
            <div className="app-header">
                <h1 className='title'>{name} {emoji}</h1>
            </div>
        )
    }
}

export default AppHeader

实现效果如下：

React的类组件和生命周期函数

前言

类组件