- 博客(372)
- 资源 (81)
- 收藏
- 关注
RSS订阅
原创 后端：添加开放端口 查看占用的端口（linux系统版）
防火墙添加端口firewall-cmd --zone=public --add-port=8888/tcp --permanent （–permanent永久生效，没有此参数重启后失效）firewall-cmd --zone=public --add-port=888/tcp --permanent （–permanent永久生效，没有此参数重启后失效）firewall-cmd --zone=public --add-port=80/tcp --permanent （–perman
2020-07-14 10:16:02
648
原创 后端：基于node实现接口文档 并开放某个端口关闭进程等(linux指令)
首先购买服务器（可以某宝花30块租一个月服务器）购买后,通过xshell在inux上安装node,可以参考这篇文章：链接你会用得到这些linux基础命令node安装成功后,// 创建文件并打开touch serve.js && vi serve.js// 保存先按esc键，输入 :wq 即可保存文件并退出// 上面是一个最简单的接口，想实现多层路由可...
2020-04-07 13:23:51
242
原创 react api:forwardRef
*// …});使用 forwardRef() 让组件接收 ref 并将其传递给子组件：forwardRef 返回一个可以在 JSX 中渲染的 React 组件。与作为纯函数定义的 React 组件不同，forwardRef 返回的组件还能够接收 ref 属性。return (});props：父组件传递过来的 props。ref：父组件传递的 ref 属性。ref 可以是一个对象或函数。如果父组件没有传递一个 ref，那么它将会是 null。
2024-04-06 16:35:04
961
原创 react api:createContext
*在任意组件外调用 createContext 创建一个上下文。defaultValue：当读取上下文的组件上方的树中没有匹配的上下文时，希望该上下文具有的默认值。倘若没有任何有意义的默认值，可指定其为 null。该默认值是用于作为“最后的手段”的后备方案。它是静态的，永远不会随时间改变。createContext 返回一个上下文对象。该上下文对象本身不包含任何信息。它只表示其他组件读取或提供的那个上下文。
2024-04-06 10:37:41
810
原创 react 组件：Suspense
fallback：真正的 UI 未渲染完成时代替其渲染的备用 UI，它可以是任何有效的 React 节点。如果 fallback 在渲染中被挂起，那么将自动激活最近的 Suspense 边界。当一个组件被挂起时，最近的父级 Suspense 组件会展示后备方案。默认情况下，Suspense 内部的整棵组件树都被视为一个单独的单元。在上面的 Albums 组件中，正确的数据加载方法取决于你使用的框架。如果你使用了支持 Suspense 的框架，你会在其数据获取文档中找到详细信息。
2024-04-05 11:54:52
563
原创 react组件:strictmode
如果一个函数是纯函数，运行两次不会改变其行为，因为纯函数每次都会产生相同的结果。然而，如果一个函数是非纯函数（例如，它会修改接收到的数据），运行两次通常会产生明显的差异（这就是它是非纯函数的原因！在这个例子中，严格模式的检查不会对 Header 和 Footer 组件运行。这意味着编写的 React 组件在给定相同的输入（props、state 和 context）时必须始终返回相同的 JSX。为了帮助你找到意外的非纯函数代码，严格模式 在开发环境中会调用一些函数两次（仅限应为纯函数的函数）。
2024-04-05 08:53:58
964
原创 react组件:profiler
*id：字符串，用于标识正在测量的 UI 部分。onRender：onRender 回调函数，当包裹的组件树更新时，React 都会调用它。它接收有关渲染内容和所花费时间的信息。// 对渲染时间进行汇总或记录…phase：为 “mount”、“update” 或 “nested-update” 中之一。这可以让你知道组件树是首次挂载还是由于 props、state 或 hook 的更改而重新渲染。actualDuration：在此次更新中，渲染 组件树的毫秒数。
2024-04-04 15:36:00
456
原创 react hook: useRef
可以修改 ref.current 属性。然而，如果它持有一个用于渲染的对象（例如 state 的一部分），那么就不应该修改这个对象。initialValue：ref 对象的 current 属性的初始值。current 返回一个只有一个属性的对象, 初始值为传递的 initialValue。useRef 也可以useRef 来保存上一次的值，供下次渲染时进行比较或其他操作。改变 ref.current 属性时，React 不会重新渲染组件。useRef 也可以保存任何可变的数据，而不用触发组件的重新渲染。
2024-03-19 20:01:21
342
原创 react hook: useReducer
参数为 state 和 action，返回值是更新后的 state。如果它创建了比较大的数组或者执行了昂贵的计算就会浪费性能。useReducer 更适用于处理复杂的状态逻辑，尤其是当状态之间存在关联，或者需要多个状态同时更新时。当需要处理复杂的状态逻辑，或者需要进行多个相关状态的更新，并且这些状态需要一起进行更改时，useReducer是一个适合的选择。在组件的顶层作用域调用 useReducer 以创建一个用于管理状态的 reducer。state 的类型也是任意的，不过一般会使用对象或数组。
2024-03-14 17:18:36
448
原创 react hook:
通常用于立即向用户呈现执行操作的结果，即使实际上操作需要一些时间来完成。import { useOptimistic } from 'react';function AppContainer() { const [optimisticState, addOptimistic] = useOptimistic( state, // 更新函数 (currentState, optimisticValue) => { // 使用乐观值 // 合并并
2024-03-11 16:08:40
384
原创 react hook:useMemo
因为 searchOptions 是你的 useMemo 调用的依赖项，而且每次都不一样，React 知道依赖项是不同的，并且每次都重新计算 searchItems。在接下来的渲染中，如果依赖项没有发生改变，它将返回上次缓存的值；尽管在某些情况下您可以不使用它，但对于需要进行昂贵的计算或处理大量数据的情况，使用 useMemo 是非常有益的。在严格模式下，为了 帮你发现意外的错误，React 将会 调用你的计算函数两次。默认情况下，当一个组件重新渲染时，React 会递归地重新渲染它的所有子组件。
2024-03-08 19:13:50
592
原创 react hook: useLayoutEffect
如果有足够的空间，tooltip 应该出现在元素的上方，但是如果不合适，它应该出现在下面。为了让 tooltip 渲染在最终正确的位置，你需要知道它的高度（即它是否适合放在顶部）。他们只返回一些 JSX，然后浏览器计算他们的 布局（位置和大小）并重新绘制屏幕。如果你使用的是速度较慢的设备，你可能注意到有时 tooltip 会“闪烁”，并且会在更正位置之前短暂地看到初始位置。useLayoutEffect 是 useEffect 的一个版本，在浏览器重新绘制屏幕之前触发。在浏览器重新绘制屏幕前计算布局。
2024-03-07 15:32:15
588
原创 react hook: useInsertionEffect
useInsertionEffect 是为 CSS-in-JS 库的作者特意打造的。除非你正在使用 CSS-in-JS 库（Styled-Components 、 Emotion 、JSS (JSS for React) 、 Glamorous、 Radium）并且需要注入样式，否则你应该使用 useEffect 或者 useLayoutEffect。这通常需要使用 CSS-in-JS 库或工具。从 CSS-in-JS 库中注入动态样式。运行时注入会使浏览器频繁地重新计算样式。
2024-03-07 14:45:31
595
原创 react hook： useimperativeHandle
通过 useImperativeHandle，子组件可以选择性地暴露给父组件某些属性或方法，而不是将所有属性和方法暴露出去。父组件 获得自组件的 ref，就能通过该 ref 来调用 focus来聚焦等功能。
2024-03-07 11:27:38
752
原创 react hook: useId
如果你在单个页面上渲染多个独立的 React 应用程序，请在 createRoot 或 hydrateRoot 调用中将 identifierPrefix 作为选项传递。这确保了由两个不同应用程序生成的 ID 永远不会冲突，因为使用 useId 生成的每个 ID 都将以你指定的不同前缀开头。不要使用自己编写的 ID，而是使用 useId 生成唯一的 ID。现在，即使 PasswordField 多次出现在屏幕上，生成的 ID 并不会冲突。可以使你避免为每个需要唯一 ID 的元素调用 useId。
2024-03-07 11:15:09
663
原创 react hook:useeffect
只有当在浏览器绘制之前运行 Effect 非常重要的时候才需要如此：例如，在用户看到 tooltip 之前测量并定位它。如果你的 Effect 依赖于在渲染期间创建的对象或函数，则它可能会频繁运行。如果你的 Effect 依赖于在渲染期间创建的对象或函数，则它可能会频繁运行。在开发环境下，如果开启严格模式，React 会在实际运行 setup 之前额外运行一次 setup 和 cleanup。如果完全不传递依赖数组，则 Effect 会在组件的 每次单独渲染（和重新渲染）之后 运行。
2024-03-06 14:18:43
582
原创 mock项目：
当然，成熟的开源框架（如Ant Design 和 Vite/Create React App）通常具有广泛的社区支持、更新和维护，有大量的用户基础，这可能意味着更快的BUG修复和更多的功能更新。因此，有时公司会选择结合两者的优势，使用公司内部的组件库完成定制化需求，并使用成熟的开源框架来弥补不足。2 安全和合规性：公司内部的组件库和框架可能更容易符合公司的安全、隐私、合规等方面的要求。1 定制化需求：公司内部的组件库和框架可能更容易根据公司特定的设计语言和用户体验需求进行定制。
2024-03-06 14:15:43
354
原创 react hook: useDeferredValue
你还可以将 useDeferredValue 作为性能优化的手段。当你的 UI 某个部分重新渲染很慢、没有简单的优化方法，同时你又希望避免它阻塞其他 UI 的渲染时，使用 useDeferredValue 很有帮助。在上面的示例中，当最新的查询结果仍在加载时，没有任何提示。如果新的结果需要一段时间才能加载完成，这可能会让用户感到困惑。比如，不影响输入框输入，然后延迟获取结果， 这样不影响输入也给用户一个好的视觉体验。它的作用是返回一个延迟更新的值，以提高性能并优化用户体验。
2024-03-05 17:45:44
454
原创 react hook: useDebugValue
在react开发工具(components面板)-选中添加useDebugValue的hooks组件，在右侧hooks上可以看到标记。第二个参数用来格式话第一个参数的数据。
2024-03-05 16:54:47
482
原创 react hook: useCallback
useCallback的主要使用场景在于优化性能，并确保当传递回调函数给子组件时，子组件不会因为父组件的重渲染而重新创建函数。
2024-03-04 11:15:09
534
原创 react: react react-dom react-native
【代码】react: react react-dom react-native。
2024-03-04 10:24:59
325
原创 react: useMemo
在https://ant.design/components/button-cn 打开codesanbox，替换代码保存。useMemo 避免组件更新结果重新计算，提高性能。
2023-12-22 11:43:32
503
原创 react: useEffect
可以吧useEffect看作是componentDidMount componentDidUpdate componentWillUnmount 三个函数的组合。在https://ant.design/components/button-cn 打开一个codesanbox， 替换下面代码。
2023-12-22 11:07:40
726
原创 react： useReducer
在https://ant.design/components/button-cn 打开一个codesanbox替换下面代码保存即可。相比useState， 用来处理更为复杂的修改数据方式。
2023-12-22 10:50:02
656
原创 react: useState
在 https://ant.design/components/button-cn 打开一个codesanbox替换。
2023-12-22 10:43:51
407
原创 react:useContent
在 https://ant.design/components/button-cn 打开一个codeSanbox， 替换下面的代码保存。useContent 用来简化代码。
2023-12-22 10:37:51
648
原创 微前端：quankun
此时，发现micro-react01应用已经加载出来了。得到服务地址localhost:3001。在主项目app.tsx加入下面的代码。micro-react01项目。micro-react01项目。访问： 主项目地址/app1,micro-vue01项目。
2023-11-10 16:08:49
346
原创 react: zustand数据缓存
在 zustand 库中，middleware 模块提供了一些中间件函数，可以帮助我们更好地管理状态。其中，devtools 和 persist 就是两个常用的中间件函数。devtools 中间件函数可以将 zustand 状态管理器与浏览器开发者工具集成起来，在开发过程中更方便地调试和监控状态。persist 中间件函数可以将状态持久化到本地存储中，当页面刷新或者重新加载时，状态依然可以被保留下来。react状态库包括 zustand、Redux、Valtio、Jotai 和 Recoil。
2023-11-09 11:24:41
511
原创 react:swr接口缓存
与传统的 useEffect 和 useState 结合使用方式不同，它可以处理HTTP请求的生命周期管理，并且还能自动更新缓存并在成功或失败时提供API响应。它是一个异步 Hook，在使用 useSWRImmutable 时，当我们作出数据请求时，它将使用本地缓存提供此数据。它可以在缓存过期之前重新使用数据，以避免从服务器读取数据的时间和网络成本，帮助提高应用程序的性能和用户体验。SWR 是一个轻量级的 React Hooks 库，通过自动缓存数据来实现 React 的数据获取。
2023-11-08 17:56:35
982
原创 react：路由
路由： 连接文档：https://github.com/remix-run/react-router/blob/main/docs/getting-started/installation.md
2023-11-07 17:24:39
238
原创 react: hooks
import { useState, useEffect } from "react";// 当前状态和一个让你更新它的函数 ； 参数为状态初始值const [initLoading, setInitLoading] = useState(true);// 任意地方使用setInitLoading就可以更新这个状态了useEffect副作用函数// 不传会陷入死循环// 用第二个参数来告诉react只有当这个参数的值发生改变时，才执行我们传的副作用函数（即第一个参数）。// 当我
2023-11-06 14:59:18
281
原创 react: antd组件使用 FC Fragment
RangePicker<RangePicker style={{width: '260px'}} placeholder={['开始日期', '结束日期']} allowClear={false} defaultValue={[defaultDate, defaultDate]} value={reportDate} onChange={(dates: any) => {
2023-11-06 14:57:21
267
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人