需求分析 在 table表格 的每一行中增加操作列，但是操作选项比较多， 如果直接展示出来，会占用较大的空间 如果将操作选项换成小图标的话，对于用户操作来说并不是很清晰 所以目前解决方案是 将这些操作选项收到一个...dropdown下拉菜单 中。...dropdown下拉菜单 官方文档 https://element.eleme.cn/2.3/#/zh-CN/component/dropdown 并未介绍在 table表格 中的用法， 下面记录实现片段...> dropdown-menu v-slot="dropdown"> dropdown-item command="oneFunc">操作1dropdown-item...> dropdown-item command="twoFunc">操作2dropdown-item> dropdown-item
何时使用lazy函数，比如某个体积相对比较大的第三方库或插件（比如JS版的PDF预览库）只在单页应用（SPA）的某一个不是首页的页面使用了，这种情况就可以考虑代码分割，增加首屏的加载速度。...lazy函数可以单独使用，但是在加载组件时候，页面可能会出现空白，此时需要添加loading，这时就需要suspense了，代码如下： const Foo = React.lazy(() => import.../componets/Foo)); 上面的代码直接在函数中使用Foo组件页面加载时会出现白屏，所以需要suspense来包裹，代码如下： React.Suspense fallback...，但使用了Suspense之后，可优化交互。...在外面使用Suspense标签，并在fallback中声明OtherComponent加载完成前做的事，即可优化整个页面的交互 fallback 属性接受任何在组件加载过程中你想展示的
key的原理？为了么要使用key？选什么做key？ ? 在开发react程序时我们经常会遇到这样的警告，然后就会想到：哦！...为了弄明白，本文将从三个方面来分析"key"： 1.为什么要使用key 2.使用index做key存在的问题 3.正确的选择key 1.为什么要使用key react官方文档是这样描述key的： Keys...可以在DOM中的某些元素被增加或删除的时候帮助React识别哪些元素发生了变化。...因此你应当给数组中的每一个元素赋予一个确定的标识。...react只diff到了p标签内值的变化，而input框中的值并未发生改变，因此不会重新渲染，只更新的p标签的值。 当使用唯一id作为key后： ?
React Native中的iconfont 关于在React Native中使用iconfont，网上已有很多非常好的解决方案，用的最多的就是react-native-vector-icons , 这个库支持很多常用的...IconFont的使用原理 其实IconFont就是一些文字，通过在web上的使用，我们可以大概猜出使用方法： 指定字体集 把对应的16进制码当成文字写到文本中 在React Native中同样如此，我们可以通过...react-native-vector-icons的源代码来验证我们的想法。...实际上，一个字体通常由数个表(table)构成，字体的信息存储在表中。...这里最好给每个icon定一个易于理解的名字，可以使用http://font.baidu.com/editor 使用自定义的IconFont 有了上面的摸索，要支持自己的IconFont并不难。
在 React 中，合理优化状态（State）的使用可以显著提升应用性能和可维护性。以下是一些关键的优化策略和代码示例：1....状态最小化与拆分避免将不相关的数据放在同一个状态中，应根据更新频率和相关性拆分状态。...使用不可变更新模式直接修改状态会导致 React 无法检测变化，应始终创建新对象/数组。...状态提升与 Context 合理使用当多个组件需要共享状态时，可将状态提升到共同的父组件避免过度使用 Context，它会导致所有消费组件重渲染// 状态提升示例function Parent() {...避免不必要的状态更新使用条件判断避免无意义的状态更新。
React 中 CSS的规则都是全局的，任何一个组件的样式规则，都对整个页面有效，这可能会导致大量的冲突。...也就是说如果我有两个css文件，它们的中的一些样式名是一样的，那么就会被覆盖，简单的解决办法就是将样式的命名变得复杂且不重复，但这样样式多了也很难避免重复，且命名也不会太好看。...那么这个时候就推荐使用CSS Modules 了CSS Modules 的做法就是通过配置将.css文件进行编译，编译后在每个用到css的组件中的css类名都是独一无二的，从而实现CSS的局部作用域。...在create-react-app2.0之前的版本，配置CSS Modules是需要eject弹出webpack来配置的，幸运的是，create-react-app自从2.0.版本就已经开始支持CSS...red; } 组件使用样式 import React from 'react'; import style from '.
一、基本使用 (1).明确两个概念： 1).UI组件:不能使用任何redux的api，只负责页面的呈现、交互等。...(3).使用了react-redux后也不用再自己检测redux中状态的改变了，容器组件可以自动完成这个工作。...(3).重点：Person的reducer和Count的Reducer要使用combineReducers进行合并， 合并后的总状态是一个对象！！！...(4).交给store的是总reducer，最后注意在组件中取出状态的时候，记得“取到位”。...四、react-redux开发者工具的使用 (1).npm install redux-devtools-extension (2).store中进行配置
一起学习PHP中GD库的使用（一） 又到了一个大家非常熟悉的库了，对于图像图形的处理来说，GD 库是 PHPer 们绕不过去的一道坎。...当前环境中的 GD 库信息 首先，我们可以查看下当前 PHP 环境中的 GD 库版本及支持的图片格式信息。...我们还可以使用 getimagesize() 获得远程文件的信息。...这个最终生成的图片中，中文也是乱码的，不过它已经是可以当做一个图片验证码来使用了，是不是非常地简单？ 总结 今天的内容不多，也都是比较基础浅显的一些函数的使用。...测试代码： https://github.com/zhangyue0503/dev-blog/blob/master/php/202012/source/1.一起学习PHP中GD库的使用（一）.php
一起了解PHP中YaConf扩展的使用 上篇文章我们介绍了一个比较出名的 YAML 格式的配置文件相关的操作，今天我来学习另外一个配置文件扩展。...关于 Yaconf 的具体介绍可以查看文章最下方第二条链接的说明，在这里我们就看一些它的语法以及具体的使用。...而继承的使用相信从代码中大家也看出来了，parent 的 parent 配置项被 children 继承后，children 中不需要再定义这个配置项就可以直接获取到父级中定义过的这个配置项内容。...因为大家目前在使用的框架不管是 Laravel 还是 TP 都会有它们自己的一套配置文件格式及操作。...测试代码： https://github.com/zhangyue0503/dev-blog/blob/master/php/2021/01/source/11.一起了解PHP中YaConf扩展的使用.
在 React 中，ref 是一种用于访问组件或 DOM 元素的引用的特殊属性。...在组件中存储对 DOM 节点或组件实例的引用，直接访问和操作 ref 的使用方式有两种： 1：字符串形式的 ref：在早期版本的 React 中，可以使用字符串来创建 ref。...{ return ; } } 2：回调形式的 ref：在现代版本的 React 中，推荐使用回调函数来创建 ref。...使用 ref 的一般步骤 在 React 中，可以使用 ref 属性来创建和使用 ref。...下面是使用 ref 的一般步骤： 1：创建 ref： 在类组件中，用 React.createRef() 创建 ref 对象，将其赋值给组件的实例属性。
一起学习PHP中GD库的使用（二） 在日常的开发过程中，GD 库最常用的功能就是帮我们对图片进行一些处理，当然，除了处理已有的图片之外，它也可以直接来画图，就像我们最常见的图片验证码。...使用 imagepng() 就能生成一张 PNG 格式的图片，它还有第二个参数，如果给定了第二个参数，那么图片就会直接以文件形式保存到参数指定的路径中。...如果不给定这个参数的话，就会像 phpinfo() 一样直接输出到输出缓冲区中，也就是直接打印内容了。最后，我们再使用 imagedestroy() 释放掉图片句柄解除图片文件的内存占用。...同样在 Composer 中也有很多现成的验证码组件供我们使用，其实我们并不需要自己去实现这样的验证码功能的，但学习嘛，总是要接触一下了解一下的，而且如果是一些很小的小项目的话，完全就可以自己手写一个来练习了...测试代码： https://github.com/zhangyue0503/dev-blog/blob/master/php/202012/source/2.一起学习PHP中GD库的使用（二）.php
一起学习PHP中GD库的使用（三） 上篇文章我们已经学习了一个 GD 库的应用，那就是非常常用的制作验证码的功能。...不过在现实的业务开发中，这种简单的二维码已经使用得不多了，大家会制作出更加复杂的二维码来使用。毕竟现在的各种外挂软件已经能够轻松地破解这种简单的图片验证码了。...当然，我们也可以简单地对他进行变形，比如使用中文然后按顺序点击之类的，这些都比较简单地就能实现。更复杂的二维码则推荐使用一些开源的库或者api来实现。 今天，我们将继续学习 GD 库的一些常用的应用。...总结 关于图片 GD 库的功能函数还有很多，但说实话，笔者现在都已经用得不多了。为什么呢？在实际的业务开发中，大家其实都已经习惯使用 oss 、七牛、upyun 之类的云存储了。...测试代码： https://github.com/zhangyue0503/dev-blog/blob/master/php/202012/source/3.一起学习PHP中GD库的使用（三）.php
先说明一下我的运行环境： 1.我当时这个年代用的RN版本是0.55 2.使用的脚手架是create-react-native-app 调试 EJECT前（即生成那个android和ios文件前） 如果你像我那样...解决方法： 1、使用Image自带的getSize方法先获取宽高 2、使用别的大神的组件React Native Fit Image 等 资源超过400kb左右不显示 所以说原生组件， 推荐使用别的组件库...：react-native-fast-image（要先装个glide，略为麻烦） 静态资源 source={require(‘..../xxx/') 点击事件尽量使用Touchable开头的 react-navigation 官方推荐的路由组件库 我使用StackNavigator方法 坑1：...，goBack()前调用 2、传入route_key，使用setParams方法传参 打包 建议按官网流程 我踩过的坑：index.js 里的 registerComponent 不同app要不一样 未完待续
如果在你的项目中使用主题，基本是每个组件都需要；或者你在项目中使用多语言，也是每个组件都需要支持，这都是典型的可以通过 context 操作的例子使用示例我们实现一个多个组件，共享同一个颜色的示例，通过按钮点击切换颜色...方法：// src/react.js// 我们的写法效仿的是我们使用官方库打印出来的结果function createContext() { const context = { $$typeof...: REACT_CONTEXT, _currentValue: undefined, // 值是绑定在 context 中的 _currentValue 属性上 } // 这里使用了递归引用，...如果使用的组件在不同的页面，我们需要把 ColorContext 进行导出，文件中自行引入。...下一下小节我们学习下 react 中的高阶组件。
学习必备要点： 首先弄明白，Redux在使用React开发应用时，起到什么作用——状态集中管理 弄清楚Redux是如何实现状态管理的——store、action、reducer三个概念 在React中集成...Action创建函数 Action 创建函数 就是生成 action 的方法。“action” 和 “action 创建函数” 这两个概念很容易混在一起，使用时最好注意区分。...技术上来说我们可以直接使用 store.subscribe() 来编写容器组件。但不建议这么做，因为这样写就无法使用 React Redux 带来的性能优化。...建议的方式是使用指定的 React Redux 组件 来让所有容器组件都可以访问 store，而不必显示地传递它。只需要在渲染根组件时使用即可。...在异步操作这块，我们建议使用 redux-saga 中间件来创建更加复杂的异步 action。其中涉及到es6中的Generators可以在文档中查看。
NavLink的概述NavLink是react-router-dom库中的一个特殊导航链接组件，它可以帮助我们在React应用程序中创建导航链接，并根据当前活动的URL自动添加活动链接的样式。...支持自定义活动链接的样式。可以通过属性控制是否激活链接。可以通过属性配置链接的精确匹配或部分匹配。使用NavLink组件，我们可以轻松创建具有活动状态样式的导航链接，并为用户提供更好的导航体验。...NavLink的使用方法首先，确保您已经安装了react-router-dom库：npm install react-router-dom接下来，让我们看一个使用NavLink的示例：import React...然后，在导航栏中，我们使用NavLink组件创建了三个导航链接：Home、About和Contact。在每个NavLink组件中，我们通过to属性指定链接的目标URL。...请注意，我们在Home链接中使用了exact属性，这表示只有在URL精确匹配时才应用活动样式。这可以避免部分匹配的链接错误地被激活。
Switch的概述在React中，Switch组件用于包裹一组Route组件，并根据URL的路径匹配来选择渲染第一个匹配的路由组件。...使用Switch组件可以实现以下功能：路由匹配：根据URL的路径匹配第一个符合条件的路由。单一路由：确保只有一个路由被渲染，避免多个路由同时匹配。...Switch的使用方法首先，确保您已经安装了react-router-dom库：npm install react-router-dom接下来，让我们看一个使用Switch的示例：import React...在应用程序组件中，我们使用Router组件来包裹整个应用程序，并在其中使用Switch组件来包裹多个Route组件。在Switch组件中，我们定义了三个Route组件。...通过使用Switch组件，我们可以确保只有一个路由会被渲染，避免多个路由同时匹配的情况。
Router Router就是路由器，里面包含若干个Route（路由） 常用的Router有两个： 1、 2、 BrowserRouter即在浏览器地址栏中不显示...Route Route包含在Router中，但更多情况下，我们直接都是把Router放在“根”上，也即App上： import React from "react"; import ReactDom from..."react-dom"; import App from "....嵌套路由 在路由里套路由 所有的组件你都可以使用使用 Link Switch .....一般情形下，如果使用NavLink的话，会自动添加一个名为active的class，如果要自定义，那么给NavLink添加要给属性即可：activeClassName <NavLink to="/hello
---- 这是我参与8月更文挑战的第三天 1.组件介绍 使用React就是在使用组件 组件表示页面中的部分功能 组合多个组件实现完整的页面功能 特点：可复用、独立、可组合 2....组件的两种创建方式 2.1 使用函数创建组件 使用js的函数（箭头函数）创建的组件 约定1：函数名称必须以大写字母开头 ...类组件：使用ES6 的class创建的组件 约定1：类名称必须以大写字母开头 约定2：类组件继承自React.Component父类，从而可以使用父类中提供的方法或属性 约定3：类组件必须提供render...选择1：将所有组件都写在一个js文件中 选择2：将所有组件都放到单独的js文件中 组件作为一个独立的个体，一般会放到一个单独的js文件中。...) } } // 导出 export default Hello; index.js // ES6 中模块化语法 import React from 'react'; import ReactDOM
Developer Tools 提供的 Profiler 可以直观的帮助大家找出 React 项目中的性能瓶颈，进一步来改善我们的应用，推荐给大家安装使用。...使用 安装 可以从 Chrome 应用市场、Firefox 浏览器扩展、Node 包 下载安装； react 16.5+ 开发模式下才可以使用该功能，生成环境使用请移步官方文档 (https://fb.me...改进 现在我们知道如何阅读 Profiler 的展示面板以及生成的图表信息，为了更直观的感受到阻止 reRender的效果，我们在例子中增加一个常见的 List 再来看一下。...hook 的使用，这样的优化场景已经大大减少了； import React from "react"; import { is } from "immutable"; export default class...而且在 React 推崇的函数式编程中，通常情况下一个组件的代码量不宜过多，这也就更多的要求开发者将组件细化，而更容易的控制组件的属性与状态，当你迷惑为什么发生 reRender 的时候，React Profiler
云服务器
ICP备案
对象存储
实时音视频
云直播
