react

React 是一个 JavaScript 库，它是当今最流行和行业领先的前端开发库。 JavaScript 是一种松散的类型化语言，因此，它捕获了运行时。这样做的结果就是 JavaScript 错误被捕获得非常晚，这可能导致严重的 bug。 当然 React 作为一个 JavaScript 库，也继承了这个问题。 干净代码(Clean code)是一种一致的编程风格，它使代码更容易编写、读取和维护。任何人都可以编写计算机可以理解的代码，但是优秀的开发人员可以编写人类可以理解的干净的代码。 干净的代码是一种以读者为中心的开发风格，它提高了我们的软件质量和可维护性。 编写干净代码需要编写具有清晰和简单的设计模式的代码，这使得人们可以轻松地阅读、测试和维护代码。因此，干净的代码可以降低软件开发的成本。这是因为编写干净的代码所涉及的原则，消除了技术债务。 在本文中，我们将介绍一些在使用 React 和 TypeScript 时使用的有用模式。 💡 为了让您的团队更容易地保持代码健康并优先处理技术债务工作，请尝试使用 Stepsize 的 VS Code 和 JetBrains 扩展。它们帮助工程师创建技术问题，将它们添加到迭代 中，并持续解决技术债务——而不离开编辑器。 现在让我们来了解一下在使用 React 和 Typescript 时应用的 10 个有用模式: 1. 使用默认导入来导入 React 考虑下面的代码: import * as React from "react"; 虽然上面的代码可以工作，但是如果我们不使用 React 的所有内容，那么导入它们是令人困惑的，也不是一个好的做法。一个更好的模式是使用如下所示的默认导出: import React, {useContext, useState} from "react"; 使用这种方法，我们可以从 React 模块中解构我们需要的东西，而不是导入所有的内容。 注意: 要使用这个选项，我们需要配置 tsconfig.json 文件，如下所示: { "compilerOptions": { "esModuleInterop": true" } } 在上面的代码中，通过将 esModuleInterop 设置为 true，我们启用了 allowSyntheticDefaultImports ，这对于 TypeScript 支持我们的语法非常重要。...

SOLID 是一套原则。它们主要是关心代码质量和可维护性的软件专业人员的指导方针。 React 不是面向对象，但这些原则背后的主要思想可能是有帮助的。在本文中，我将尝试演示如何应用这些原则来编写更好的代码。 在前一篇文章中，我们讨论了单一责任原则。今天，我们将讨论 SOLID 的第二个原则: 开闭原则。 本系列其他文章 如何应用 SOLID 原则在 React 中整理代码之单一原则 什么是开闭原则？ Robert c. Martin 认为这个原则是面向对象设计最重要的原则。但他不是第一个定义这个概念的人。Bertrand Meyer 于1988年在他的《面向对象软件构造》一书中写到了这一点。他解释了开放/封闭原则: 软件实体(类、模块、功能等)应该对扩展开放，但对修改关闭。 这个原则告诉您以这样一种方式来编写代码，即您能够在不更改现有代码的情况下添加其他功能。 让我们看看我们在哪里可以应用这个原则。 让我们从一个例子开始 假设我们有一个 User 组件，其中我们传递用户的详细信息，这个类的主要目的是显示该特定用户的详细信息。 这是一个很简单的开始。但是我们的生活并不是那么简单。几天后，我们的经理告诉我们系统中有三种类型的用户: SuperAdmin、 Admin 等等。 它们每个都有不同的信息和功能。 一个糟糕的解决方案 第一个也是显而易见的解决方案：在组件中包含一个条件，并根据不同的用户类型呈现不同的信息。 import React from 'react'; export const User = ({user}) => { return <> <div> Name: {user.name}</div> <div> Email: {user.email}</div> { user.type === 'SUPER_ADMIN' && <div> Details about super admin</div> } { user.type === 'ADMIN' && <div> Details about admin</div> } </> } 你知道这里出了什么问题吗？...

基本规范 每个文件只包含的一个 React 组件： 联系紧密的组件可以使用「命名空间」的形式； 每个文件中可包含多个纯函数组件。 始终使用 JSX 语法，不要使用 React.createElement 创建 ReactElement，以提高编写速度、可读性、可维护性（没有 JSX 转换的特殊场景例外，如在 console 中测试组件）。 文件规范 组件文件使用一致的.js或 .jsx后缀。所有组件文件的后缀名从.js或.jsx中任选其一。不应在项目中出现部分组件为.js文件，部分为.jsx的情况。 每个存放组件的目录使用一个index.js/index.jsx以命名导出的形式暴露所有组件。同目录内的组件相互引用使用import Foo from './Foo';进行。引用其它目录的组件使用import {Foo} from '../component';进行。 命名规范 文件名：使用大驼峰命名法（PascalCase），如 MyComponent.jsx； 组件命名：组件名称和文件名一致，如 MyComponent.jsx 里的组件名应该是 MyComponent；一个目录的根组件使用 index.jsx 命名，以目录名称作为组件名称； 引用命名：React 组件使用大驼峰命名法（PascalCase）； 高阶组件使用camelCase命名。高阶组件事实上并非一个组件，而是一个“生成组件类型”的函数，因此遵守JavaScript函数命名的规范，使用camelCase命名。 使用onXxx形式作为props中用于回调的属性名称。使用统一的命名规则用以区分props中回调和非回调部分的属性，在JSX上可以清晰地看到一个组件向上和向下的逻辑交互。 使用withXxx或xxxable形式的词作为高阶组件的名称。高阶组件是为组件添加行为和功能的函数，因此使用如上形式的词有助于对其功能进行理解。 带命名空间的组件 如果一个组件有许多关联子组件，可以以该组件作为命名空间编写、调用子组件。 class Form extends React.Component { // ... } class Row extends React.Component {} class Label extends React.Component {} class Input extends React.Component {} Form.Row = Row; Form.Label = Label; Form....

本文是译文，原文地址是：https://medium.com/@sdolidze/the-iceberg-of-react-hooks-af0b588f43fb React Hooks 与类组件不同，它提供了用于优化和组合应用程序的简单方式，并且使用了最少的样板文件。 如果没有深入的知识，由于微妙的 bug 和抽象层漏洞，可能会出现性能问题，代码复杂性也会增加。 我已经创建了12个案例研究来演示常见的问题以及解决它们的方法。 我还编写了 React Hooks Radar 和 React Hooks Checklist，来推荐和快速参考。 案例研究： 实现 Interval 目标是实现计数器，从 0 开始，每 500 毫秒增加一次。 应提供三个控制按钮: 启动、停止和清除。 Level 0：Hello World export default function Level00() { console.log('renderLevel00'); const [count, setCount] = useState(0); return ( <div> count => {count} <button onClick={() => setCount(count + 1)}>+</button> <button onClick={() => setCount(count - 1)}>-</button> </div> ); } 这是一个简单的、正确实现的计数器，用户单击时计数器的增加或减少。 Level 1：setInterval export default function Level01() { console....

前言 目的 本文只介绍函数式组件特有的性能优化方式，类组件和函数式组件都有的不介绍，比如 key 的使用。另外本文不详细的介绍 API 的使用，后面也许会写，其实想用好 hooks 还是蛮难的。 面向读者 有过 React 函数式组件的实践，并且对 hooks 有过实践，对 useState、useCallback、useMemo API 至少看过文档，如果你有过对类组件的性能优化经历，那么这篇文章会让你有种熟悉的感觉。 React 性能优化思路 我觉得React 性能优化的理念的主要方向就是这两个： 减少重新 render 的次数。因为在 React 里最重(花时间最长)的一块就是 reconction(简单的可以理解为 diff)，如果不 render，就不会 reconction。 减少计算的量。主要是减少重复计算，对于函数式组件来说，每次 render 都会重新从头开始执行函数调用。 在使用类组件的时候，使用的 React 优化 API 主要是：shouldComponentUpdate 和 PureComponent，这两个 API 所提供的解决思路都是为了减少重新 render 的次数，主要是减少父组件更新而子组件也更新的情况，虽然也可以在 state 更新的时候阻止当前组件渲染，如果要这么做的话，证明你这个属性不适合作为 state，而应该作为静态属性或者放在 class 外面作为一个简单的变量 。 但是在函数式组件里面没有声明周期也没有类，那如何来做性能优化呢？ React.memo 首先要介绍的就是 React.memo，这个 API 可以说是对标类组件里面的 PureComponent，这是可以减少重新 render 的次数的。 可能产生性能问题的例子 举个例子，首先我们看两段代码： 在根目录有一个 index.js，代码如下，实现的东西大概就是：上面一个 title，中间一个 button(点击 button 修改 title)，下面一个木偶组件，传递一个 name 进去。...