React组件化与模块化技术教程 – 示例讲解

React 组件化与模块化 技术教程 – 示例讲解

一、引言

React是一个流行的JavaScript库，用于构建用户界面。组件化与模块化是React的核心概念之一，本文将详细介绍这两个概念，并通过一个实际案例进行讲解。

二、组件化与模块化

React提倡将用户界面拆分成多个独立的组件，每个组件负责管理自己的状态和UI，使得代码更加模块化和可复用。

开发者可以使用类组件或函数组件来定义这些组件，并通过props来进行数据传递。

1. 类组件

类组件是通过继承React.Component类来创建的。以下是一个简单的类组件示例：


class MyComponent extends React.Component {
    render() {
        return <div>Hello, World!</div>;
    }
}

2. 函数组件

函数组件是一个返回React元素的函数。以下是一个简单的函数组件示例：


function MyFunctionComponent() {
    return <div>Hello, World!</div>;
}

3. 模块化

模块化开发主要使用CommonJS和ES6两种方式。以下是一个使用ES6模块化的示例：


// 引入依赖
import React from 'react';
import ReactDOM from 'react-dom';

// 定义组件
class App extends React.Component {
    render() {
        return <div>Hello, React!</div>;
    }
}

// 渲染组件
ReactDOM.render(<App />, document.getElementById('root'));

三、案例讲解

以下是一个完整的React组件化与模块化案例，包括一个父组件和两个子组件。

1. 创建父组件

父组件负责渲染两个子组件，并通过props将数据传递给子组件。


import React from 'react';
import ChildComponent1 from './ChildComponent1';
import ChildComponent2 from './ChildComponent2';

class ParentComponent extends React.Component {
    state = {
        message: 'Hello from Parent!'
    };

    render() {
        return (
            <div>
                <h2>Parent Component</h2>
                <ChildComponent1 message={this.state.message} />
                <ChildComponent2 />
            </div>
        );
    }
}

export default ParentComponent;

2. 创建子组件1

子组件1接收父组件传递的props，并显示在页面上。


import React from 'react';

function ChildComponent1(props) {
    return (
        <div>
            <h3>Child Component 1</h3>
            <p>{props.message}</p>
        </div>
    );
}

export default ChildComponent1;

3. 创建子组件2

子组件2不接收父组件传递的props，只显示自己的内容。


import React from 'react';

function ChildComponent2() {
    return (
        <div>
            <h3>Child Component 2</h3>
            <p>This is Child Component 2!</p>
        </div>
    );
}

export default ChildComponent2;

4. 渲染父组件

在HTML文件中引入React和ReactDOM，并渲染父组件。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React Example</title>
</head>
<body>
    <div id="root"></div>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script type="module">
        import ParentComponent from './ParentComponent.js';
        ReactDOM.render(<ParentComponent />, document.getElementById('root'));
    </script>
</body>
</html>