组件化开发之如何封装组件---react

目录

什么是组件

为什么需要封装组件

封装组件的四要素

组件的分类

函数组件（Function Component）

类组件（Class Component）

什么是组件

在React中，组件是构造用户界面的基本单位。组件可以理解为一个独立且可复用的代码单元。它封装了特定的功能和UI呈现。React应用程序是由多个组件构成的，这些组件可以嵌套在一起形成复杂的UI结构。

俗话：当谈论组件时，就像在搭积木一样，每个组件都是一个独立的、可以重复使用的代码块，用来构建网页或应用的各个部分。比如界面的布局，像按钮、文本输入框这样的东西。

为什么需要封装组件

封装组件有好处，提高代码的开发质量，可维护性和开发效率，同时可减少代码的冗余度和代码的重复性，实现高内聚低耦合。

封装组件的四要素

1.Props（属性）:Props是组件接收的输入，通过props可以向组件传递数据和配置信息。良好的组件设计应考虑清晰的props接口，定义哪些props是必需的，那些是可选的，以及它们的类型和默认值。

2.state（状态）:State 是组件内部管理的状态数据。有时组件需要维护一些动态数据或者响应用户操作而变化的状态。良好的组件封装应该明确组件的状态需要如何初始化，以及如何在组件生命周期内更新和管理状态。

3.Lifecycle(声明周期)：组件的生命周期方法包括组件挂载、更新和卸载时调用的不同阶段。理解和正确利用生命周期方法能够帮助我们优化组件的行为和性能，例如在挂载时初始化数据、在更新时更新状态或重新计算属性，以及在卸载时清理资源。

4.Methods(方法):方法指的是组件内部定义的函数或方法，用于处理用户操作、响应事件或执行其他逻辑。良好的组件封装应该考虑清晰的方法定义和组织，确保组件功能模块化、易于维护和扩展。

组件的分类 

函数组件（Function Component）

 1.语法简洁：函数组件是使用函数来定义的，语法相对简洁明了，适用于简单的UI界面和状态管理不复杂的场景。

2.无状态：函数组件本身是无状态的，即没有内部状态（state）或声明周期方法。这使得函数组件在数据流向简单和逻辑清晰的情况下非常有用。

3.Hooks支持：自 React 16.8 版本引入Hooks后，函数组件可以使用useState、useEffect等Hooks来管理内部状态和执行副作用操作。这使得函数组件具备了类组件中的部分功能，例如状态管理和生命周期替代。

4.性能优化：函数组件因为没有类组件的实例化和额外的生命周期方法，通常比较轻量，渲染性能较高。Hooks的引入使得函数组件可以更灵活地优化性能。

import React, { useState } from 'react';

const Counter = () => {
  // 使用 useState Hook 来定义状态 count，初始值为 0
  const [count, setCount] = useState(0);

  // 定义增加计数的函数
  const increment = () => {
    setCount(count + 1);
  };

  // 定义减少计数的函数
  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <h2>Counter</h2>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

类组件（Class Component）

1.react中的类：类组件是使用ES6的class语法定义的，可以包含内部状态（state）和生命周期方法（componentDidMount、componentDidUpdate等）。

2.复杂逻辑和状态管理：类组件适合处理复杂的逻辑和状态管理，例如涉及到多个生命周期方法、数据获取、事件处理等复杂场景。

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    // 初始化状态
    this.state = {
      count: 0
    };
  }

  // 增加计数器的方法
  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  // 减少计数器的方法
  decrement = () => {
    this.setState({ count: this.state.count - 1 });
  };

  render() {
    return (
      <div>
        <h2>Counter</h2>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
        <button onClick={this.decrement}>Decrement</button>
      </div>
    );
  }
}

export default Counter;