![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
文章平均质量分 62
小笼包是馒头
这个作者很懒,什么都没留下…
展开
-
React开发过程的性能优化建议
React开发过程的性能优化建议一、使用合理的key原因React根据key来决定是销毁重新创建组件还是更新组件。重建肯定比更新组件更消耗性能。实践// 使用唯一value值作为替代class Checkbox extends React.Component{ render(){ return ( list.map(row =>{ return <checkbox key={row.code} value={row.code} name原创 2021-05-05 17:38:31 · 191 阅读 · 0 评论 -
React还能这么玩(二)组件props传入方法替代直接传值
React还能这么玩(二)组件props传入方法替代直接传值一、例子这是一个渲染列表的组件使用方式,这边有个按钮实现点击下载列表的数据。由前端数据生成Excel:class App { handleColumns = () =>{ // 一堆计算 return [] } getDownloadFileName = () =>{ // 一堆计算 return `${dateStr}_${timestamp原创 2021-03-23 17:28:37 · 197 阅读 · 1 评论 -
React组件抽象(一): mixin
React组件抽象(一)-Mixin写业务组件的时候常常会有一些功能反复被不同的组件公用,这时候就需要取出相同部分功能,这个过程涉及组件抽象。抽象方式有许多种,如高阶组件(High-order components)和mixin。一、MIxin是什么,为什么要使用Mixin一些古老的面向对象的语言,如C++,有个很强大但是很危险的功能:多重继承。多重继承举个例子:有个程序员写了一本书,...原创 2019-07-29 23:56:57 · 585 阅读 · 0 评论 -
React组件抽象(二):高阶组件
React组件抽象(一):高阶组件前面介绍了组件抽象的方法:mixin。现在我们来介绍下另一种重要的高阶组件(Higher-order Component),简写HOC。一、高阶组件是什么,为什么要使用?组件被包裹,返回一个增强的组件。打个比方,HOC像钢铁侠的机甲,对于普通人来说,穿上就是复联超人了,这个人并不一定需要关心内部怎么机甲实现方式。为啥要用?被包裹组件不需要关心高阶组件发生...原创 2019-08-14 23:51:11 · 306 阅读 · 0 评论 -
React还能这么玩(一)组件无render,只为传递数据
React还能这么玩(一)组件无render,只为传递数据前言在翻开源的React组件源码时经常看到一些用法很奇妙的,想着摘录下来,跟大家讨论下。一、例子参考rc-select,此处简化代码描述过程。Selectclass Select extends React.Component{ // 内部的select、option都是原生的React基础组件,先用基础的来替代 /...原创 2019-08-12 20:24:59 · 1088 阅读 · 0 评论