React基础

一、组件

React 应用程序是由 组件 组成的。一个组件是 UI（用户界面）的一部分，它拥有自己的逻辑和外观。组成网页单个部分的一组代码,如按钮、导航栏、卡片等，也可以大到整个页面。它是组成网页单个部分的一组代码,如按钮、导航栏、卡片等。它就像一个JavaScript函数,但返回一个渲染的元素。它接受称为"prop"的参数。组件以大写字母命名。

函数组件示例

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

注意事项

• 推荐使用函数组件而不是基于类的组件。

• 函数组件通常被称为无状态组件。

二、JSX

JSX是JavaScript XML的缩写,它允许我们在React中编写HTML。它引入了类似XML的标签和属性来创建React元素。它通过让你在.jsx文件中编写类似HTML的代码,使创建React组件变得容易。JSX使代码可读性更强、更整洁,而不是使用复杂的JavaScript。React DOM使用驼峰式命名属性,如htmlFor、onClick。

JSX 比 HTML 更加严格。你必须闭合标签，如 <br />。你的组件也不能返回多个 JSX 标签。你必须将它们包裹到一个共享的父级中，比如 <div>...</div> 或使用空的 <>...</> 包裹

JSX示例

function AboutPage() {
  return (
    <>
      <h1>About</h1>
      <p>Hello there.<br />How do you do?</p>
    </>
  );
}

TSX是包含JSX语法的TypeScript文件的文件扩展名。使用TSX,你可以编写类型检查的代码,同时使用现有的JSX语法。使用TSX文件,你可以同时使用TypeScript和JSX编写React组件。

TSX示例

interface AgeProps {
  age: number;
}

const GreetAge = (props: AgeProps) => {
  return (
    <div>
      你好,你 {props.age} 岁了。
    </div>
  );
};

三、Fragments

当你需要单个元素时，你可以使用 <Fragment> 将其他元素组合起来，使用 <Fragment> 组合后的元素不会对 DOM 产生影响，就像元素没有被组合一样。在大多数情况下，<Fragment></Fragment> 可以简写为空的 JSX 元素 <></>。

Fragments示例

function Post() {
  return (
    <>
      <PostTitle />
      <PostBody />
    </>
  );
}

注意事项

• Fragments使代码更整洁、更易读。

• 它们在内存使用上更高效。

• 它们不能有CSS样式。

四、Props

React 组件使用 props 来互相通信。每个父组件都可以提供 props 给它的子组件，从而将一些信息传递给它。Props 可能会让你想起 HTML 属性，但你可以通过它们传递任何 JavaScript 值，包括对象、数组和函数。

props示例

//父组件
function Header() {
  <Avatar
    size={100}
    person={{
      name: "Katsuko Saruhashi",
      imageId: "YfeOqp2",
    }}
  />;
}
//子组件
function Avatar({ person, size }) {
  return (
    <img
      className="avatar"
      src={getImageUrl(person)}
      alt={person.name}
      width={size}
      height={size}
    />
  );
}

注意事项

• Props是只读的,这确保了子组件不会操纵来自父组件的值。不要尝试“更改 props”。

五、State

当用户与组件交互时,组件需要跟踪某些值。例如,当用户点击亮/暗模式主题切换按钮时,它的值会改变(从亮到暗,反之亦然)。组件需要记住主题的当前值。在React中,这种特定于组件的内存被称为state。

定义state的示例

import { useState } from 'react';
const [index, setIndex] = useState(0);

注意事项

• 在顶级组件中定义state总是一个好习惯,这样可以更容易地与其他子组件共享,并确保单一的事实来源。

六、hook

在 React 中，useState 以及任何其他以“use”开头的函数都被称为 Hook

hook示例

import { useState } from 'react';
const [index, setIndex] = useState(0);
const [showMore, setShowMore] = useState(false);

注意事项

• 以 use 开头的函数——只能在组件或自定hook的最顶层调用。 你不能在条件语句、循环语句或其他嵌套函数内调用 Hook。Hook 是函数，但将它们视为关于组件需求的无条件声明会很有帮助。在组件顶部 “use” React 特性，类似于在文件顶部“导入”模块。
• 惯例是将这对返回值命名为 const [thing, setThing]。你也可以将其命名为任何你喜欢的名称，但遵照约定俗成能使跨项目合作更易理解。

七、Context API

Context API用于在组件树中共享数据(如state、函数),而无需在每一级手动传递props。它通过简化状态管理和直接与将使用它的子组件共享数据来避免"prop钻取"。

createContext()方法用于创建一个context。这个函数返回一个context对象,其中包含两个组件 - Provider和Consumer。

Provider用于包裹你希望context可用的组件树部分。它接受一个必需的value prop,其中包含你想要在其他组件之间共享的数据。

useContext钩子用于访问数据。

Context API示例

使用createContext()方法创建一个context。将子组件包裹在Context Provider中,并提供state值。

import { useState, createContext} from "react";

const UserContext = createContext();

function ParentCounter() {
  const [count, setCount] = useState(10);

  return (
    <UserContext.Provider value={count}>
      <h1>{`当前计数: ${count}!`}</h1>
      <Button />
    </UserContext.Provider>
  );
}

使用useContext钩子访问count的值。

mport { useContext } from "react";

function GrandChildConsumer() {
  const count = useContext(UserContext);

  return (
    <>
      <h1>这是GrandChildConsumer</h1>
      <h2>{`当前计数: ${count}`}</h2>
    </>
  );
}

注意事项

通常使用useContext钩子而不是Consumer,以获得更好的可读性和简洁性。