英文 | https://blog.stackademic.com/top-40-reactjs-interview-questions-and-answers-for-2024-70c94e5fccca
执行 yarn jest 或者 yarn jest test/plus.spec.js 运行测试用例
在2020的今天，构建一个 web 应用对于我们来说，并非什么难事。因为有很多足够多优秀的的前端框架（比如 React，Vue 和 Angular）；以及一些易用且强大的UI库（比如 Ant Design）为我们保驾护航，极大地缩短了应用构建的周期。
React v16.8 引入了 Hooks，它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。这些功能可以在应用程序中的各个组件之间使用，从而易于共享逻辑。Hook 令人兴奋并迅速被采用，React 团队甚至想象它们最终将替换类组件。
在之前的两篇教程中，我们学会了如何去测试最简单的 React 组件。在实际开发中，我们的组件经常需要从外部 API 获取数据，并且组件的交互逻辑也往往更复杂。在这篇教程中，我们将学习如何测试更复杂的组件，包括用 Mock 去编写涉及外部 API 的测试，以及通过 Enzyme 来轻松模拟组件交互
在我们平时使用React的时候，对于React中的Ref的属性，相信大家使用的频率是很低的。说实话，真正了解React Ref属性的人少之又少，我都不确定自己是否真正的了解了所有的内容，毕竟它不是一个经常能够被人使用的属性，而且在过去一段时间，它本身的API在不断修改。那么在本教程中，我将尽可能的向大家介绍React中的Ref
文章链接：https://bobbyhadz.com/blog/react-create-react-app-typescript[1]
在这个页面上，我们将主要使用函数组件。然而，这些测试策略并不依赖于实现细节，它对于 class 组件也同样有效。
原文：https://css-tricks.com/testing-react-hooks-with-enzyme-and-react-testing-library/
那如果这个组件交给别人维护了，他并不知道这个组件的功能应该是什么样的，怎么保证他改动代码之后，组件功能依然正常？
在 <ProjectList /> 下方显示加载指示器。仅在 loading=true .
Create React App 是一个官方支持的创建 React 单页应用程序的CLI，它提供了一个零配置的现代构建设置。当你使用 Create React App 来创建一个新的 TypeScript React 工程时，你可以运行：
原文：https://blog.kentcdodds.com/react-hooks-whats-going-to-happen-to-my-tests-df4c2b4d67b7
如今， React 和 TypeScript 是许多开发人员正在使用的两种很棒的技术。但是把他们结合起来使用就变得很棘手了，有时很难找到正确的答案。不要担心，本文我们来总结一下两者结合使用的最佳实践。
最近看了掘金刚上线的在线代码编辑器 “码上掘金”，突然想是不是自己也可以写一个在线代码编辑器。
其实在线代码编辑器很早就存在了，例如： CodePen，CodeSanbox，JSFiddle 等等都是大家耳熟能详的。这些编辑器给开发者提供了这样的使用场景：当没有机会使用代码编辑器应用程序时，或者当你想使用计算机甚至手机快速尝试 Web 上的某些内容时，在线 Web 代码编辑器就会进行我们的视野。
琨玮，携程高级前端开发工程师，从事React Native/Web前端的开发及维护工作，喜欢研究新技术。
单元测试的技术方案很多，不同工具之间有互相协同，也存在功能重合，给我们搭配测试方案带来不小的困难，而且随着 ES6, TypeScript 的出现，单元测试又增加了很多其他步骤，完整配置起来往往需要很大的时间成本。我希望通过对这些工具的各自作用的掌握，了解完整的前端测试技术方案。前端单元测试的领域也很多，这里主要讲对于前端组件如何进行单元测试，最后会主要介绍下对于 React 组件的一些测试方法总结。
React Hooks 是 React 提供的一种功能，允许我们在函数组件中使用状态和其他 React 特性。使用 Hooks 可以简化函数组件中的状态管理和副作用处理。
Rust Is The Future of JavaScript Infrastructure 这篇文章讲述了 Rust 正在 JS 基建圈流行的事实：Webpack、Babel、Terser、Prettier、ESLint 这些前些年才流行起来的工具都已有了 Rust 替代方案，且性能有着 10～100 倍的提升。
在不断发展的web开发世界中，React.js 已成为构建用户界面的强大而流行的库。虽然 React 允许开发人员使用函数和类来创建组件，但近年来函数的使用越来越突出。在本文中，我们将探讨为什么在 React.js 开发中函数被认为优于类。我们将提供示例和见解来说明这种偏好发生转变的原因。
Jest 是一款轻量的 JavaScript 测试框架，它的卖点是简单好用，由 facebook 出品。本文就简单讲讲如何使用 Jest 对 React 组件进行测试。
在开发任何软件（尤其是Web应用程序）时，优化是每个开发人员考虑的第一件事。像Angular，React等其他JS框架都包含了一些很棒的配置和功能。在这里，我将回顾有助于您优化应用性能的功能和技巧。
您撰写本文是为了深入研究使用 React 构建具有屏幕共享功能的视频会议应用程序的复杂性。您的目标是强调这项技术的复杂性和变革潜力。
作为一个class组件的重度爱好者，被迫走向了hooks，阅读hook的源码（惨）
Re-rendering React components unnecessarily can slow down your app and make the UI feel unresponsive.
在React开发中，保持干净的代码风格，可读性，可维护性，更少的代码行以及可重用性至关重要。本篇文章将向您介绍应立即开始使用的十一个React Hook库。不用再拖延了，让我们开始吧。
如果你和我一样经常和管理页面打交道，那么 Excel导入数据 和 数据导出Excel 这两个需求一定是逃不掉的。
React Hook 指南 什么是 Hook ？ ❝Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 Hook 本质上就是一个函数，它简洁了组件，有自己的状态管理，生命周期管理，状态共享。 useState useEffect useContext useReducer ❞ Hook 出现解决了什么 ？ ❝ [ ] 组件之间状态复用， 例如：使用useContext 可以很好的解决状态复用问题，或者自定义Hook
注意：这里我们使用cnpm去安装速度会更快，npm速度会很慢！ a.建议使用npm install –g jest(不需要单个去安装依赖)，修改package.json文件即可。
[raect] React Hook 指南 什么是 Hook ？ Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 Hook 本质上就是一个函数，它简洁了组件，有自己的状态管理，生命周期管理，状态共享。 useState useEffect useContext useReducer Hook 出现解决了什么 ？ 组件之间状态复用， 例如：使用useContext 可以很好的解决状态复用问题，或者自定义Hook 来定制
Hook在中文的意思是钩子, 而在react也是充当这个角色, Hook是服务于函数组件的方法, Hook提供了各种API, 如State Hook提供类型setState的功能, Effect Hook提供处理副作用的函数(数据订阅, 更新dom等), 也能够自定义Hook Api, 使得开发起来具有灵活性, 更多Api可以点击详情
本文承接上文 如何测试驱动开发 React 组件？，这次我将继续使用 @testing-library/react 来测试我们的 React 应用，并简要简要说明如何测试异步组件。
最近看到一个关于 React 的面试题，是京东技术三面的题目，感觉很有意思，一起来看看：
比如上面代码中的@include button-size 函数，这个是scss的一个特性，可以从官网上看下介绍。
useCallback 是 React 中的一个 Hooks，它用于优化性能，避免不必要的函数重新创建。在函数组件中，当一个函数作为 props 传递给子组件时，如果该函数在每次渲染时都重新创建，可能会导致子组件重新渲染，从而影响性能。
TDD（Test-driven development），就是测试驱动开发，是敏捷开发中的一项核心实践和技术，也是一种软件设计方法论。
在React Hook出现之前的版本中，组件主要分为两种：函数式组件和类组件。其中，函数式组件通常只考虑负责UI的渲染，没有自身的状态也没有业务逻辑代码，是一个纯函数。而类组件则不同，类组件有自己的内部状态，界面的显示结果通常由props 和 state 决定，因此它也不再那么纯洁。函数式组件，类组件有如下一些缺点：
但是函数组件没有实例，也没有状态。函数组件使用状态需要使用 useState 钩子。
React团队在8月9日发布了最新的16.9版本，本文简单介绍一下在新版本中都有哪些变更和需要注意的地方。
React Hooks 是在函数式组件中使用的生命周期方法，React Hooks 在 React 16.8 中被引入。在类组件中的生命周期方法已被合并成 React Hooks，React Hooks 无法在类组件中使用。
❗️❗️HOC、Render Props 等基于组件组合的方案，相当于先把要复用的逻辑包装成组件，再利用组件复用机制实现逻辑复用。自然就受限于组件复用，因而出现扩展能力受限、Ref 隔断、Wrapper Hell……等问题
换了新公司，工作中使用的技术栈也从Vue换到了React，作为一个React新人，经常的总结和思考才能更快更好的了解这个框架。这里分享一下我这两个月来使用React总结的一些性能优化的方法。因为目前公司的项目是全面拥抱hooks的，所以只会涉及function组件写法，不包含class组件写法的相关内容。「注意：本文只涉及到一些业务开发层面的代码优化，很多通用的优化思想，比如虚拟列表，图片懒加载，节流防抖，webpack优化等等内容都不会涉及到。」
在 Hook 出现之前, 如果我们想在组件中保存自己的状态, 如果我们想在组件的某个生命周期中做一些事情, 那么我们必须使用类组件。
如果你很熟悉 vue 与 react ，兴许你也觉得 vue3.0 抄袭了react，这项react 在不久前发布的新技术，在 vue3.0 中被重新搬上了舞台。也使它重新活跃在了人们的视野中，我技术不深，与大家分享我的见解和猜测。
State Hook 就是指 useState 这个特殊函数，让你不用编写class，就可以使用state特性，换言之就是让 函数组件 拥有 state 特性，对数据进行动态更新。
本轮子是通过 React + TypeScript + Webpack 搭建的，至于环境的搭建这边就不在细说了，自己动手谷歌吧。当然可以参考我的源码。
一开始react团队对外宣布hook 的时候，一眼看上去，觉得肯定proxy或者getter实现的，然后在函数组件外面包一层class extend React.Component。读setState钩子的第一个return结果就返回state，第二个结果就是封装了setState。后来发布了，看了一下代码，原来是维护一个队列（可以说很像数组，也可以说维护一个链表）。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
