React 18 最新的特性批处理文件在同一个 函数中, 调用多次 useState 也只是会更新一次function App() {
const [count, setCount] = useState(0);
const [flag, setFlag] = useState(false);
function handleClick()
......
231
0
0
2023-01-31
目录使用react-file-viewerreact-file-viewer预览本地文件解决思路使用react-file-viewer1.npm install react-file-viewer2.在组建中引入import FileViewer from 'react-file-viewer';3.使用： <FileViewer
fileT
......
345
0
0
2023-01-31
目录前言React DevTools 的原理渲染阶段FiberRoot/FiberNodememoizedState 与 React Hooks实践：突破 useDebugValue 的限制useDebugValueAnywhere 的实现特定的 devtools总结前言有过 React 经验的开发者可能都使用过 React DevTools。DevTool
......
224
0
0
2023-01-31
> # 众多无视的扩展
*.bak
*.patch
*.diff
*.err
# git冲突合并的临时文件
*.orig
*.log
*.rej
*.swo
*.swp
*.zip
*.vi
*~
*.sass-cache
*.tmp.html
*.dump
......
223
0
0
2023-01-24
大家好，我是前端西瓜哥。今天的文章简单探讨一下 Vue 和 React 的不同。本人 Vue2 和 React 都用过，但不熟悉 Vue3，没用它做过项目。其实我对这两大框架也没有认真钻研过它们的细节，也就是工作上用它们写一些简单业务，或偶尔看看相关的博客文章，但还是有一些浅显的认识的，写下来记录一下。Vue 和 React 都是用于构建 UI 界面的流行框
......
239
0
0
2023-01-19
调和阶段 setState内部干了什么当调用 setState 时，React会做的第一件事情是将传递给 setState 的对象合并到组件的当前状态这将启动一个称为和解（reconciliation）的过程。和解（reconciliation）的最终目标是以最有效的方式，根据这个新的状态来更新UI。 为此，React将构建一个新的 React 元素树（您可
......
217
0
0
2023-01-16
五、React 核心是组件在 React 中，我们使用组件（有状态、可组合、可重用）来描述 UI 。在任何编程语言中，你都可以将组件视为简单的函数。React 组件也一样， 它的输入是 props，输出是关于 UI 的描述。我们可以在多个 UI 中重用单个组件，组件也可以包含其他组件。React 组件的本质上就是一个普通的 JavaScript 函数。尽管一
......
220
0
0
2023-01-13
React调用回调函数，正确设置this指向的三种方法通过bindthis.increment = this.increment.bind(this);
通过箭头函数<button onClick={this.multi}>点我*10</button>
multi = () => {
this.setStat
......
223
0
0
2023-01-13
render prop是一个技术概念。它指的是使用值为function类型的prop来实现React component之间的代码共享。如果一个组件有一个render属性，并且这个render属性的值为一个返回React element的函数，并且在组件内部的渲染逻辑是通过调用这个函数来完成的。那么，我们就说这个组件使用了render props技术。<
......
210
0
0
2023-01-13
Suspense 基本应用Suspense 目前在 react 中一般配合 lazy 使用，当有一些组件需要动态加载(例如各种插件)时可以利用 lazy 方法来完成。其中 lazy 接受类型为 Promise<() => {default: ReactComponet}> 的参数，并将其包装为 react 组件。ReactComponet
......
230
0
0
2023-01-13
开始之前，先讲一下该文章能帮你解决哪些问题？facebook为什么要使用重构ReactReact Fiber是什么React Fiber的核心算法 - react是如何中断重启任务的react fiber部分源码简化版前言该文章涉及的源码部分基于React v17.0.2why React Fiber浏览器渲染过程从浏览器的运行机制谈起。大家都知道，浏览器是
......
196
0
0
2023-01-10
react16 版本之后引入了 fiber，整个架构层面的 调度、协调、diff 算法以及渲染等都与 fiber 密切相关。所以为了更好地讲解后面的内容，需要对 fiber 有个比较清晰的认知。本章将介绍以下内容：为什么需要 fiber fiber 节点结构中的属性 fiber 树是如何构建与更新的为什么需要 fiberLin Clark 在 React C
......
226
0
0
2023-01-10
MixinsReact Mixin通过将共享的方法包装成Mixins方法，然后注入各个组件来实现，官方已经不推荐使用，但仍然可以学习一下，了解为什么被遗弃。React MiXin只能通过React.createClass()来使用，如下：const mixinDefaultProps = {}
const ExampleComponent = React.
......
169
0
0
2023-01-08
复用是组件化开发体系的立命之本，可以说组件化的初衷就是为了复用性。但是组件化的复用方式也存在一定的问题，其中拆分粒度就是其中一个绕不开的话题，今天咱们就来讲一讲 React 当中的一个不太常用的 API：cloneElement，他如何帮组我们更好得进行组件拆分。假如我们有一个Layout组件，那么一般来说这个组件主要接收的就是children，把它放在主要
......
219
0
0
2023-01-08
Context提供了一种不需要手动地通过props来层层传递的方式来传递数据。正文在典型的React应用中，数据是通过props，自上而下地传递给子组件的。但是对于被大量组件使用的固定类型的数据（比如说，本地的语言环境，UI主题等）来说，这么做就显得十分的累赘和笨拙。Context提供了一种在组件之间（上下层级关系的组件）共享这种类型数据的方式。这种方式不需
......
171
0
0
2023-01-08