Day1- React基础组件使用

React基础组件使用

什么是React组件？

React组件是构建用户界面的独立、可复用的代码片段。每个组件都封装了自己的逻辑和UI，可以像HTML标签一样使用。

深入理解：

组件化思维：将复杂的用户界面拆分成多个小的、独立的组件，每个组件负责特定的功能
可复用性：一次编写，多处使用，提高开发效率
封装性：组件内部的状态和逻辑对外部是隐藏的，只通过props接口与外部通信
组合性：小组件可以组合成更大的组件，形成完整的应用
声明式：描述UI应该是什么样子，而不是如何一步步构建UI

1. 函数组件的定义

基本语法

javascript 复制代码

function 组件名() {
  return <JSX元素>;
}

示例

javascript 复制代码

function Button() {
  return <button>点击我!</button>
}

2. 组件的使用方式

自闭合标签（推荐）、成对标签

javascript 复制代码

//自闭和标签
<Button />
//成对标签
<Button> </Button>

自闭合标签 ：当组件不需要包含子元素时使用，以/>结尾

优势：代码更简洁，符合React的推荐写法
使用场景：大多数情况下都推荐使用这种方式

成对标签：当组件需要包含子元素时使用，有开始标签和结束标签

使用场景：当组件内部需要传递子元素时
示例：<Button>点击我</Button> - 这里"点击我"就是子元素

3. 组件的基本结构

javascript 复制代码

// 1. 定义组件
function MyComponent() {
  // 组件的业务逻辑
  return (
    <div>
      <h1>Hello World</h1>
      <p>这是一个React组件</p>
    </div>
  );
}

// 2. 导出组件
export default MyComponent;

组件定义部分

函数声明 ：使用function关键字定义组件函数
组件名 ：MyComponent是组件的名称，必须使用PascalCase
函数体：包含组件的所有逻辑和渲染内容
业务逻辑：可以包含变量声明、计算、条件判断等JavaScript代码
return语句：必须返回JSX元素，这是组件要渲染的内容

4. 组件属性（Props）

接收属性

javascript 复制代码

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 使用
<Welcome name="张三" />

解构属性

javascript 复制代码

function Welcome({ name, age }) {
  return (
    <div>
      <h1>Hello, {name}</h1>
      <p>年龄: {age}</p>
    </div>
  );
}

实现效果

Props：组件的属性，是父组件向子组件传递数据的方式

只读性：Props是只读的，子组件不能直接修改props的值
数据流：数据只能从父组件流向子组件（单向数据流）
props对象：所有传递给组件的属性都会被打包成一个props对象
访问方式 ：通过props.属性名的方式访问具体的属性值

解构属性

javascript 复制代码

function Welcome({ name, age }) {
  return (
    <div>
      <h1>Hello, {name}</h1>
      <p>年龄: {age}</p>
    </div>
  );
}

5. 事件处理

javascript 复制代码

function Button() {
//业务逻辑
  const handleClick = () => {
    alert('按钮被点击了!');
  };
  
  return <button onClick={handleClick}>点击我</button>;
}

6. 条件渲染

javascript 复制代码

function UserGreeting({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h1>欢迎回来!</h1>;
  }
  return <h1>请先登录。</h1>;
}

条件渲染概念

动态UI：根据不同的条件显示不同的内容
条件判断：使用JavaScript的条件语句控制渲染内容
响应式：当条件改变时，UI会自动更新
灵活性：可以根据props、state或其他变量来决定渲染什么

7. 列表渲染

javascript 复制代码

function TodoList() {
  const todos = ['学习React', '写代码', '休息'];
  
  return (
    <ul>
      {todos.map((todo, index) => (
        <li key={index}>{todo}</li>
      ))}
    </ul>
  );
}

8. 组件组合

javascript 复制代码

function App() {
  return (
    <div className="App">
      <Header />
      <Main />
      <Footer />
    </div>
  );
}

9. 最佳实践

组件命名

使用PascalCase（大驼峰命名）
名称要有意义，描述组件的功能

组件结构

保持组件简单和专注
一个组件只做一件事
合理拆分复杂组件

代码组织

将相关逻辑放在一起
使用注释说明复杂逻辑
保持代码整洁和可读性

总结

React组件是构建现代Web应用的基础。通过函数组件、Props、State和事件处理，我们可以创建交互式的用户界面。记住要保持组件的简单性和可复用性，这样你的代码会更加清晰和易于维护。