React 最佳实践

在本文中，我想分享一些需要注意的细节，这将使我们成为更好的 React 开发人员

将逻辑与 JSX 分离

• 将逻辑（或功能部分）从 JSX 中分散出来总是好的，这样代码会更干净、更易于编辑，请查看下面的示例，了解如何处理 onClick 事件，而不是将其直接放在元素内部

import React from 'react';

function Todo() {
  let condition = true;

  const addHandler = () => {
    if (condition) {
      //do api call
    }
  }

  return (
    <div>
      <button
        onClick={() => addHandler()}
      >Add</button>
    </div>
  )
}

export default Todo;

拆分成小组件并使其可重复使用

• 在这一部分中，我们尝试从实际项目中分离出一个 UI 组件

1. NavBar：包含 HamBtn 的顶部导航栏容器
2. HamBtn：3 条水平线按钮，可用于其他部分
3. TodoRow：待办事项行，包含文本和其他操作按钮
4. RadioBtn：切换按钮
5. DeleteBtn：删除待办事项按钮
6. 按钮：具有多个动态属性的通用按钮组件
7. 容器：待办事项列表的整个容器。

所有这些都将是独立的组件，从长远来看这将对我们有帮助，如果项目变得更大，几乎所有组件都可以重复使用😎

状态管理（Redux 或 Context）

• 在使用 Redux 库的情况下，我强烈建议使用 Sagas，它将帮助您进行异步 API 调用
  Redux：非常适合需要高频状态更新的大型应用程序

• 对于 Context Api，它比 Redux 简单得多，您不需要下载任何库
  Context API：资源丰富，非常适合状态变化最小的小型应用程序

Hooks 和函数组件

• 不再有“这个”
• 更少的代码行
• 调试、测试和重构更容易

我认为大多数开发人员已经在使用基于这两个的所有项目，但我只是想提一下😁

样式组件

• Styled-Components 是在现代 JavaScript 中使用 CSS 的新方法之一
• 它旨在成为 CSS 模块的后继者，一种编写 CSS 的方式，其范围仅限于单个组件，并且不会泄漏到页面上的任何其他元素

import React from 'react';
import { Text } from './SubTitle.styled';

function SubTitle() {
  return (
    <Text>Hello</Text>
  )
}
export default SubTitle;

import styled from "styled-components";

export const Text = styled.span`
  color: #AAA;
  font-size: 20px;
`;

测试

• 单元测试 - （检查应用程序的单个组件，以获得更关键的功能）
• 集成测试——（检查模块的不同部分是否协同工作）
• 端到端测试 - （涉及从头到尾测试应用程序的工作流程，旨在复制真实的用户场景）

打字稿

TypeScript 是“可编译为纯 JavaScript 的类型化 JavaScript 超集”。

在 React 中使用 Typescript 将帮助你开发更稳定、强类型且集成速度更快的组件，让我们来看一个最简单的例子

interface Props {
  label: string;
  onClick: () => void;
}

function Button({ label, onClick, ...props }: Props) {
  return (
    <button
      onClick={onClick}
      {...props}
    >
      {label}
    </button>
  )
}

export default Button;

固有元素：
固有元素在特殊接口 JSX.IntrinsicElements 上查找。默认情况下，如果未指定此接口，则一切正常，并且固有元素不会进行类型检查。但是，如果存在此接口，则会将固有元素的名称作为 JSX.IntrinsicElements 接口上的属性进行查找。

内在元素将允许我们使用元素的原生“props”

export type Props = JSX.IntrinsicElements["button"] & {
  label: string;
}

<Button
  label={'SUBMIT'}
  onClick={() => console.log('CLICK')}
  onBlur={() => console.log('BLUR')}
/>

React 是一个很棒的库，你可以拆分和组织你的代码，使其变得非常灵活和可扩展，希望保持它的简单和高级

希望它有用，就是这样😊