react基本语法（一）这些是 React 中最常见的基础概念，涉及了状态管理、条件渲染、事件处理、父子组件传值和动态样

1. 基本状态管理：`useState`

useState 用来在函数组件中管理状态。通过它，我们可以创建和更新组件的状态。

示例：点击按钮计数器

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(1);
  return (
    <>
      <div>{count}</div>
      <button onClick={() => setCount(count + 1)}>增加</button>
    </>
  );
}

export default Counter;

2. 遍历数组：`map` 方法

使用 map 方法遍历数组并渲染每个元素，通常用于渲染列表。

示例：渲染人物列表

function PeopleList() {
  const people = [
    { id: 1, name: "小明", hobby: "跑步" },
    { id: 2, name: "小红", hobby: "游泳" },
    { id: 3, name: "小李", hobby: "读书" },
  ];
  return (
    <ul>
      {people.map(person => (
        <li key={person.id}>{person.name} - {person.hobby}</li>
      ))}
    </ul>
  );
}

export default PeopleList;

3. 条件渲染

React 中可以通过条件判断来决定是否渲染某些内容。常用的条件渲染方式有 if 语句和三目运算符。

示例：显示登录状态

import { useState } from "react";

function LoginStatus() {
  const [isLoggedIn, setLoginStatus] = useState(false);
  return (
    <>
      <button onClick={() => setLoginStatus(!isLoggedIn)}>切换登录状态</button>
      {isLoggedIn ? <div>您已登录</div> : <div>登录中...</div>}
    </>
  );
}

export default LoginStatus;

4. 复杂条件渲染

通过 switch 语句进行复杂的条件渲染，适用于多个条件的判断。

示例：显示不同的 token 信息

function TokenInfo() {
  const token = "userToken";

  switch (token) {
    case "":
      return <div>token为空</div>;
    case "userToken":
      return <div>token为userToken</div>;
    default:
      return <div>默认情况</div>;
  }
}

export default TokenInfo;

5. 父子组件传值

父组件可以通过 props 向子组件传递数据，从而实现组件间的传值。

示例：父子组件传值

function Parent({ children }) {
  return (
    <div>
      <div>我是父组件</div>
      {children}
    </div>
  );
}

function Child() {
  return <div>我是子组件</div>;
}

function App() {
  return <Parent><Child /></Parent>;
}

export default App;

6. 事件处理

React 中通过 onClick 等事件属性处理用户的交互行为。

示例：点击按钮输出信息

function ClickButton() {
  return (
    <button onClick={() => console.log("按钮被点击了")}>
      点击我
    </button>
  );
}

export default ClickButton;

7. 动态类名控制：`classNames` 库

classNames 用来动态控制 CSS 类名，依据条件给元素添加类名。

示例：动态控制样式

import classNames from "classnames";

const StyleExample = () => {
  const isActive = true; // 控制是否激活的状态

  return (
    <div className={classNames("default-style", { "active-style": isActive })}>
      这是一个示例
    </div>
  );
};

export default StyleExample;

总结

这些是 React 中最常见的基础概念，涉及了状态管理、条件渲染、事件处理、父子组件传值和动态样式控制。掌握了这些基础，你可以开始构建更复杂的 React 应用。随着你对 React 的深入了解，接下来可以学习 useEffect、context 等更高级的功能。

react基本语法（一）

1. 基本状态管理：useState