likes
comments
collection
share

探索现代React开发：一次简单的组件实现旅程

作者站长头像
站长
· 阅读数 45

探索现代React开发：一次简单的组件实现旅程

在这个数字化日趋成熟的时代，前端开发已经变得不可或缺。而作为前端开发中的瑰宝，vue和React作为前端框架的主力军，带我们走进了组件化开发的崭新境地。今天，我们将透彻分析一个简洁的React项目，该项目包括几个主要文件：index.html, App.js, AppHeader.jsx, 和 App.css。我们将穿梭于代码间，探寻它们如何协同工作并展示在浏览器中的奥秘。

HTML的基石

从根本开始，index.html 页面扮演着承载整个React应用的角色。其中最关键的部分是 <div id="root"></div>，所有React组件将在这里被渲染。这种方法保证了HTML文件的清晰和整洁，同时允许React通过虚拟DOM高效地管理界面更新。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

组件化的艺术：App.js

跳到App.js，这里使用了一个函数组件的定义方式，显示了React强大的组件封装能力。通过解构赋值，props对象中的name属性被优雅地处理——解构。

import './App.css'
import AppHeader from './components/AppHeader'

const App = (props) => {
  const { name } = props;
  return (
    <div className='container'>
      <AppHeader name={name} />
    </div>
  )
}
export default App

解构允许你直接从props对象中提取并创建局部变量，并传递给子组件AppHeader。在React组件中，这意味着你可以直接从props对象中提取属性到单独的变量中，而不是每次使用时都通过this.props.propertyName这样的形式访问。这个模式非常符合现代React开发的“道法自然”，即代码的直观和自解释性。

假设你有一个简单的组件，它接收两个props：title和content。

不使用解构的写法：

function MyComponent (props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.content}</p>
    </div>
  );
}

使用解构的写法：

function MyComponent({ title, content }) {
  return (
    <div>
      <h1>{title}</h1>
      <p>{content}</p>
    </div>
  );
}

在第二种写法中，通过在函数参数列表中直接解构props对象，title和content变成了直接可用的变量，使得代码更加直观且易于阅读。

类组件与生命周期的交响：AppHeader.jsx

在 AppHeader.jsx中，我们见识到了类组件的魅力。利用类组件的生命周期方法和状态（state），每隔一秒钟表情符号在 "😊" 和 "😂"之间切换，构建出动态互动体验。这段代码不仅展示了状态管理的实用性，更体现了JavaScript中定时器的巧妙运用。

import { Component } from "react";

class AppHeader extends Component {
    constructor(props) {
        super(props);
        this.state = {
            emoji: '😊'
        };
        setInterval(() => {
            this.setState({
                emoji: this.state.emoji === '😊' ? '😂' : '😊'
            })
        }, 1000)
    }

    render() {
        const { name } = this.props;
        const { emoji } = this.state;
        return (
            <header className="app-header">
                <h1 className="title">类式组件{name}{emoji}</h1>
            </header>
        )
    }
}
export default AppHeader

export default语句用于导出模块的默认输出。这意味着当其他模块通过import语句引入这个模块时，不需要知道导出的具体名称，可以直接使用任何变量名来接收这个默认导出。这对于期望模块只有一个公开接口或者希望简化导入语法的场景非常有用。

单个导出：如果你的模块只导出一个组件或函数，并且它是该模块的主要功能或出口点，你应该使用export default。这样做的好处是导入时不需要花括号 {}，使得代码更简洁。

export default function MyComponent() {
  // 组件逻辑
}

// 在另一个文件中导入
import MyComponent from './MyComponent';

样式的简洁力量：App.css

最后但并非最不重要的是样式文件App.css，它简洁地为容器设置了背景色为绿色。这不仅仅是视觉美化，更是对用户界面友好性的直接体现。

.container {
  background-color: green;
}

结果展示

探索现代React开发：一次简单的组件实现旅程 探索现代React开发：一次简单的组件实现旅程

结果显示将是每隔1秒，‘😊’和‘😂’交替展示，文字部分的内容不发生改变，大致结果如上图所示。

小结

通过上述逐行解析，我们可以看到即使是这样一个简单的React应用也包含了丰富的开发知识和技巧。从组件化架构到状态管理，从生命周期的运用到CSS的简洁美学，每一部分都是精心设计的。这样的代码是干净、易维护的，非常适合作为新手向项目或教学示例。接下来，即便是踏入React的更深层次，这些基础也总会在不断的实践中发挥它们应有的价值。

转载自:https://juejin.cn/post/7386192391639318562
评论
请登录