React之组件的使用

ch_s_t

于 2024-08-11 15:00:50 发布

阅读量659

点赞数 18

分类专栏：前端开发文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/ch_s_t/article/details/141070891

版权

前端开发专栏收录该内容

11 篇文章 0 订阅

订阅专栏

Vue、React和Angular是三个流行的前端框架，采用组件化的开发方式。支持虚拟DOM（Virtual DOM）技术，有丰富的生态系统、大量的插件和工具可以使用。Vue的语法是传统的HTML和JavaScript，React使用JSX语法，Angular使用了TypeScript。Vue和React使用的是响应式数据绑定机制，即数据变化会自动更新视图，Angular使用的是双向数据绑定机制，即视图和数据之间可以互相同步变化。Vue和React是轻量级的框架，只关注视图层；Angular是完整的MVC框架，提供了更多的功能和约束，Vue和React比较适合中小型项目，Angular更适合中大型项目，但这只是建议，读者可以根据项目需求和个人喜好，选择适合的框架。本文主要介绍React 的基础知识。

一、 React特点，优缺点

特点：

组件化：React通过将UI分解为独立的可重用组件来构建复杂的用户界面。每个组件都有自己的状态和属性，可以独立地进行开发、测试和维护。
虚拟DOM：React使用虚拟DOM（Virtual DOM）来管理用户界面的更新。虚拟DOM是一个轻量级的JavaScript对象树，它与实际DOM保持同步，并且只在需要更新时才更新实际DOM，以提高性能。
单向数据流：React采用单向数据流的数据模型，即数据从父组件传递到子组件，子组件不能直接修改父组件的数据。这样可以更好地管理和跟踪数据的变化。
高性能：由于使用虚拟DOM和精确的DOM更新算法，React能够提供出色的性能。它只更新需要更改的部分，而不是整个界面，从而减少了不必要的DOM操作。

优点：

组件化开发使代码更易于维护和重用，提高开发效率。
虚拟DOM的使用减少了对实际DOM操作的频率，提高了性能。
单向数据流使数据的变化更易于追踪和调试。

缺点：

学习曲线较陡峭，对于初学者来说可能需要一些时间来熟悉其概念和使用方法。
React仅关注于用户界面的构建，对于其他方面（如路由、状态管理等）需要结合其他库或框架来使用。

二、组件概念，特点

React 中的组件是用来封装可重用代码的基本单元。组件可以是函数式组件或类组件，并且可以通过组合其他组件来创建更大的组件。

组件的特点如下：

可组合性：组件可以通过嵌套和组合的方式来创建更复杂的组件，这使得代码更具有模块化和可重用性。
可重用性：组件可以在应用程序的不同部分进行重复使用，从而减少了重复编写代码的工作量。
可维护性：组件可以独立进行开发、测试和维护，使代码的维护更加容易。
单一职责：每个组件应该只关注一项功能，并且应该尽可能地小而简单。
状态管理：组件可以通过状态（state）来保存和管理数据，并且可以通过 props 属性向子组件传递数据。
视图渲染：组件可以根据状态的变化，自动更新视图，使用户界面保持与数据同步。

总之，组件是 React 中非常重要的概念，它们使得构建复杂的用户界面变得更加简单和可维护。通过将应用程序拆分为多个组件，我们可以提高代码的可读性和可重用性，并且更容易进行维护和扩展。

三、简单组件制作实例

1、创建项目

使用vite创建React项目，此项目执行环境为Window 10系统，执行下列命令前必须选安装 nodejs模块，具体方法可以查询其它文章。

首先在Window 10上打开命令行窗口，改变当前目录在您所在的练习目录下，例如，练习目录为'“d:\data"目录。输入命令：

d: 回车

cd data 回车

创建项目命令如下：

npm create vite my-app 回车，选择React和Javascript

cd my-app 回车

npm install 回车

npm run dev 回车 (项目启动)

在浏览器中的地址栏中输入"http://localhost:5173",出现如下效果，即是项目初始化成功。

2、编写简单组件

用以下代码二覆盖App.jsx,代码如下：

import React,{ Component }from 'react';

class App extends Component {
  render() {
    return (
      <div>
        <h1>Hello, React!</h1>
        <p>This is a simple React component.</p>
      </div>
    );
  }
}

export default App;

这是一个名为App的React组件，它在这里作为应用的主组件。它继承自React.Component类，并实现了一个render方法。render方法返回了一个JSX元素，包含一个<h1>标题和一个<p>段落。最后，通过export default语句，将该组件导出以供其他组件使用。

四、复杂组件示例

此示例是一个简易的BBS的项目，在这个项目中有两个组件，一个是PostList，用于展示BBS的帖子列表，另外一个是PostItem组件，用于展示BBS帖子，PostList使用PostItem组件，这样两者就形成了父子关系。最终效果如下所示：

1、设计思路

React 应用组件设计的一般思路是，通过定义少数有状态的组件管理整个应用状态的变化，并且将状态通过props传递给其余无状态组件，由无状态组件完成界面绝大部分UI的渲染工作。总之，有状态组件主要关注状态变化的业务逻辑，无状态组件主要关注组件UI渲染。

根据设计思路，可以将：

PostList组件设计为一介有状态组件，负责帖子列表数据的获取及点赞行为的处理，主要设计为一个继承Component的组件类，使用数据posts存储帖子数据，handleVote函数负责处理点赞行为，具体代码如下：

import React, { Component } from 'react';
import './PostList.css';
import PortItem from './PostItem';
class PostList extends Component {  
   constructor(props) {
        super(props);
        this.state = {
                 posts:[]
         };
         this.timer=null;//定义定时器
         this.handleVote=this.handleVote.bind(this);//绑定this     
   }

   componentDidMount(){
    this.timer=setTimeout(()=>{
        this.setState({
            posts:[
                {id:1,title:'大家一起讨论吧',author:'张三',date:'2017-09-01 10：00',vote:0},
                {id:2, title:'今天天气不错',author:'李四',date:'2017-09-01 10：00',vote:0},
                { id:3,title:'明天天气不错',author:'王五',date:'2017-09-01 10：00',vote:0}
                ]
        });
    },1000)
    }
    componentWillUnmount(){
        if(this.timer){
            clearTimeout(this.timer);
        }
     }

   handleVote(id){
    //根据帖子id找到对应帖子，并修改vote值
    const posts=this.state.posts.map(item=>{
        
        const newItem=item.id===id ? {...item,vote:item.vote+1}:item;
        return newItem;   
    });
    //使用新的帖子数组更新state 
    this.setState({posts});   
    }
    render() {
        return (<div className='container'>
            <h2>帖子列表：</h2> 
            <ul>
            {this.state.posts.map(
                item=><PortItem  
                post={item} 
                onVote={this.handleVote} 
                key={item.id}          
              />
            )}
            </ul>
        </div>);  
    }
}

export default PostList;

，PostItem组件设计为一个无状态组件，只负责每一个帖子的展示，内部有一个状态变量vote记录每个帖子的点赞数，主要设计为组件函数，根据PostList传递的post属性渲染UI，当发生点赞行为时，调用props.onVote方法将点赞逻辑交给PostList中的handleVote方法处理。代码如下：

//PortItem.jsx
import  React from 'react';
import './PostItem.css';

function PostItem(props){
  const handleClick=()=>{
    props.onVote(props.post.id);
  }
  const { post }=props
  return (<li className='item'>
    <div className='title'>{post.title}</div>
    <div className='author'>创建人：<span>{post.author}</span></div>
    <div>创建时间：<span>{post.date}</span></div>
    <div className='like'>
      <button onClick={handleClick}>点赞</button>
      &nbsp;
      <span>{post.vote}</span>
    </div>
    </li>);
}


export default PostItem;

本文从React基本知识说起，简要说明了React的特点和优缺点，组件概念和特点，简单组件的编写，最后以一简化的BBS项目讲述了组件的设计原则和技术细节。