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,以获得更好的可读性和简洁性。