我最近回顾 React 文档的要点

此博客最初发布于 Medium

嘿，React 爱好者们！我最近深入研究了 React 文档，并想与您分享我的经验。对于那些希望在 React 中打下坚实基础的人来说，这是一份简明扼要的指南。让我们通过简单的解释和代码片段来分解核心概念。

这将是一个有点长的故事，但请坚持一下，一次性掌握 React 的所有核心概念。您会发现回顾和重新审视这些概念对于进一步进步是有益的。

目录

• 用 React 思考
• 组件和 JSX
• 道具
• 条件渲染
• 渲染列表
• 纯成分
• 用户界面树
• 交互和事件处理程序
• 状态
• 受控组件
• 不受控制的组件
• 参考文献
• 防止默认行为
• 事件传播
• 管理复杂状态
• 上下文
• 副作用
• useEffect 的最佳实践
• React 规则
• 自定义挂钩
• Hook 规则

在 React 中思考

React 就是将你的 UI 分解为可重用的组件。构建 React 应用程序时，请从以下位置开始：

1. 将 UI 分解为组件层次结构
2. 构建没有交互性的静态版本
3. 识别 UI 状态的最小表示
4. 确定您的州应该居住在哪里
5. 添加逆向数据流

参考：https://react.dev/learn/thinking-in-react

组件和 JSX

组件是 React 应用程序的构建块。它们可以是函数式的，也可以是基于类的（老式的，不推荐）。 JSX 是一种语法扩展，允许您在 JavaScript 中编写类似 HTML 的代码。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

参考资料：

• 组件：https://react.dev/learn/your-first-component
• JSX：https://react.dev/learn/writing-markup-with-jsx

道具

Props 是我们将数据从父组件传递到子组件的方式。它们是只读的，有助于保持我们的组件纯净。

function Greeting(props) {
  return <p>Welcome, {props.username}!</p>;
}

// Usage
<Greeting username="Alice" />

参考：https://react.dev/learn/passing-props-to-a-component

条件渲染

React 允许您根据特定条件有条件地渲染组件或元素。

function UserGreeting(props) {
  return props.isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>;
}

参考：https://react.dev/learn/conditional-rendering

渲染列表

使用map()函数在React中渲染元素列表。不要忘记为每个项目添加一个唯一的关键道具。

function FruitList(props) {
  const fruits = props.fruits;

  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit.id}>{fruit.name}</li>
      ))}
    </ul>
  );
}

参考：https://react.dev/learn/rendering-lists

纯成分

纯组件总是为相同的 props 和状态渲染相同的输出。它们是可预测的并且更容易测试。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

参考：https://react.dev/learn/keeping-components-pure

用户界面树

React 构建并维护 UI 的内部表示，称为虚拟 DOM。这使得 React 能够高效地仅更新实际 DOM 中已更改的部分。

参考：https://react.dev/learn/understanding-your-ui-as-a-tree

交互和事件处理程序

React 使用合成事件来跨不同浏览器一致地处理用户交互。

function Greeting(props) {
  return <p>Welcome, {props.username}!</p>;
}

// Usage
<Greeting username="Alice" />

参考：https://react.dev/learn/responding-to-events

状态

状态用于组件中随时间变化的数据。使用 useState 钩子向功能组件添加状态。

function UserGreeting(props) {
  return props.isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>;
}

参考：https://react.dev/learn/state-a-components-memory

受控组件

受控组件的状态由 React 控制。

function FruitList(props) {
  const fruits = props.fruits;

  return (
    <ul>
      {fruits.map((fruit) => (
        <li key={fruit.id}>{fruit.name}</li>
      ))}
    </ul>
  );
}

不受控制的组件

不受控制的组件直接在 DOM 上管理其状态。

function PureComponent(props) {
  return <div>{props.value}</div>;
}

参考文献

Refs 提供了一种访问 DOM 节点或在 render 方法中创建的 React 元素的方法。

function Button() {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return <button onClick={handleClick}>Click me</button>;
}

防止默认行为

使用 PreventDefault() 停止某些事件的默认浏览器行为。

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

事件传播

React 事件的传播方式与原生 DOM 事件类似。您可以使用 stopPropagation() 来防止事件冒泡。

function ControlledInput() {
  const [value, setValue] = useState('');
  return <input value={value} onChange={e => setValue(e.target.value)} />;
}

管理复杂状态

考虑使用 useReducer 钩子或 Redux 或 Zustand 等状态管理库来实现复杂的状态逻辑。

function UncontrolledInput() {
  return <input defaultValue="Hello" />;
}

语境

Context 提供了一种通过组件树传递数据的方法，而无需在每个级别手动向下传递 props。

import React, { useRef } from 'react';

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    inputEl.current.focus();
  };

  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

参考：https://react.dev/learn/passing-data-deeply-with-context

副作用

副作用是影响正在执行的函数范围之外的操作，例如数据获取或 DOM 操作。使用 useEffect 钩子来管理副作用。

function Form() {
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form submitted');
  };

  return <form onSubmit={handleSubmit}>...</form>;
}

useEffect的最佳实践

1. 始终在依赖数组中包含效果所依赖的所有变量。
2. 仔细考虑效果的依赖性，避免无限循环。
3. 清理useEffect返回函数中的副作用。

function Parent() {
  return (
    <div onClick={() => console.log('Parent clicked')}>
      <Child />
    </div>
  );
}

function Child() {
  const handleClick = (e) => {
    e.stopPropagation();
    console.log('Child clicked');
  };

  return <button onClick={handleClick}>Click me</button>;
}

参考资料：

• 你可能不需要 useEffect：https://react.dev/learn/you-might-not-need-an-effect
• 与效果同步：https://react.dev/learn/synchronizing-with-effects
• 反应式效果的生命周期：https://react.dev/learn/lifecycle-of-reactive-effects

反应规则

1. 组件名称始终以大写字母开头。
2. 关闭所有标签，包括自关闭标签。
3. 不要直接修改 props。
4. 尽可能保持组件纯净。

参考：https://react.dev/reference/rules

定制挂钩

自定义挂钩允许您将组件逻辑提取到可重用的函数中。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

钩子规则

1. 仅在组件的顶层调用钩子。
2. 仅从 React 函数组件或自定义钩子调用钩子。
3. 使用 eslint-plugin-react-hooks 来强制执行这些规则。

参考：https://react.dev/reference/rules/rules-of-hooks

我们的 React 之旅就这样结束了！请记住，最好的学习方法是实践。开始构建项目，尝试这些概念，并且当您需要更多详细信息时，不要害怕深入研究 React 文档。快乐编码！

以上是我最近回顾 React 文档的要点的详细内容。更多信息请关注PHP中文网其他相关文章！