Go back

react-demo

Edit page

just for copy

速通一下react （仅有简单的html基础，js了解浅薄，css更不用说，基本不会用，之前只跟视频用过vue

tsx类似于jsx

function App(){
    ...

    return (
        <>
        <h1> 
         ...  // 只能使用html和react组件
        </>
    )
}

且jsx标记中，我们只能用html元素和其余react组件，数据渲染表达式需要使用 {} 包括起来

React 的核心是构建组件 (Components)。你可以把组件想象成乐高积木，每个积木都有自己的功能和外观，你可以把它们组合起来，搭建出复杂的应用。

1. 组件 (Components)

在现代 React 中，我们主要使用函数式组件 (Functional Components)。

什么是函数式组件？ 它就是一个普通的 JavaScript 函数，这个函数会返回 JSX。

示例：

// 这是一个最简单的函数式组件
function WelcomeMessage() {
  return <h1>Hello, React!</h1>; // 返回 JSX
}

// 在另一个组件中使用 WelcomeMessage
function App() {
  return (
    <div>
      <WelcomeMessage /> {/* 使用 WelcomeMessage 组件 */}
      <p>This is my first React app.</p>
    </div>
  );
}

关键点：

2. JSX (JavaScript XML)

JSX 不是 HTML，它是一种 JavaScript 的语法扩展。 它看起来很像 HTML，但实际上它允许你在 JavaScript 代码中编写类似 HTML 的结构。

为什么用 JSX？ 因为它让 UI 的描述变得非常直观和声明式。

JSX 里能放什么？

  1. HTML 标签： 你可以直接写 <div>, <p>, <h1>, <button> 等。

    const element = <div>这是一个 div 标签。</div>;

  2. React 组件： 就像上面 App 组件里那样，你可以把其他组件当作标签一样使用。

    // 假设上面定义了 WelcomeMessage 组件
const myApp = (
  <div>
    <WelcomeMessage /> {/* 在 JSX 中使用 React 组件 */}
  </div>
);

  3. JavaScript 表达式： 这是 JSX 强大之处！你可以在 JSX 中嵌入任何有效的 JavaScript 表达式，只需要用花括号 {} 包裹起来。

    • 变量： 
      const name = '张三';
const greeting = <p>你好，{name}！</p>; // 渲染 "你好，张三！"
    • 数字和字符串： 
      const price = 99.99;
const productInfo = <p>商品价格：${price}</p>;
    • 函数调用： 
      function sum(a, b) {
  return a + b;
}
const result = <p>2 + 3 = {sum(2, 3)}</p>; // 渲染 "2 + 3 = 5"
    • 三元表达式 (用于条件渲染)： 
      const isLoggedIn = true;
const authStatus = (
  <p>{isLoggedIn ? '已登录' : '未登录'}</p> // 如果 isLoggedIn 为 true，渲染 "已登录"，否则渲染 "未登录"
);

注意： JSX 中不能直接使用 if/else 语句，但可以使用三元表达式或逻辑与 (&&)。

3. Props (属性 / Props)

Props 是 “properties” 的缩写。它们是你在创建组件时，从父组件向子组件传递数据的方式。

理解 Props： 你可以把 Props 想象成 HTML 标签的属性，或者 JavaScript 函数的参数。它们是子组件接收到的配置信息。

如何传递 Props？ 在父组件的 JSX 中，将数据作为属性传递给子组件：

// 父组件 App.jsx
function App() {
  return (
    <div>
      {/* 传递 name 和 age 作为 props 给 GreetUser 组件 */}
      <GreetUser name="小明" age={30} />
      <GreetUser name="小红" age={25} />
    </div>
  );
}

如何接收 Props？ 在子组件的函数定义中，将 props 作为第一个参数接收。你可以通过 props.属性名 来访问这些数据，或者使用解构赋值让代码更简洁。

// 子组件 GreetUser.jsx
// 方式一：使用 props 对象
function GreetUser(props) {
  return (
    <p>你好，{props.name}！你今年 {props.age} 岁了。</p>
  );
}

// 方式二：使用解构赋值 (更推荐)
function GreetUser({ name, age }) { // 直接解构出 name 和 age 属性
  return (
    <p>你好，{name}！你今年 {age} 岁了。</p>
  );
}

Props 的重要特性：

4. State (状态 / State)

State 是组件内部管理的数据。当 State 发生变化时，React 会重新渲染（更新）组件，从而更新 UI。

理解 State：

如何在函数式组件中使用 State？ 使用 useState 这个 React Hook。

import React, { useState } from 'react'; // ① 导入 useState Hook

function Counter() {
  // ② 使用 useState 定义一个状态变量 `count` 和一个更新它的函数 `setCount`
  // `0` 是 `count` 的初始值
  const [count, setCount] = useState(0);

  // ③ 定义一个函数来更新状态
  const increment = () => {
    setCount(count + 1); // 调用 setCount 函数来更新 count 的值
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    <div>
      <p>当前计数：{count}</p> {/* ④ 在 JSX 中使用状态变量 */}
      <button onClick={increment}>增加</button> {/* ⑤ 绑定事件处理函数 */}
      <button onClick={decrement}>减少</button>
    </div>
  );
}

// 在 App 组件中使用 Counter 组件
function App() {
  return (
    <div>
      <h1>我的计数器应用</h1>
      <Counter />
      <Counter /> {/* 你可以多次使用同一个组件，它们各自有独立的 state */}
    </div>
  );
}

useState 的返回值： useState 返回一个数组，通常我们会使用数组解构来获取这两个值：

  1. 当前的状态值： 上面例子中的 count。
  2. 更新状态的函数： 上面例子中的 setCount。当你调用这个函数并传入新值时，React 会更新状态，并重新渲染组件。

为什么叫 useState 而不是 userStatus？ “userStatus” 可能指的是用户登录状态，那它就是一个具体的 state 变量名。useState 是 React 提供的一个通用函数，用来帮助你管理任何类型的“状态”（state）。

5. 事件处理 (Event Handling)

在 React 中，事件处理（如点击按钮、输入文字等）与 HTML 类似，但有一些小区别：

function MyButton() {
  const handleClick = () => {
    alert('按钮被点击了！');
  };

  return (
    <button onClick={handleClick}>点击我</button> {/* 传入一个函数 */}
  );
}

6. 条件渲染 (Conditional Rendering)

根据条件显示或隐藏组件或元素。最常用的方法是：

  1. 三元表达式 (condition ? expr1 : expr2)：

    function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <p>欢迎回来！</p>
      ) : (
        <p>请登录。</p>
      )}
    </div>
  );
}

  2. 逻辑与运算符 (&&)： 当你只想在条件为真时渲染某些内容，否则什么也不渲染时。

    function WarningSign({ showWarning }) {
  return (
    <div>
      {showWarning && <p style={{ color: 'red' }}>警告：这里有问题！</p>}
    </div>
  );
}
    • 原理： 在 JavaScript 中，true && expression 的结果是 expression，而 false && expression 的结果是 false。在 JSX 中，false、null、undefined 都不会被渲染。

7. 列表渲染 (List Rendering)

当你有一组数据（通常是数组），并希望为数组中的每个项渲染一个组件或元素时，使用 JavaScript 的 map() 方法。

核心：map() 方法和 key 属性。

function ShoppingList() {
  const items = [
    { id: 1, name: '苹果' },
    { id: 2, name: '香蕉' },
    { id: 3, name: '橙子' },
  ];

  return (
    <ul>
      {items.map(item => (
        // 每个列表项都需要一个唯一的 `key` 属性
        // `key` 帮助 React 识别哪些项发生了变化、被添加或被删除，提高性能
        <li key={item.id}>
          {item.name}
        </li>
      ))}
    </ul>
  );
}

key 属性的重要性：

总结一下：

好的，非常理解！我们重新聚焦在 组件 (Components) 和 Hooks 这两个核心概念上，并进行更深入的理论和实践剖析。这次我确保从您已有的“最基础”理解出发，逐步深入。

一、组件 (Components) 的深入理解

您已经知道组件是构建 UI 的基本单位，现在我们来深入了解它的哲学、种类、数据流以及如何更好地组织它们。

1. 组件的本质与哲学

2. 函数式组件 vs. 类组件 (简要了解)

3. Props 的深入理解

您已了解 Props 是从父组件向子组件传递数据的。

4. 组件的重新渲染 (Re-rendering)

二、Hooks 的深入理解

Hooks 是 React 16.8 引入的革命性功能，它让函数式组件也能拥有状态 (State) 和生命周期 (Lifecycle) 等能力，同时解决了类组件的一些痛点。

1. Hooks 的核心理念

2. useState 的深入理解

您已了解 useState 用来给函数式组件添加状态。

3. useEffect 的深入理解

您已了解 useEffect 用于处理副作用。

4. useContext (解决 Prop Drilling)

5. useReducer (管理复杂状态逻辑)

6. useRef (直接访问 DOM 或持久化值)

7. useCallback 和 useMemo (性能优化 Hooks)

这两个 Hooks 都用于记忆化 (Memoization)，以避免不必要的计算或函数重新创建，从而优化性能。

8. 自定义 Hooks (Custom Hooks)

Edit page
Share this post on:
Share this post via email
Next Post
self-learn