尽管useEffect Hook在React生态系统中很常见，但它需要时间来掌握。因此，许多新手开发人员在配置他们的useEffect函数时，会导致无限循环问题。在本文中，您将了解不同场景下带来的无限循环问题以及如何解决它们。
许多人对 useMemo 和 useCallback的理解和使用都不太正确，他们都对这两个钩子感到困惑。本文中的目标就是要澄清所有这些困惑。本文将学习它们是做什么的，为什么它们是有用的，以及如何最大限度地利用它们。
组件之间复用状态逻辑很难，在hooks之前，实现组件复用，一般采用高阶组件和 Render Props，它们本质是将复用逻辑提升到父组件中，很容易产生很多包装组件，带来嵌套地域。
在开发任何软件（尤其是Web应用程序）时，优化是每个开发人员考虑的第一件事。像Angular，React等其他JS框架都包含了一些很棒的配置和功能。在这里，我将回顾有助于您优化应用性能的功能和技巧。
这几天在阅读徐超老师的《React 进阶之路》，然后在看看自己之前的《React Native移动开发实战》，发现之前我自己的书部分写的比较的浅显，最近打算对基础部分进行升级，加大基础部分，特别是React基础部分的讲解，并对React Native提供的组件部分进行升级。
React 组件也一样， 它的输入是 props，输出是关于 UI 的描述。我们可以在多个 UI 中重用单个组件，组件也可以包含其他组件。React 组件的本质上就是一个普通的 JavaScript 函数。
我们的一些开发人员最近提出了一个问题，什么时候我应该在 React 中使用 useMemo？这是一个非常好的问题。在本文中，我们将使用一种科学的方法，定义一个假设，并在 React 中使用现实生活中的基准对其进行测试。
文：徐超，《React进阶之路》作者 授权发布，转载请注明作者及出处 ---- React 深入系列3：Props 和 State React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使用React。 React 的核心思想是组件化的思想，而React 组件的定义可以通过下面的公式描述： UI = Component(props, state) 组件根据props和state两个参数，计算得到对应界面的UI。可见，
在当前组件的 props中，包含 location属性对象，包含当前页面路由地址信息，在 match中存储当前路由的参数等数据信息。可以直接通过 this .props使用它们。
React是流行的javascript框架之一，在2019年及以后将会更加流行。React于2013年首次发布，多年来广受欢迎。它是一个声明性的、基于组件的、用于构建用户界面的高效javascript库。
为了不浪费大家的宝贵时间，在开头申明一下，这篇文章针对的阅读对象是：没有写过 React 或者刚刚才接触 React 并且对于 ES6 的语法不太了解的同学，这是一篇基础入门的文章，在一开始我并没有准备翻译一篇这样的基础文章，但是在阅读完全文之后，我想起自己刚开始学习 React 时的迷茫， ES6 有那么多，我需要掌握多少呢？对于一个急于上手 React 写代码的人来说，这篇文章告诉你最基本要掌握的知识，让你快速的写起来。但是后期的提高，仍旧需要去夯实 Javascript 的基础。
React 16发布了。 React 16有很多令人兴奋的新东西（尤其是Fiber），而且React 16对服务器端渲染所做了许多改进，让我们深入剖析React16的服务端渲染有什么不一样。
shouldComponentUpdate 是做什么的，（react 性能优化是哪个周期函数？）
在 React 内部，React 会使用几项巧妙的小技术，来优化计算更新 UI 时，所需要的最少的更新 DOM 的操作。在大多数情况下，即使你没有针对性能进行专项优化，React 依然很快，但是仍有一些方法可以加速 React 应用程序。本文将介绍一些可用于改进 React 代码的有效技巧。
JavaScript中一个不被重视的概念是对象和函数是如何引用的，并且直接影响 React性能。 如果创建两个完全相同的函数，它们仍然不相等，试试下面的例子：
shouldcomponentUpdate pureCompoment setState
1 1. 什么是JSX语法 2 2. jsx语法示例与渲染的VNode节点 3 3. jsx的渲染流程 4 4. jsx中的js和html的写法不同 5 a. js：{ js语法 } 6 i. 花括号里边一定要返回字符串才能渲染 7 ii. {{ 双花括号表示js语法里的对象格式 }} 8 iii. 花括号里可以写表达式、三元、有返回值且返回字符串的函数调用 9 iv. 花括号里直接放对象报错 10 v. 数组可以直接被渲染到页面中。 11 b. html：<html语法> 12 i. class等关键字不能用做html的属性（如class、for等不行，需要替换成别的） 13 1) class -> className 14 2) for -> htmlFor 15 c. a标签写了以后，必须写href属性 16 d. 组件根节点只能是一个标签，不能有并列标签。否则报错！ 17 三种方法实现空白标签包裹：（就像小程序的block标签、又像vue的template标签） 18 i. <React.Fragment>空白标签1</React.Fragment> 19 ii. import { Fragment } from 'react'；<Fragment>空白标签1</Fragment> 20 iii. <>空白标签2</> 21 e. 列表渲染 - 迭代的方法（没有for）：利用数组进行渲染 22 f. key值唯一的绑定 23 g. 条件切换的使用（没有if else、简直反人类） 24 h. 动态样式的绑定 - style的值需要是一个js语法，包裹在对象里边。 25 i. v-html类似用法：dangerouslySetInnerHTML={ {__html: variableName} }【innerHTML容易造成xss攻击，避免使用】 26 j. jsx中的注释 27 i. 多行注释：{ /** js注释 **/ } 28 ii. 单行注释： 29 { 30 // 单行注释，花括号如果提上来就被注释了。所以换行 31 }
大家好，又见面了，我是你们的朋友全栈君。 Hi 各位，欢迎来到 React 回忆录！? 在上一章中，我介绍了使用 React 渲染界面元素的方法，以及在这个过程中蕴含的“组件化”想想。在本章中，我们将
React.js 核心团队一直在努力使 React 变得更快，就像燃烧的速度一样。为了让开发者能够加速他们的 React 应用程序，为此增加了很多工具:
在shouldComponentUpdate 这个方法中，这个方法主要用来判断是否需要调用render方法重绘DOM
开发任何应用程序最具挑战性的方面通常是管理其状态。然而，我们经常需要在应用程序中管理多个状态片段，例如当从外部服务器检索数据或在应用程序中更新数据时。
最近我们公司接到一个客户的需求，要求为正在开发的项目加个功能。项目的前端使用的是React，客户想添加具备Excel 导入/导出功能的电子表格模块。 经过几个小时的原型构建后，技术团队确认所有客户需求文档中描述的功能都已经实现了，并且原型可以在截止日期前做好演示准备。但是，在跟产品组再次讨论客户需求时，我们发现之前对有关电子表格的部分理解可能存在偏差。 客户的具体需求点仅仅提到支持双击填报、具备边框设置、背景色设置和删除行列等功能，但这部分需求描述不是很明确，而且最后提到“像Excel的类似体验”，我们之前忽略了这句话背后的信息量。经过与客户的业务需求方的直接沟通，可以确认终端用户就是想直接在网页端操作Excel，并且直接把编辑完成的表格以Excel的格式下载到本地。
React是FaceBook（脸书）公司研发的一款JS框架（MVC） React是一款框架：具备自己开发的独立思想(MVC：Model View Controller) -> 划分组件开发 -> 基于路由的SPA单页面开发 -> 基于ES6来编写代码(最后部署上线的时候，我们需要把ES6编译成ES5 =>基于Babel来完成编译) -> 可能用到Less/Sass等，我们也需要使用对应的插件把他们进行预编译 -> 最后为了优化性能（减少HTTP请求次数），我们需要把JS或者CSS进行合并压缩 -> webpack来完成以上页面组件合并、JS/CSS编译加合并等工作
我们今天主要讲解的内容就是关于 React 面试相关的，我相信你在面试中，也会被问到各种各样的非常多的问题，我举几个例子你看看，在自己心里想一想，你会怎么回答？
React 中自定义的 Hooks 为开发者提供了重用公共方法的能力。然而，如果你是一个测试新手的话，测试这些钩子可能会很棘手。本文中，我们将探索如何使用 React Testing Library 测试库来测试自定义钩子。
总结： 类组件可以维护自身的状态变量，即组件的 state ，类组件还有不同的生命周期方法，可以让开发者能够在组件的不同阶段（挂载、更新、卸载），对组件做更多的控制。类组件则既可以充当无状态组件，也可以充当有状态组件。当一个类组件不需要管理自身状态时，也可称为无状态组件。
StrictMode 是一个用来突出显示应用程序中潜在问题的工具。与 Fragment 一样，StrictMode 不会渲染任何可见的 UI。它为其后代元素触发额外的检查和警告。 可以为应用程序的任何部分启用严格模式。例如：
函数式组件(Functional component)根本没有实例instance。类组件(Class component)有实例instance，但是永远也不需要直接创建一个组件的实例，因为React帮我们做了这些。
React 16 中有许多令人激动的新特性（最著名的是Fiber的重写），但是对我个人而言，最兴奋的还是React 16 对服务器端渲染所做的许多改进。
React Hooks几乎在所有方面都能让我们在编程中获得好处。但是某些时候的性能问题，也需要使用一些技巧来解决。我们可以使用Hooks编写快速的应用程序，但是在动手之前需要注意一两件事。
英文 | https://blog.stackademic.com/top-40-reactjs-interview-questions-and-answers-for-2024-70c94e5fccca
掘金ID：https://juejin.cn/user/3051900006317549
去年，我写了一本关于学习React.js的小书，原来是大约100页。 今年我要挑战自己，把它归纳为一篇文章。
⼀句话概况： React 使⽤了 shallowCompare 来决定是否应该重新渲染⼀个组件。
React 源码版本: v16.9.0 源码注释笔记：airingursb/react 1 Class Component VS. Functional Component 根据 React 官网，React 中的组件可分为函数式组件（Functional Component）与类组件（Class Component）。 1.1 Class Component 这是一个我们熟悉的类组件： // Class Componmentclass Welcome extends React.Component {
在 Redux 中，reducer 函数是用来处理状态（state）的函数。它接收两个参数：当前的状态（state）和被分发的 action，然后根据 action 的类型来更新状态并返回新的状态对象。
每个React组件强制要求必须有一个 render()。它返回一个 React 元素，是原生 DOM 组件的表示。如果需要渲染多个 HTML 元素，则必须将它们组合在一个封闭标记内，例如 <form>、<group>、 等。此函数必须保持纯净，即必须每次调用时都返回相同的结果。02
哈喽，大家好，今天是周一。周末回老家了，每次回老家后的第一个工作日都感觉很陌生，各位宝宝(づ｡◕‿‿◕｡)づ，有多久没回老家了？不管在哪里，记得好好照顾自己，好好爱自己！
React.js和Vue.js是这个星球上最流行的JavaScript库。它们都很强大，相对来说很容易获取和使用。
首先，我们需要安装 Node.js 和 npm 包管理器。安装完成后，我们可以使用以下命令创建一个新的 React 应用程序：
接下来引用自己于2016年12月15写的 笔记https://www.cnblogs.com/djtao/p/6181807.html
在 React源码中，当具体到某一事件处理函数将要调用时，将调用 invokeGuardedCallback方法。
3.我们编码时基本只需要操作react的虚拟DOM相关数据, react会转换为真实DOM变化而更新界。
本系列的上篇文章里，「React 基础」在 React 项目中使用 ES6，你需要了解这些 ，我给大家介绍了 ES6 在 React 的常见用法，本篇文章将会大家简单的介绍下，在 React 16 版本中，有哪些新的特性是值得我们关注的。
（2）区别 Redux更多的是遵循Flux模式的一种实现，是一个 JavaScript库，它关注点主要是以下几方面∶
虚拟 DOM (VDOM)是真实 DOM 在内存中的表示。UI 的表示形式保存在内存中，并与实际的 DOM 同步。这是一个发生在渲染函数被调用和元素在屏幕上显示之间的步骤，整个过程被称为调和。
最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。
虚拟DOM 相当于在js 和 真实DOM中间加了一个缓存，利用DOM Diff 算法避免了没有必要的DOM操作，从而提高性能
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
