key的原理？为了么要使用key？选什么做key？ ? 在开发react程序时我们经常会遇到这样的警告，然后就会想到：哦！...为了弄明白，本文将从三个方面来分析"key"： 1.为什么要使用key 2.使用index做key存在的问题 3.正确的选择key 1.为什么要使用key react官方文档是这样描述key的： Keys...2.2 非受控组件 像input这样可以由用户任意改变值，不受我们控制的组件，在使用了index作为key时可能会发生问题，看如下的例子： 子组件： render() { return (...react只diff到了p标签内值的变化，而input框中的值并未发生改变，因此不会重新渲染，只更新的p标签的值。 当使用唯一id作为key后： ?...3.正确的选择key 3.1 纯展示 如果组件单纯的用于展示，不会发生其他变更，那么使用index或者其他任何不相同的值作为key是没有任何问题的，因为不会发生diff，就不会用到key。
在linux下使用glog静态库，编译连接时只要加上glog静态库文件(.a)就可以了，在windows环境，我也同样的办法在自己的项目中使用glog静态库，用msvc/mingw编译。。。...GFLAGS_DLL_DECLARE_FLAG， GFLAGS_DLL_DEFINE_FLAG， GLOG_NO_ABBREVIATED_SEVERITIES， GOOGLE_GLOG_DLL_DECL 目的是告诉连接器使用...如果你是用cmake脚本来编译自己的项目的，如果是用下面的方式来导入glog（caffe就是这么干的,linux下是没问题的）,那么连接时肯定会报错，原因就是没加入上面说的宏定义 # GLOG_ROOT_DIR...include_directories(${GLOG_INCLUDE_DIR}) target_link_libraries(your_project ${GLOG_LIBRARY}) 在cmake中，加入glog静态库的正确方式是这样的...imported target set(GLOG_LIBRARY glog::glog) ... target_link_libraries(your_project ${GLOG_LIBRARY}) 上面的代码中使用
在实际的开发中，我们常常会用到工具类去拷贝对象的属性，将一个对象的属性转换成另外一个对象的属性值。首先：答应我不要去自己重复造轮子，写Beanutil了，为什么不去使用现成的工具类呢？...现成的工具类简单又安全，自己写的万一哪天出了问题呢。 这里的beanUtil 我首推hutool，它的工具类的真的太丰富了，真的感觉它太懂中国的程序员了。...我们有需求是这样的： 忽略空值：当源对象的值为null时，可选择忽略而不注入此值，否则注入null 目标对象有值不覆盖：原对象为null，则覆盖 是不是感觉原来的方法行不通了，是的，原来方法太单一了，但是我们调用...2、是否忽略空值，当源对象的值为null时，true: 忽略而不注入此值，false: 注入null 3、忽略的属性列表，设置一个属性列表，不拷贝这些属性值 似乎还是有些不明白对吧，现在我们来看看怎么使用...我们将它的可以set的属性全部的设置一下。
当double必须用作BigDecimal的源时，请注意，此构造方法提供了一个准确转换；它不提供与以下操作相同的结果：先使用Double.toString(double)方法，然后使用BigDecimal...❝divide方法设置精确的小数点，如：divide(xxxxx,2) ❞ 六、BigDecimal总结 6.1、总结 在需要精确的小数计算时再使用BigDecimal，BigDecimal的性能比double...和float差，在处理庞大，复杂的运算时尤为明显。...故一般精度的计算没必要使用BigDecimal。尽量使用参数类型为String的构造函数。...BigDecimal都是不可变的（immutable）的， 在进行每一次四则运算时，都会产生一个新的对象 ，所以在做加减乘除运算时要记得要保存操作后的值。
前言 需求就是想把wgs84的地理坐标转换成2000的投影坐标，在网上看的方法但是会报错，说是ArcGIS10.5的问题，今天试了下10.2的版本可以了，所以记录下过程，免得以后忘记了。
互联网的大数据时代，网络爬虫的工作离不开大数据。在我们使用网络过程中，肯定遇到过访问网站IP受限这种问题。...如果想一直访问目标网站，这时候可以利用隧道转发的爬虫代理加强版来上网，隧道转发爬虫代理加强版使用起来非常简单。...当然网上的免费代理IP也同样可以使用，免费代理IP的获取方式非常简单，直接通过网络搜索，然后网络爬虫编程一个程序来筛选可用的IP，免费的代理IP虽然很多，但是也只适合业务较小的用户，对IP质量要求不高的用户...不仅会影响业务的进展，爬虫效果也不会稳定。 对于大工作量的爬虫来说，效率是第一位的，只有高效率才能在有限的时间里，完成大量的工作。...要提高效率，则必须要高质量稳定的代理IP像公司企业对IP需求量大的网络爬虫用户，完全可以使用隧道转发的爬虫代理加强版，来提高业务的进展，加强业务的稳定性，不仅节约了业务时间，也能保证代理的正常运行，满足的大量客户的需求
中使用style对象的方式时。...这种方式的react样式，只作用于当前组件。 第二种: 在组件中引入[name].css文件 需要在当前组件开头使用import引入css文件。... ); } } export default Test; 这种方式引入的css样式，会作用于当前组件及其所有后代组件。...sass，请查看sass官网 这种方式引入的css样式，同样会作用于当前组件及其所有后代组件。...引入这个组件html和css都有了。 它的好处在于可以随时通过往组件上传入 属性，来动态的改变样式。对于处理变量、媒体查询、伪类等较方便的。 这种方式的css也只对当前组件有效。
本文介绍一下 React 中常见的 Context API 的使用方式。在使用 Context API 之前，我们还需要知道为啥要使用。...首先要引入 React 内置的 React Context API ? 最后创建 consumer ? 创建 Provider 增加一个名为 ToggleContext.js 的文件作为上下文?...，里头定义一系列需要跨层级使用的 state 和 function 1import React, { createContext } from 'react' 2 3// 1....，直接导出 Context.Consumer 给外部使用即可 使用 Provider ToggleProvider 组件包装了一系列共享的状态，为了使用这些组件的状态，我们直接将其添加到 App 组件中...如果组件内部有其他多个组件，这些组件都可以共享 Provider 提供的 state 使用 Consumer 通过 Consumer 直接使用 props 传递的 state 属性在 render 函数中渲染即可
自定义 overflow 的滚动条 1. overflow 属性介绍 ---- css 中的 overflow 属性用于控制内容溢出元素框时的显示方式。...当元素框中的内容溢出时，无非就是两种情况: 溢出部分隐藏、溢出部分通过滚动条查看 2. overflow 属性的值 ---- 值 描述 visible 默认值。...，这样可以更好的理解用法，虽然下次使用还要来这里看 首先，先来做一个有滚动条的容器 .container { width: 260px; height: 100px; background...: 可以使用以下伪元素选择器去修改各式 webkit 浏览器的滚动条样式 选择器 描述 ::-webkit-scrollbar 整个滚动条 ::-webkit-scrollbar-corner 当同时有垂直滚动条和水平滚动条时交汇的部分...::-webkit-scrollbar { width: 4px; height: 7px; } /* 当同时有垂直滚动条和水平滚动条时交汇的部分 */ .container::-webkit-scrollbar-corner
使用 submit 方法可以将任务提交到线程池中，由线程池中的线程来执行任务，从而避免了为每个任务创建线程的开销。同时，线程池可以限制同时执行的任务数量，避免资源被过度占用。...，不应该直接这么get的，这样就跟没有开线程池一样，因为future.get(10, TimeUnit.SECONDS)会阻塞线程继续执行，线程池的最大使用效率没有返回出来，只用到一个单线程在执行，结果等于没有用...最后只能修改业务逻辑，因为对执行结果不是特别需求，所有可以改成execute方式，当然如果逻辑对返回值的需求特别的可以解耦，使用生产者消费者模式，一边计算一边处理，实现逻辑可以这样，在submit...返回的Future对象存储在一个集合里面，在另一边可以批次处理也可以单次处理，批次处理就判断所有的submit执行完之后处理，单次处理就使用队列集合，一次取一个值理论情况下不会阻塞太久。...总结 习惯了用execute就忘记了submit的正确使用方式，惯性是很恐怖的，还是得多多跑跑单元测试。
在很多情况下，可能并不需要将应用的配置选项定义在配置文件中，在应用启动时直接初始化可能是一种更方便快捷的方式。...，现在摒弃配置文件，转而采用编程的方式直接对用户信息进行初始化，所以需要对程序做如上改写。...在调用IServiceCollection接口的Configure扩展方法时，不需要再指定一个IConfiguration对象，而是利用一个Action类型的委托对作为参数的...如果需要根据指定的名称对Options进行初始化，那么调用方法时就需要指定一个Action类型的委托对象，该委托对象的第二个参数表示Options的名称。...运行该程序并按照下图所示的方式指定不同的格式化字符串，系统会根据我们指定的规则来验证其有效性。 ?
除了采用依赖注入的形式消费承载某种功能的服务，还可以采用相同的方式消费承载配置数据的Options对象。...一、将配置绑定为Options对象 Options模式是一种采用依赖注入的方式来提供Options对象的编程方式，但这并不意味着我们会直接利用依赖注入框架来提供Options对象本身，因为利用依赖注入框架获取的是一个能够提供...就演示实例中用来表示个人信息的Profile类型来说，应用程序中可能会使用它来表示不同用户的信息，如张三、李四和王五。...); Console.WriteLine($"Phone No: {profile.ContactInfo.PhoneNo}\n"); } } } 为了使用指定的用户名来提取对应的...String>对象，该委托对象的第二个参数表示的正是在注册IConfiguration对象与Options类型应用关系时指定的名称。
考虑这样的一个场景。...连接 (connect)在生命周期中添加一些可复用的逻辑当我们用 JS 的时候，上面的需求很简单：import React from 'react';import { connect } from '...react-redux';import { increaseCount } from '....，这件事就变得十分地麻烦，反正我看着一整页的 typescript 报错，脑子里只有 “ybb”：经过了一整个晚上的冲浪，终于找到了正确的写法。...这里需要借助 utility-types 包的工具泛型 Diff：import React from 'react';import { connect } from 'react-redux
滚动的部分内容，必须在容器边缘露出来。 滚动时，容器的内容必须从屏幕的边缘滑出来。 容器内两个内容之间的距离要小于边缘的距离，这样容器两端都会有更大的空间（这提示用户他们已经滑到最后）。...如下： 需要注意的是，容器两端的距离和周围内容的距离是匹配的（也就是整体布局要和谐）。 整体布局 现在，我们已经基本明白水平滚动容器的特性了。接下来，我们考虑使用 CSS Grid 网格布局来编码。...使用 CSS Grid 网格布局方便我们控制元素之间的距离，无需进一步计算。...对于整体布局，我们将使用简单但强大的 CSS Grid 技术： .app { display: grid; grid-template-columns: 20px 1fr 20px; } .app...一种使其更灵活的处理方式是，你可以使用 Javascript 来计算卡片的数量，然后将其分配给 CSS 变量。
以终为始是一种思维方式。如果终局确定，那么根据已知的终局就能推演出达到终局的路径，最终形成一个解决方案。...举个例子，如果你要盖一栋楼，那么在盖之前的规划的大楼效果就是”终“，通过这个效果图来反推我们的建筑施工图、结构施工图等，最终形成一个完整的解决方案。 以终为始的思维方式有什么用？...应用场景 在有具体的目标或某个确定未来的场景下，可以通过以终为始的方式来规划现在。...执行方案是可变的，是紧跟目标的，当我们发现方案不能达到目标时，就应该换方案。 三，守原则（自律） 有了执行方案，就应该坚决的、自律的去执行。宁肯输在认知错误上，也不愿意输在执行不到位上。...如果它是这个样子，那现在更应该选择哪种方式去做？ 以终为始的局限 以终为始只是一种思维方式，它并不保证你所认为的终局一定是正确的。
，Vue.js不能检测到对象属性的添加或删除。...因为Vue.js在初始化实例时将属性转为getter/Fsetter，所以属性必须在data对象上才能让Vue.js转换它，才能让它是响应的。...要处理这种情况，我们可以使用$set()方法，既可以新增属性,又可以触发视图更新。...但是，值得注意的是，网上一些资料写的$set()用法存在一些问题 错误写法： mounted () { this....$set(this.student.age, 24) } 正确写法： mounted () { this.
1.当我们还在以如下几种方式使用 Optional 时, 就得开始检视自己了 调用 isPresent() 方法时 调用 get() 方法时 Optional 类型作为类/实例属性时 Optional...把 Optional 类型用作属性或是方法参数在 IntelliJ IDEA 中更是强力不推荐的！ 使用任何像 Optional 的类型作为字段或方法参数都是不可取的....Optional.ofNullable(obj): 它以一种智能的, 宽容的方式来构造一个 Optional 实例....使用Optional.of(obj)原则 当我们非常非常的明确将要传给 Optional.of(obj) 的 obj 参数不可能为 null 时, 比如它是一个刚 new 出来的对象(Optional.of...以下为Optional的正确使用方式： 存在即返回, 无则提供默认值 return user.orElse(null); //而不是 return user.isPresent() ?
所以决定还是将SpringBoot参数校验的各种正确使用方式系统的总结一下, 以供后续自己和他人使用. 介绍 SpringBoot参数校验网上已经有很多了, 我这里不详细说明了....本文主要介绍post请求时, 入参为下图参数类型时的参数校验方式...., 所以使用无参和实参进行请求, 通过返回信息来判断是否生效 实参请求 ps: 验证controller方法中@Validated的值为请求实体中groups 属性范围外的值时, 是否生效 修改...controller方法中请求实体前使用未分组的注解, 但请求实体具体属性上注解使用分组属性时, 则参数校验不生效 因此建议使用同一个请求实体时不要同时出现这两种方式, 否则可能会出现滥用导致的注解失效的问题...null时的消息提示, 否则嵌套属性不传时, 则不会对嵌套属性和其对应的嵌套实体内的属性进行校验.
css 过滤 我们在写组件的时候大部分都会导入相关的 css 文件。 import '..../css/index.scss';//导入css //组件 class Index extends React.Component{ constructor(props){ super...所以为了方便，我这里写了一个 babel 插件，在编译的时候干掉 css 的导入代码。 /** * 删除 css 的引入 * 可能社区已经有现成的插件但是不想费劲儿找了，还是自己写一个吧。...在 webpack2 时期主要使用 require.ensure方法来实现按需加载，他会单独打包指定的文件，在当下 webpack4，有了更加规范的的方式实现按需加载，那就是动态导入 import('....ssr 模式下 server 端如何处理路由按需加载 其实很简单，也是参考客户端的处理方式，对路由配置进行二次处理。
React SSR 是什么？React SSR 是 React 服务器端渲染 (SSR: server side render) 技术。传统的服务端渲染方式是使用 HTML 模板的方式渲染出来的。...有些初始化的数据不需要在通过前端动态获取。 上面两张图可以看出，服务端渲染与客户端渲染主要区别在于用户首次访问页面时，页面数据的渲染方式。...使用这几个方法都是可以将 React 组件转化成 HTML 字符串，而前端不变的去写 React 组件即可。这种前后端共用一套代码的方式被称为同构。...而客户端渲染通常没有多少 HTML 代码，基本都是通过 js 动态生成的。因此，如果是 React SSR，那么在浏览器上查看源码时，源码应该有比较多的 HTML 代码，而前端渲染是没有的。 ?...而 next.js 是 react 官方提供的 react ssr 框架，基本配置已经封装好了。使用时就像使用 create-react-app 一样。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
