React 组件之道：探索插槽与状态的奥秘

2023-12-15 19:46:30

插槽与状态：深入探索 React 组件的基础

踏上构建用户界面的卓越之旅

React 中的组件犹如搭建应用程序大厦的砖块，而插槽和状态则是构建这些砖块不可或缺的粘合剂和基石。掌握这些基本概念，将为我们开启构建强大且灵活的 React 应用程序的大门。

组件：可重用的代码模块

想象一下，我们正在建造一座宏伟的城堡。为了简化施工，我们将其分解为较小的、可管理的部分，例如塔楼、城墙和吊桥。在 React 中，组件扮演着类似的角色，它们是可重用的代码模块，负责特定的行为和外观。通过将应用程序分解为更小的组件，我们可以提高其可维护性和可读性。

插槽：内容分发的桥梁

插槽就好比城堡塔楼之间的拱门，它允许塔楼之间相互连接，同时保持它们各自的独立性。在 React 中，插槽也是一种通信机制，它使组件能够将内容分发给子组件，同时父组件仍能保持对整体布局和结构的控制权。借助插槽，我们可以动态地插入内容，而无需修改父组件的结构。

状态：组件内部的可变数据

每个组件都有自己的内在状态，犹如塔楼内的储藏室，存放着当前状态的信息。当组件的状态发生变化时，React 会重新渲染该组件及其所有子组件。状态使我们能够管理组件的行为并响应用户交互或数据变化。

实战演练：动态导航栏

让我们用一个实际例子来加深对插槽和状态的理解。假设我们要建造一个动态导航栏，其中包含一个标题和一个项目列表，我们可以动态地添加或删除项目。

import React, { useState } from 'react';

const NavigationBar = () => {
  const [items, setItems] = useState(['Home', 'About', 'Contact']);

  const addItem = () => {
    setItems([...items, `Item ${items.length + 1}`]);
  };

  const removeItem = (index) => {
    setItems(items.filter((item, i) => i !== index));
  };

  return (
    <div>
      <h1>Navigation Bar</h1>
      <ul>
        {items.map((item, index) => (
          <li key={index}>
            {item}
            <button onClick={() => removeItem(index)}>X</button>
          </li>
        ))}
      </ul>
      <button onClick={addItem}>Add Item</button>
    </div>
  );
};

export default NavigationBar;