weixin_43484007的博客

问题：1 react暴露的api有哪些，该如何使用？2 react提供了哪些自测性能的手段？3 ref既然不能用在函数组件中，那么父组件如何控制函数子组件内的state和方法？4 createElement和cloneElement有什么区别，应用场景是什么？5 react内置的children遍历方法，和数组方法,有什么区别？6 react怎么将子元素渲染到父元素之外的指定容器中？…组件类组件类，详细分的话有三种类，第一类说白了就是我平时用于继承的基类组件Component,PureC

不要再循环语句、条件语句或者嵌套函数中声明hooks。相反，在任何返回之前，总是在React函数的顶层声明hook。通过遵循此规则，您可以确保在每次呈现组件时以相同的顺序调用hook。这使得React能够在多个useState和useEffect调用之间正确保存hook的状态。(如果你感到好奇，我们将在下面深入解释。)如之前所述，我们可以在单一组件中声明多个state或者Effect那么React如何知道哪个状态对应于哪个useState调用呢?答案是React依赖于hook的调用顺序。我们的例子之所以有

React 为高性能应用设计提供了许多优化方案，本文列举了其中的一些最佳实践。在以下场景中，父组件和子组件通常会重新渲染：在同一组件或父组件中调用 setState 时。从父级收到的“props”的值发生变化。调用组件中的 forceUpdate。下面是提升 React 应用性能的 21 个技巧。1. 使用纯组件如果 React 组件为相同的状态和 props 渲染相同的输出，则可以将其视为纯组件。对于像 this 的类组件来说，React 提供了 PureComponent 基类。扩展 R

你可以把 useState 想象成一个可以定义“React 状态变量”的语法。它并不是真正的语法，当然，我们仍在用 JavaScript 编写应用。但是我们将 React 作为一个运行时环境来看待，因为 React 用 JavaScript 来描绘整个 UI 树，它的特性往往更接近于语言层面。假设 use 是语法，将其使用在组件函数顶层也就说得通了：当它被放在条件语句中或者组件外时又代表什么呢？React 状态和在树中与其相关的组件紧密联系在一起。如果 use 是真正的语法当它在组件函数的顶层调用时也能

取消请求React 中当前正在发出请求的组件从页面上卸载了，理想情况下这个请求也应该取消掉，那么如何把请求的取消和页面的卸载关联在一起呢？这里要考虑利用 useEffect 传入函数的返回值：useEffect(() => { return () => { // 页面卸载时执行 };}, []);假设我们的请求是利用 fetch，那么还有一个需要运用的知识点：AbortController，简单看一下它的用法：https://developer.mozilla.o

我想很多人刚开始使用react框架的时候，和我刚开始一样迷惘。只知道 map 返回的元素项推荐设置key，却不知为何要设置key。当初我也在网上找了一些相关的文章，却看得一塌糊涂，始终没明白为啥要设置key。后来研究了preact源码，才恍然大悟。设置key可以帮助react识别那个项被修改、添加或者移除。我们写的jsx语法，首先在项目打包阶段转换为js语法，然后在浏览器执行后会是一个虚拟节点树，最后调用react-dom的render方法渲染成页面中的真实dom树。用示例说明：//react代码Re

编程语言的运行时往往有调用栈 。当函数 a() 调用 b() ，b() 又调用 c() 时，在 JavaScript 引擎中会有像 [a, b, c] 这样的数据结构来“跟踪”当前的位置以及接下来要执行的代码。一旦 c 函数执行完毕，它的调用栈帧就消失了！因为它不再被需要了。我们返回到函数 b 中。当我们结束函数 a 的执行时，调用栈就被清空。当然，React 以 JavaScript 运行当然也遵循 JavaScript 的规则。但是我们可以想象在 React 内部有自己的调用栈用来记忆我们当前正在渲染的

如果我们的商品列表被重新排序了，React 只会看到所有的 p 以及里面的 input 拥有相同的类型，并不知道该如何移动它们。（在 React 看来，虽然这些商品本身改变了，但是它们的顺序并没有改变。）所以 React 会对这十个商品进行类似如下的重排序：React 只会对其中的每个元素进行更新而不是将其重新排序。这样做会造成性能上的问题和潜在的 bug 。例如，当商品列表的顺序改变时，原本在第一个输入框的内容仍然会存在于现在的第一个输入框中 — 尽管事实上在商品列表里它应该代表着其他的商品！ 。例如，

目的本文只介绍函数式组件特有的性能优化方式，类组件和函数式组件都有的不介绍，比如 key 的使用。另外本文不详细的介绍 API 的使用，后面也许会写，其实想用好 hooks 还是蛮难的。面向读者有过 React 函数式组件的实践，并且对 hooks 有过实践，对 useState、useCallback、useMemo API 至少看过文档，如果你有过对类组件的性能优化经历，那么这篇文章会让你有种熟悉的感觉。React 性能优化思路我觉得React 性能优化的理念的主要方向就是这两个：减少重新

由于 useState 和 useEffect 是函数调用，因此我们可以将其组合成自己的 Hooks自定义 Hooks 让不同的组件共享可重用的状态逻辑。注意状态本身是不共享的。每次调用 Hook 都只声明了其自身的独立状态。...

你也许会好奇：为什么我们不直接调用组件？为什么要编写 而不是 Form() ？React 能够做的更好如果它“知晓”你的组件而不是在你递归调用它们之后生成的 React 元素树。这是一个关于控制反转的经典案例。通过让 React 调用我们的组件，我们会获得一些有趣的属性：组件不仅仅只是函数。 React 能够用在树中与组件本身紧密相连的局部状态等特性来增强组件功能。优秀的运行时提供了与当前问题相匹配的基本抽象。就像我们已经提到过的，React 专门针对于那些渲染 UI 树并且能够响应交互的应用。如果你直

神奇的 children我们有一个需求，需要通过 Provider 传递一些主题信息给子组件：看这样一段代码：import React, { useContext, useState } from 'react';const ThemeContext = React.createContext();export function ChildNonTheme() { console.log('不关心皮肤的子组件渲染了'); return <div>我不关心皮肤，皮肤改变的时候

一些组件也许想要更新状态来响应同一事件。下面这个例子是假设的，但是却说明了一个常见的模式：当事件被触发时，子组件的 onClick 首先被触发（同时触发了它的 setState ）。然后父组件在它自己的 onClick 中调用 setState 。如果 React 立即重渲染组件以响应 setState 调用，最终我们会重渲染子组件两次：第一次 Child 组件渲染是浪费的。并且我们也不会让 React 跳过 Child 的第二次渲染因为 Parent 可能会传递不同的数据由于其自身的状态更新。这就是为

令人讽刺地是，React 并没有使用“反应式”的系统来支持细粒度的更新。换句话说，任何在顶层的更新只会触发协调而不是局部更新那些受影响的组件.这样的设计是有意而为之的。对于 web 应用来说交互时间是一个关键指标，而通过遍历整个模型去设置细粒度的监听器只会浪费宝贵的时间。此外，在很多应用中交互往往会导致或小（按钮悬停）或大（页面转换）的更新，因此细粒度的订阅只会浪费内存资源。React 的设计原则之一就是它可以处理原始数据。如果你拥有从网络请求中获得的一组 JavaScript 对象，你可以将其直接交给组件

在 React 中，我们将数据作为 props 传递给其他组件。有些时候，大多数组件需要相同的东西 — 例如，当前选中的可视主题。将它一层层地传递会变得十分麻烦。在 React 中，我们通过 Context 解决这个问题。它就像组件的动态范围 ，能让你从顶层传递数据，并让每个子组件在底部能够读取该值，当值变化时还能够进行重新渲染：当 SomeDeeplyNestedChild 渲染时， useContext(ThemeContext) 会寻找树中最近的 ，并...

React 官网介绍了 Hook 的这样一个限制：不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层以及任何 return 之前调用他们。遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确。(如果你对此感到好奇，我们在下面会有更深入的解释。)这个限制在开发中也确实会时常影响到我们的开发体验，比如函数组件中出现 if 语句提前 return

前言前端路由一直是一个很经典的话题，不管是日常的使用还是面试中都会经常遇到。本文通过实现一个简单版的 react-router 来一起揭开路由的神秘面纱。通过本文，你可以学习到：前端路由本质上是什么。前端路由里的一些坑和注意点。hash 路由和 history 路由的区别。Router 组件和 Route 组件分别是做什么的。路由的本质简单来说，浏览器端路由其实并不是真实的网页跳转（和服务器没有任何交互），而是纯粹在浏览器端发生的一系列行为，本质上来说前端路由就是：对 url 进行改变和监

我们在之前提到过 React 组件在渲染过程中不应该有可观察到的副作用。但是有些时候副作用确实必要的。我们也许需要进行管理 focus 状态、用 canvas 画图、订阅数据源等操作。在 React 中，这些都可以通过声明 effect 来完成：如果可能，React 会推迟执行 effect 直到浏览器重新绘制屏幕。这是有好处的因为像订阅数据源这样的代码并不会影响交互时间和首次绘制时间 。（有一个极少使用的 Hook 能够让你选择退出这种行为并进行一些同步的工作。请尽量避免使用它。）effect 不只执行

React 跨组件通信Context文章目录React 跨组件通信Context前言一、Context是什么？二、使用步骤1.引入库总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、Context是什么？问题场景：上图是一个react形成的嵌套组件树，如果我们想要从APP组件向ComC组件传递消息，最暴力的方法是一层一层