React从入门到精通

你真的了解 React 吗？我们在面试中往往涉及 React 时，第一个问题就是“解释 React 是什么”。解释一种技术是什么，在面试中也是非常常见的引起 话题的题目。本篇文章我就带你掌握这一类概念

在日常的 React 开发工作中，我们已经习惯了使用 JSX 来描述 React 的组件内容。关于 JSX 语法本身，相信每位 React 开发者都不陌生 JSX 到底是什么 JSX 到底是什么，我们

生命周期（Life Cycle）的概念应用很广泛，特别是在经济、环境、技术、社会等诸多领域经常出现，其基本涵义可以通俗地理解为“从摇篮到坟墓”（Cradle-to-Grave）的整个过程 React整

使用场景 必须使用打包程序（例如 webpack）打包代码，并使用 Babel 等编译器进行代码转换。 你需要针对生产环境进行优化，例如代码拆分。 你可能需要对一些页面进行预先渲染以提高页面性能和 S

虽然 React 提供了Virtual DOM/DOM Diff  等优秀的能力来提高渲染性能，但是在实际使用过程中，我们经常会遇到父组件更新，不需要更新子组件的场景，此时必须考虑利用 React 的

俺作为 Reac 初学者时，总是对组件声明的几种方式及其暗坑云里雾里！React中高阶组件是什么?高阶组件使用有什么缺点? render props又是什么? 都有有哪些使用场景? 为什么又要出来一个

这篇文章将介绍在 React 和 TypeScript 应用中,如何取消fetch请求一个 React 组件以下是一个通过 Web API 获取一些数据并进行渲染的 React 组件网络数据通过 us

fetch API是原生 JavaScript 提供的一个概念，主要用来与 Web 服务器进行交互。 我们如何在async和await中使用fetch呢？ 以及如何将它与 TypeScript 结合在

规范: 导入模块的顺序以有组织的方式引入 ES6 模块将节省你查找任何找不到或不需要模块的时间之前之后在之前的引入是无序的，一个文件可能会很乱，但是当你打开大量文件时候，尝试找到一个特定的包真的很难。

React 是一个用于构建用户界面的 JavaScript 库,它是单页面应用(SPA). 单页面应用,顾名思义:只有一个页面，它是没有路由导航机制的. 这时候往往需要一种路由机制，以便在不同的视图之

在上一篇文章中，我们在项目中集成了的同步 Redux.在本篇文章中，我们将在 Redux 中使用异步 actions 优化我们的代码State我们先来回忆下我们的 store 类型so? 我们的 st

话说实践出真知,下面我们通过 Redux 实现一个用户名的添加和删除。以便加深我们对 Redux 的理解 状态我们尽量简化，因为我们主要专注于 Redux Store 以及 React 组件如何以强类型的方式进行交互。 注意，我们没有给payload 明确类型，因为 actio…

众所周知，React 是一个用于构建用户界面的 JavaScript 库,它是单页面应用(SPA). 单页面应用,顾名思义:只有一个页面，它是没有路由导航机制的. 这时候往往需要一种路由机制，以便在不同的视图之间切换而不用刷新整个网页. React-Router 就是一个扩展 …

这样做可以让组件的使用者来决定某一个具体的位置需要渲染什么。 这就使组件非常灵活且高度可重用。 children 就是一个 render prop， 在上面的示例中，children 属性允许组件的使用者渲染自定义的内容。如: 现在，我们开始了解 render props 的作…

这个错误与上一篇文章的 CSS 报错很类似啊。为了解决这个错误，我们在src/typings.d.ts中加入以下内容 注意，在打包过程中，Webpack 会为每一张图片赋予一个全局唯一的随机名称。 这也就意味着文件名不会与其他组件中的其他图片文件冲突。 重新启动项目并观察界面，…

在上一篇文章中，我们使用 TypeScript/ESLint/Webpack 搭建了一个 React 应用。这篇文章中,我们继续在上一篇文章的基础上加入 CSS/Less/Sass/Antd 当然！样式肯定是不会生效的。因为组件根本不知道container是在哪里被定义的。 s…

在上一章节中我们已经使用 TypeScript/ESlint/Prettier/EditorConfig/stylelint,搭建好了前端规范的基础设施。这篇文章将会使用 webpack5 构建一个 React 应用。 因为这些能帮助我们提高代码质量。我们还会 使用 npm i…

使用 npm init -y 初始化一个前端项目,这会自动生成package.json 文件。当我们安装项目依赖的时候,这个文件会自动更新 TypeScript 会在编译代码时，进行严格的静态类型检查。意味着可以在编码阶段发现存在的隐患，而不用把隐患带到线上去 TypeScri…

大家在开发React应用的时候，都遇到过将数组中的数据渲染成列表的情况，通常的做法是使用map()/filter()等方法,直接将数组转化为React集合，之后插入到指定的位置。在转化的过程中，需要每一个新创建的React组件显示地声明一个key属性 生产环境中却什么都不会提示…