寥寥300行代码！用React打造自定义组件，速成开发入门！

2023-12-06 05:20:49

React是一项强大的JavaScript库，可用于构建用户界面，而自定义组件是React开发的基石。在本文中，我们将带您了解如何使用300行代码在React中创建自定义组件。

第一步，准备工作。我们先使用最新版create-react-app，在example/目录下创建一个demo项目：

npx create-react-app example
cd example

跑起来后，将index.js替换如下（要去掉webpack的ModuleScopePlugin）：

import React from "react";
import ReactDOM from "react-dom";

// 自定义组件
const MyComponent = () => {
  return <h1>Hello World!</h1>;
};

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

然后，就可以在浏览器中看到“Hello World!”显示在页面上。这就是使用React创建自定义组件的过程。

接下来，我们来探讨一下在React中创建自定义组件的步骤。

定义组件：使用React.createClass()或ES6的class创建组件，组件本质上是一个JavaScript类。
渲染组件：组件需要一个render()方法来渲染其内容。
使用组件：在React应用程序中，您可以使用组件就像使用任何其他HTML元素一样。

通过这三个步骤，您就可以轻松地使用React创建自定义组件，并将其应用到项目中。

在React中创建自定义组件有很多好处。

代码复用： 组件可以重复使用，减少代码冗余，提高开发效率。
封装性： 组件可以将相关代码封装在一起，提高代码的可维护性和可读性。
灵活性： 组件可以组合使用，以创建更复杂的UI。

现在，让我们来尝试一个更复杂的例子。我们创建一个名为“Counter”的组件，它包含一个按钮和一个数字，点击按钮可以增加数字。

import React, { useState } from "react";

// 自定义组件
const Counter = () => {
  const [count, setCount] = useState(0);

  const handleButtonClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <button onClick={handleButtonClick}>+</button>
      <span>{count}</span>
    </div>
  );
};

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