React基础知识

https://zh-hans.react.dev/learn

一、组件

• React 组件是返回标签的 JavaScript 函数。
• React 组件必须以大写字母开头，而 HTML 标签则必须是小写字母。
• export default关键字指定了文件中的主要组件。

function MyButton() {
  return (
    <button>
      I'm a button
    </button>
  );
}

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}

二、JSX

js内定义的一套XML语法。

• 标签必须闭合，如 <br />。
• 组件不能返回多个 JSX 标签，必须将它们包裹到一个共享的父级中，比如 <div></div> 或<></> 。

三、样式设计

className=CSS中class

四、显示数据

const user = {
  name: 'Hedy Lamarr',
  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
  imageSize: 90,
};

export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={'Photo of ' + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize
        }}
      />
    </>
  );
}

五、条件渲染

使用普通的JavaScript语句。

1. if语句：

let content;
if (isLoggedIn) {
  content = <AdminPanel />;
} else {
  content = <LoginForm />;
}
return (
  <div>
    {content}
  </div>
);

2. ?表达式：

<div>
  {isLoggedIn ? (
    <AdminPanel />
  ) : (
    <LoginForm />
  )}
</div>

3. 逻辑表达式

<div>
  {isLoggedIn && <AdminPanel />}
</div>

六、列表渲染

map函数

const listItems = products.map(product =>
  <li key={product.id}>
    {product.title}
  </li>
);

return (
  <ul>{listItems}</ul>
);

<li> 有一个key属性，用于区分兄弟节点，如同数据库的ID。

七、响应事件

声明事件响应函数，如onClick。不要调用事件处理函数，把函数传递给事件即可。

八、更新界面

import { useState } from 'react';

useState包括当前的 state（count），以及用于更新它的函数（setCount），可自定义变量名。

function MyButton() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <button onClick={handleClick}>
      Clicked {count} times
    </button>
  );
}

以 use 开头的函数被称为Hook，只能在组件或其他 Hook的顶层调用 Hook。

九、组件间共享数据

1. 将state 上移到MyApp 中，再将 MyApp 中的点击事件处理函数以及state一同向下传递到每个 MyButton中。
2. count state以及 handleClick 事件处理函数，并将它们作为prop 传递给了每个按钮。
3. 改变MyButton读取父组件传来的prop。

import { useState } from 'react';

export default function MyApp() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount(count + 1);
  }

  return (
    <div>
      <h1>Counters that update together</h1>
      <MyButton count={count} onClick={handleClick} />
      <MyButton count={count} onClick={handleClick} />
    </div>
  );
}

function MyButton({ count, onClick }) {
  return (
    <button onClick={onClick}>
      Clicked {count} times
    </button>
  );
}

十、目录结构

App.js 创建组件

styles.css React应用的样式

index.js 连接组件与web浏览器