类组件：React中的面向对象

常乐hhh
722 阅读7分钟

在学习React时，你会发现在使用create-react-app创建一个React项目的时候，初始化加载的速度很慢很慢，这大大影响了我们的开发效率，毕竟在现代的前端开发中，性能和开发效率是两个至关重要的考量因数，所以我们就会想有没有哪个工具能提高我们的开发效率和性能呢？

Suggestion.gif

Vite

Vite是一个新型的前端构建工具，它在开发阶段采用了原生的ES模块的支持，这导致它无在开发过程中进行复杂的打包步骤。这意味着当我们修改代码时，Vite能够快速地响应并仅重新加载更改的模块，而无需重新编译整个项目，大大减少了开发过程中的等待时间。与传统的构建工具相比，Vite避免了很长时间的初始化打包过程，从而显著提高了开发时的启动速度和热更新效率。

而React，作为最受欢迎的JavaScript库之一，其虚拟DOM机制能够有效地优化页面的更新和渲染。结合使用Vite和React，让React与Vite相辅相成，可以显著提升开发体验和应用性能。

如何使用Vite + React创建项目？

创建一个基于Vite的React项目非常简单。只需在命令行中输入以下命令：

npm init vite

然后输入你要创建项目的名称，选择React作为框架选项，Vite将为你设置好项目结构，包括安装所有必要的依赖包，如React和React-DOM，然后你还可以选择你想要使用的开发语言，如TS、JS等。接下来，你可以使用npm run dev命令启动开发服务器，就会得到和之前创建项目一样的项目开发网址。

React 组件与类组件

在React中，组件是构建用户界面的基本单元。它们将代码组织成独立、可重用的部分，每个部分都专注于实现特定的功能。组件可以嵌套使用，形成一棵组件树，这使得大型应用程序的开发变得更为简洁和模块化。

组件的组成与特性

  • HTML + CSS + JS：组件不仅仅是JavaScript的函数或类，它们融合了HTML结构、CSS样式和JavaScript的逻辑，形成了一个完整的功能单元。
  • 可插入性：就像HTML标签一样，React组件可以轻松地插入到其它组件或页面中，增强代码的复用性和灵活性。
  • 状态管理：组件可以通过state属性来管理其内部状态，这些状态的变化会触发组件的重新渲染，确保用户界面与数据保持同步。
  • 属性传递：通过props，父组件可以向子组件传递数据和回调函数，实现组件间的通信和数据流控制。

类组件

在React中，除了函数组件，我们还可以使用类组件。类组件是通过继承React的Component类来创建的，这为我们提供了诸如状态管理（state）、属性接收（props）以及生命周期方法等功能。让我们详细探讨一下React类组件的关键特性：

当我们需要去创建一个类组件的时候，就用运用到es6中class和extends，尽管class在JavaScript中主要是语法糖，底层仍然基于原型继承prototype，但它为开发者提供了一种更直观、更熟悉的面向对象编程方式，使得代码组织和设计模式的实现更加清晰和自然。

  • 构造函数与状态初始化： 在类组件中，构造函数constructor是初始化状态和绑定方法的地方。需要先调用super(props)来初始化父类React.Component的构造函数，然后设置组件的初始状态this.state。

  • 重写render方法： 类组件必须重写render方法，该方法返回组件的JSX表示。这是组件的渲染逻辑所在，决定了组件最终呈现的DOM结构。

  • 生命周期方法： React类组件提供了丰富的生命周期方法，比如componentDidMount（组件挂载后调用）、componentDidUpdate（组件更新后调用）等，这些方法可以在组件的不同生命周期阶段执行特定的逻辑，如数据获取、状态更新或性能优化。

  • 代码实例：

    import { Component} from 'react';
// 类组件
// es6    component是组件基类  继承
class AppHeader extends Component {
    constructor(props) {
        // super 父类的构造函数
        super(props);
        // 组件之中的数据  除了props之外，还有state自由状态
        // state 状态
        this.state = {
            // 状态
            emoji:'笑脸'
        }

        // setInterval(() => this.changeEmoji(),3000)   未挂载
        console.log('组件未挂载');
    }
    // 挂载 onlosd...
    // 生命周期函数   组件挂载到页面后，才执行   
    componentDidMount(){
        console.log('组件已挂载');
        // 组件已挂载，挂载后才能修改其中的状态
        setInterval(() => this.changeEmoji(),1000)
    }

    changeEmoji= () => {
        // componnet 的内置方法
        this.setState({
            emoji : this.state.emoji === '笑脸'? '苦脸':'笑脸'
        })
    }

    //获取组件更新后的状态
    componentDidUpdate(){
        console.log('组件已更新', this.state.emoji);
    }


    // 没有render 哪里有html？
    // 必须重写reader，返回组件的jsx
    render() {
        const {name}=this.props
        const {emoji} = this.state 
        return (
            <div className="app-header">
                <h1 className="title">{name}--{emoji} </h1>
            </div>
        )
    }
}

export default AppHeader;

  • 运行结果 4a38769d-1931-40a2-b0c2-0049f74c8e74.gif

  • 代码解析

    1. 初始化状态：当AppHeader组件实例化时，其构造函数被调用。此时，组件的初始状态被设置为{ emoji: '笑脸' }。同时，在构造函数内部尝试设置一个定时器来改变emoji，但因为此时组件还未挂载到DOM上，所以这个定时器不会立即生效。
    2. 组件挂载：一旦AppHeader组件被添加到DOM树中，componentDidMount生命周期方法会被调用。在这个方法中，设置了一个每1000毫秒（1秒）执行一次的定时器，用于调用changeEmoji方法。这意味着组件挂载后，emoji会每隔1秒在“笑脸”和“苦脸”之间切换。
    3. 状态更改与渲染：changeEmoji方法使用setState更新组件状态。每当setState被调用，组件将会重新渲染以反映新的状态值。这里使用了箭头函数确保this正确地引用组件实例。
    4. 组件更新：每次组件状态更新并完成重新渲染后，componentDidUpdate生命周期方法将被调用。此方法打印出最新的emoji状态，显示组件已成功更新。
    5. 渲染输出：AppHeader组件的render方法返回一个包含标题的<div>元素，标题中包含了从属性（props）中获取的name和当前的状态emoji。因此，用户界面将展示如“name--笑脸”或“name--苦脸”的标题，具体取决于当前的emoji状态。

总结来说，当AppHeader组件被加载并挂载时，它将动态地在界面上显示一个标题，标题内容包括传递给它的name属性和一个会定期在“笑脸”和“苦脸”之间切换的emoji。这个切换效果是通过组件自身的状态管理和周期性状态更新实现的，不用我们手动去修改状态，也就是响应式更新（自动化的界面同步）。

而传统的Web开发往往依赖于直接操作DOM（Document Object Model）来更新页面内容，例如使用document.getElementById()和innerText等API。这种方法虽然直观，但在复杂应用中存在明显的逻辑混乱，太麻烦而且性能也不好，会影响用户的体验，

总结

React通过其组件化、状态管理和响应式更新机制，不仅解决了传统DOM编程的诸多痛点，还为前端开发带来了革命性的变化，我们可以聚焦于应用的核心业务focus逻辑，而不是陷入繁琐且低效的DOM操作中。通过声明式的编程方式，我们只需要描述界面应该呈现的样子，而不需要关心具体如何实现。React背后的虚拟DOM和高效的更新算法，保证了界面的实时性和流畅性，让我们能够更加高效地构建复杂且高性能的前端应用。

如果文章对你有帮助的话，不妨点点关注✨点点赞👍（一键三连是真爱💞），这将是我持续学习和更新的动力😁😁😁

大脸一红.gif

avatar
文章
阅读
粉丝