目录正文内联样式普通的CSScss modulescss in js样式组件引入外部变量默认值引入全局样式provider样式继承动态添加class正文目前，前端最流行的开发方式是组件化，而CSS的设计本身就不是为组件化而生的，所以在目前组件化的框架中都在需要一种合适的CSS解决方案在组件化开发环境下的CSS，应该满足如下需求:可以编写局部css: css具
......
397
0
0
2023-02-10
目录引言包装 Context.Provider 作为父组件使用 Context Hook 来实现子组件使用 React 顶层 API 动态设置样式复用 Context，实现其它子组件抽取共同状态逻辑自由组合父组件与子组件示例引言单选，多选，是很常见的 UI 组件，这里以它们为例，来讲解如何分离布局组件和状态组件，以实现较好的复用性。假如我们要实现如下需求：这
......
278
0
0
2023-02-09
目录一、 State1.概念2.State的简单用法3. JS绑定事件4.react 绑定事件5.react this指向问题6.修改state值7.代码简写二、props1.概念2.传参的基础方法、运算符传参三、refs定义字符串形式的ref、回调函数下ref、createRef 创建ref容器一、 State1.概念概念：state是组件对象最
......
351
0
0
2023-02-09
目录antd使用antdantdantd 是基于 Ant Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。国内镜像为：https://ant-design.gitee.io/docs/react/introduce-cn速度很快进入网页点击组件就可以看到网页需要的各种配件，如按钮、导航栏等等，并且配有各种使用方法的API，目
......
441
0
0
2023-02-05
目录效果实现card-slider.tsxcard-item.tsxApp.tsx效果实现通过zIndex控制层级，opacity控制透明度，transform 控制卡片缩放程度，marginLeft控制位置，剩下的就是计算的事了card-slider.tsximport React from 'react'
export type CardProps =
......
353
0
0
2023-02-02
React 18 最新的特性批处理文件在同一个 函数中, 调用多次 useState 也只是会更新一次function App() {
const [count, setCount] = useState(0);
const [flag, setFlag] = useState(false);
function handleClick()
......
332
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
......
467
0
0
2023-01-31
目录前言React DevTools 的原理渲染阶段FiberRoot/FiberNodememoizedState 与 React Hooks实践：突破 useDebugValue 的限制useDebugValueAnywhere 的实现特定的 devtools总结前言有过 React 经验的开发者可能都使用过 React DevTools。DevTool
......
328
0
0
2023-01-31
> # 众多无视的扩展
*.bak
*.patch
*.diff
*.err
# git冲突合并的临时文件
*.orig
*.log
*.rej
*.swo
*.swp
*.zip
*.vi
*~
*.sass-cache
*.tmp.html
*.dump
......
323
0
0
2023-01-24
大家好，我是前端西瓜哥。今天的文章简单探讨一下 Vue 和 React 的不同。本人 Vue2 和 React 都用过，但不熟悉 Vue3，没用它做过项目。其实我对这两大框架也没有认真钻研过它们的细节，也就是工作上用它们写一些简单业务，或偶尔看看相关的博客文章，但还是有一些浅显的认识的，写下来记录一下。Vue 和 React 都是用于构建 UI 界面的流行框
......
345
0
0
2023-01-19
调和阶段 setState内部干了什么当调用 setState 时，React会做的第一件事情是将传递给 setState 的对象合并到组件的当前状态这将启动一个称为和解（reconciliation）的过程。和解（reconciliation）的最终目标是以最有效的方式，根据这个新的状态来更新UI。 为此，React将构建一个新的 React 元素树（您可
......
333
0
0
2023-01-16
五、React 核心是组件在 React 中，我们使用组件（有状态、可组合、可重用）来描述 UI 。在任何编程语言中，你都可以将组件视为简单的函数。React 组件也一样， 它的输入是 props，输出是关于 UI 的描述。我们可以在多个 UI 中重用单个组件，组件也可以包含其他组件。React 组件的本质上就是一个普通的 JavaScript 函数。尽管一
......
327
0
0
2023-01-13
React调用回调函数，正确设置this指向的三种方法通过bindthis.increment = this.increment.bind(this);
通过箭头函数<button onClick={this.multi}>点我*10</button>
multi = () => {
this.setStat
......
346
0
0
2023-01-13
render prop是一个技术概念。它指的是使用值为function类型的prop来实现React component之间的代码共享。如果一个组件有一个render属性，并且这个render属性的值为一个返回React element的函数，并且在组件内部的渲染逻辑是通过调用这个函数来完成的。那么，我们就说这个组件使用了render props技术。<
......
336
0
0
2023-01-13
Suspense 基本应用Suspense 目前在 react 中一般配合 lazy 使用，当有一些组件需要动态加载(例如各种插件)时可以利用 lazy 方法来完成。其中 lazy 接受类型为 Promise<() => {default: ReactComponet}> 的参数，并将其包装为 react 组件。ReactComponet
......
346
0
0
2023-01-13