目录一、每一次渲染都有它自己的 Props and State二、每次渲染都有它自己的Effects三、关于依赖项不要对React撒谎四、两种诚实告知依赖的方法五、来自useReducer的助攻六、把函数移到Effects里七、我不想把可复用的函数放到Effect里这篇文章会假设你对useEffectAPI有一定程度的了解。一、每一次渲染都有它自己的 Pro
......
165
0
0
2023-06-04
目录一、Props 是什么二、props children模式1. props 插槽组件2. render props模式3. render props模式三、进阶实践一、Props 是什么先来看一个 demo ：function Chidren(){
return <div> 我是子组件 </div>
}
/* props
......
162
0
0
2023-06-04
目录引言数据获取的分类React 获取数据与类库支持React 应用的性能React 生命周期与数据获取浏览器限制和数据获取出现请求瀑布流的原因解决请求瀑布流的方案Promise.all 方案并行 Promise 方案Data providers 抽象封装数据获取在 React 之前请求数据使用第三方类库做数据获取关于 Suspense总结引言如果你尝试过对
......
226
0
0
2023-06-01
目录前言概念核心APIDndProviderBackenduseDraguseDrag返回三个参数useDrag传入两个参数DragSourceMonitor对象useDropuseDrag返回两个参数useDrop传入一个参数DropTargetMonitor对象数据流转拖拽预览DragPreviewImageuseDragLayer其他使用场景批量拖拽拖
......
244
0
0
2023-06-01
目录正文代码结构DndProviderDragDropManageruseDragHTML5BackendTouchBackend总结正文React DnD 是一个专注于数据变更的 React 拖拽库，通俗的将，你拖拽改变的不是页面视图，而是数据。React DnD 不提供炫酷的拖动体验，而是通过帮助我们管理拖拽中的数据变化，再由我们根据这些数据进行渲染。我
......
229
0
0
2023-06-01
目录1. 前言2. useState3. useEffect4. useLayoutEffect5. useMemo6. useCallback7. useRef8. useReducer9. useContext10. memo1. 前言react16.8推出hooks更好的支持函数组件,使用函数组件更容易进行代码的复用,拓展性更强。2. useState
......
152
0
0
2023-05-31
我们在写一些 UI 组件时，若不考虑动效，就很容易实现，主要就是有无的切换（类似于 Vue 中的 v-if 属性）或者可见性的切换（类似于 Vue 中的 v-show 属性）。 1. 没有动效的弹窗在 React 中，可以这样来实现： interface ModalProps {
open: boolean;
onClose?: () =>
......
177
0
0
2023-05-28
目录Router 组件的实现Routes 组件的实现Link 组件的实现Switch组件的实现createBrowserHistory 函数实现React Router 是一个用于 React 应用的路由库，它提供了一种简单的方式来将 URL 与组件匹配起来。React Router 实现了以下几个主要的概念：Router: 它提供了应用程序的基本
......
195
0
0
2023-05-24
目录接口权限页面权限1. 菜单权限2. 路由权限按钮权限参考在一个后台管理系统中，安全是很重要的。不光后端需要做权限校验，前端也需要做权限控制。 我们可以大致将权限分为3种： 接口权限、页面权限、按钮权限。在这当中，前端主要关注点则是页面权限，按钮权限，而前端做这些的主要目的则是：禁止用户访问一些无权限访问的页面过滤不必要的请求，减少服务器压力下面主要是思路
......
214
0
0
2023-05-21
目录前言知识点汇总场景1：使用Provider和Consumer生产和消费数据 文件目录及说明代码文件 ProductContext.js:效果场景2：使用ContextType接收数据文件目录及说明代码文件场景3：动态和静态Context代码文件效果场景4：在嵌套组件中更新Context代码文件效果场景5：消费多个Context代码文件前言传统的React
......
181
0
0
2023-05-14
目录前言如何自定义 Hooks组件之间共享逻辑自定义 Hooks 允许你共享有状态逻辑，而不是状态本身分类功能型 HooksuseWindowWidthuseLocalStorage业务型 HooksuseFetchuseModal在多个 Hook 之间传递信息将 event handlers 传递给自定义 Hooks开源 React Hooks 库总结前言
......
242
0
0
2023-05-12
目录引言为什么使用 TypeScript 开发 React 应用TypeScript 和 React 的结合方式TypeScript 在 React 中的优势TypeScript 和 React 的最佳实践最后引言TypeScri
......
201
0
0
2023-05-11
目录项目环境搭建项目依赖项目目录结构创建一个组件封装一个Button组件Button按钮需求分析依赖项目环境搭建项目依赖创建支持 TypeScript 的 React 项目npx create-react-app my-demo --template typescript根据 typescript 官网文档的说明，还可以使用下面的命令npx create-r
......
181
0
0
2023-05-06
前言：最近接触到一种新的（对我个人而言）状态管理方式，它没有采用现有的开源库，如redux、mobx等，也没有使用传统的useContext，而是用useState + useEffect写了一个发布订阅者模式进行状态管理，这一点对我来说感觉比较新奇，以前从没接触过这种写法，于是决定研究一下目前比较常用的状态管理方式。ps：这里谈到的状态管理是指全局状态管理
......
176
0
0
2023-04-16
目录引言React 和 rematch 创建Todo List App创建一个 models.ts 文件创建一个 todo.ts 文件使用 rematch 的 init 函数创建 storeRematchTodoApp
......
198
0
0
2023-04-11