小样886

小样886 查看完整档案

填写现居城市  |  填写毕业院校  |  填写所在公司/组织填写个人主网站
编辑

Nodejs菜鸟

个人动态

小样886 关注了问题 · 2018-11-14

antdesign table中render的问题

问题描述

有个需求在antdesign中内容换行的话,只显示1行出现省略号。鼠标移入的时候,出现省略号的内容渲染出一个显示所有内容的气泡。我通过css控制换行出现省略号,我怎么才能判断哪些td出现了省略号的节点出现气泡。

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)
table中的渲染代码:
let newColumns = columns.map(v=>{

  if(!v.render){
    v.render = (text, record, index) =>
       <Popover content = {text}><span className="tab-text">{text}</span></Popover>
  }
  return v
})
css中出现。。。的代码:
.tab-text{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
}

你期待的结果是什么?实际看到的错误信息又是什么?

能获取到出气泡的节点,而不是所有内容都出现气泡

关注 3 回答 2

小样886 提出了问题 · 2018-11-14

antdesign table中render的问题

问题描述

有个需求在antdesign中内容换行的话,只显示1行出现省略号。鼠标移入的时候,出现省略号的内容渲染出一个显示所有内容的气泡。我通过css控制换行出现省略号,我怎么才能判断哪些td出现了省略号的节点出现气泡。

问题出现的环境背景及自己尝试过哪些方法

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)
table中的渲染代码:
let newColumns = columns.map(v=>{

  if(!v.render){
    v.render = (text, record, index) =>
       <Popover content = {text}><span className="tab-text">{text}</span></Popover>
  }
  return v
})
css中出现。。。的代码:
.tab-text{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    /* autoprefixer: off */
    -webkit-box-orient: vertical;
    /* autoprefixer: on */
}

你期待的结果是什么?实际看到的错误信息又是什么?

能获取到出气泡的节点,而不是所有内容都出现气泡

关注 3 回答 2

小样886 赞了文章 · 2018-08-29

React从入门到精通系列之(19)彻底理解React如何重新处理DOM(Diffing算法)

十九、彻底理解React如何重新处理DOM(Diffing算法)

React提供了一个声明式的API,所以你不必担心每次DOM更新时内部会修改哪些东西。虽然在React中并不是那么明显地告诉你具体如何实现的,不过这也让编写应用变得更加容易。

本文会详细解释在React中的“diffing”算法是怎么做的,以便组件更新是可预测的,从而让高性能应用变得足够快。

动机

当使用React时,在单个时间点,您可以将render()函数看做是在创建React元素树。 在下一个stateprops更新时render()函数将返回一个不同的React元素树。 React需要弄清楚如何高效地更新UI去匹配上最新的元素树。

对于将一个树变换成另一个树的最小操作数的算法问题,现在已经存在一些比较通用的解决方案。 然而,那些现有的最先进的技术算法都有O(n^3)的复杂度(n是树中的元素的数量)。

如果在React中使用这些算法,显示1000个元素将需要大约十亿次比较。 这个真的代价太昂贵了。 相反,React实现了一个基于两个假设直观推断出的O(n)算法:

  1. 不同类型的两个元素将产生不同的树。

  2. 开发人员可以在不同渲染之间使用key属性来表示哪些子元素是稳定的。

实际上,这两条假设对几乎所有的实际使用都是有效的。

Diffing算法

当比较两棵DOM树的差异时,React首先比较两个根元素。 如果根元素的类型不同,那么行为也是不同的。

不同类型的DOM元素

每当根元素是不同的类型时,React将删除旧的DOM树并从头开始重新构建新的DOM树。 从<a><img>、从<Article><Comment>、从<Button><div> ,只要不一样就会完全重新构建。

当删除就的DOM树时,旧的DOM节点也被删掉。 这个时候组件实例触发componentWillUnmount()函数 。当构建一个新的DOM树时,新的DOM节点会被插入到DOM中。 组件实例触发componentWillMoun()componentDidMount()。 与之前旧的DOM树相关联的任何state也都将丢失。

在根元素之下的任何组件将被卸载并且它们的state也会全部丢失。 例如:

// 从
<div>
    <Counter />
</div>
// 变为
<span>
    <Counter />
</span>

因为根元素从div变为了span,所以旧的Counter组件将被销毁,然后再重新构建一个新的。

相同类型的DOM元素

当比较相同类型的两个React DOM元素时,React会先查看两者的属性差异,然后保留相同的底层DOM节点,仅仅去更新那些被更改的属性。 例如:

<div className="before" title="hello" />

<div className="after" title="hello" />

通过比较这两个元素属性,React就会知道只需要修改底层DOM节点上的className即可。

当更新style属性时,React也会知道只需要更新style中的那些已更改的属性。 例如:

<div style={{color: 'red', width: '300px'}} />

<div style={{color: 'red', width: '400px'}} />

当在这两个元素之间转换时,React知道只需修改width,而不是color

处理根DOM节点后,React会根据上面的判断逻辑对子节点进行递归扫描。

相同类型的组件元素

当组件更新时,实例保持不变,因此在不同的渲染之间组件内的state是保持不变的。 React会更新底层组件实例的props来匹配新元素,并在底层实例上调用componentWillReceiveProps()componentWillUpdate()

接下来,调用render()方法,diff算法就会对上一个结果和新结果进行递归比较。

递归子元素

默认情况下,当对DOM节点的子元素进行递归时,React只是同时迭代两个子元素lists,并在有差异时产生变化。

例如,当在子元素的末尾再添加一个元素时,这两个树之间就会有一个的很好转换效果:

<ul>
    <l1>one</li>
    <li>two</li>
</ul>

<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
</ul>

React将匹配两个<li>one</li>树,匹配两个<li>two</li>树,然后插入一个<li>three</li>树。

但是,不要太天真了。如果在子元素的开头部分插入一个元素的话,性能会便的很差。 例如,这两棵树之间的转换效果就很差:

<ul>
    <li>one</li>
    <li>two</li>
<ul>

<ul>
    <li>zero</li>
    <li>one</li>
    <li>two</li>
<ul>

这种情况React将更改每个子元素 ,而不会意识到它可以保持<li>one</li><li>two</li>子元素树完好无损。 这种低效率的情况是一个必须注意的问题。

keys

为了解决上面的问题,React提供了一个key属性。 当子元素有key属性时,React使用key将原始树中的子元素与后续树中的子元素进行匹配。 例如,上面的那个低效例子添加一个key就可以让子元素树转换变的很有效:

<ul>
    <li key="1">one</li>
    <li key="2">two</li>
<ul>

<ul>
    <li key="0">zero</li>
    <li key="1">one</li>
    <li key="2">two</li>
<ul>

现在React就可以知道key="0"的元素是新的,并且key="1"key="2"的元素只需移动即可。

在实践中,使用一个唯一的key并不难。 您要显示的元素可能已具有唯一的ID,因此key可以来自你自己的数据中:

<li key={item.id>{item.name}</li>

如果不是这样,你可以向数据模型中给每一项数据添加一个新的ID属性,或者对内容的某些部分进行哈希生成keykey属性只有在其兄弟元素之间是唯一的,并不是全局唯一的。

最后一种方式是可以将数组中的索引作为key。 如果数组中的每一项不需要重新排序,同样也可以很好地工作,但是万一需要重新排序的话,这会变的很慢。

权衡利弊

要记住重要的是,diffing算法是一个具体的实现细节。 React可以在每个操作上去重新渲染应用; 最终结果都是一样的。

在当前的实现中,你可以看到一个事实是一个子树已经成功移动到它的兄弟元素当中,但你不能告诉它已经移动到别的地方。 该算法将重新渲染这个完整的子元素树。

因为React很依赖这个直观推断的算法来判断DOM是否需要重新处理,如果不能满足这个算法的那两个假设条件前提,应用的性能将会受到很大影响。

  1. 该算法不会去尝试匹配那些不同组件类型的子元素树。 如果你看到自己在返回相似输出结果的两个组件类型之间来来回回,你可能需要把它们改为相同的类型组件。

  2. key属性应该是稳定,可预测和唯一的。 不稳定的键(如使用Math.random()生的key)将导致许多组件实例和DOM节点进行不必要地重复创建,这可能导致子组件中的性能降低和state丢失。

查看原文

赞 8 收藏 30 评论 1

小样886 提出了问题 · 2018-08-22

return问题

问题描述

发现一个很奇怪的问题,关于轮询请求无法被调用

问题出现的环境背景及自己尝试过哪些方法

我在轮询调用一个方法时,发现代码无法跑到方法体內(upInitialize为轮询调用的方法),我在方法内第一行console都无法输出,当我去掉respondsJudge时候方法的调用(if(res))后一切又正常了

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)
//调用轮询方法

   componentDidMount() {
        this.initialize();
        loopReq('abcd',this.upInitialize);
    }
    //被调用的方法
     upInitialize =() =>{
        energyStorageInformation_img()
            .then(res => {
                if (respondsJudge(res)) {
                    this.setState({ energyStorageInformation_img: res.data.storageInfo })
                }
            });       
            }
     //respondsJudge方法
     export function respondsJudge(res){
  return res
}
//轮询方法
export function loopReq(timerName,reqFn){
    window.myTimer = window.myTimer? window.myTimer:{};
    window.myTimer[timerName]=window.setInterval(()=>{
        reqFn();
    },Config.dataTimer);

你期待的结果是什么?实际看到的错误信息又是什么?

希望能知道原因

关注 2 回答 1

小样886 赞了回答 · 2018-08-21

解决火狐浏览器的a标签无法实现下载

$a.click() 改成 $a.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));

    var mycanvas = $("#export11").find("canvas")[0];
    var image = mycanvas.toDataURL("image/jpeg");

    var $a = document.createElement('a');
    $a.setAttribute("href", image);
    $a.setAttribute("download",  "多能点号图");
    $a.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));

亲证可用

关注 5 回答 4

小样886 赞了回答 · 2018-08-21

解决火狐浏览器的a标签无法实现下载

模拟点击出现的问题,在火狐中直接$a.click()是没有效果的,有两种方式可以实现。
方法一:

var image = mycanvas.toDataURL("image/jpeg");
var $a = document.createElement('a');
$a.setAttribute("href", image);
$a.setAttribute("download", this.state.nowDate + "多能点号图.jpg");//需要加上后缀名
document.body.appendChild($a);
$a.click();
document.body.removeChild($a);

方法二:

var image = mycanvas.toDataURL("image/jpeg");
var $a = document.createElement('a');
$a.setAttribute("href", image);
$a.setAttribute("download", this.state.nowDate + "多能点号图.jpg");//需要加上后缀名
const evt = document.createEvent('Event');
evt.initEvent("click", true, true);
$a.dispatchEvent(evt);

关注 5 回答 4

小样886 提出了问题 · 2018-08-20

解决火狐浏览器的a标签无法实现下载

问题描述

想通过a标签实现canvas的下载,相同的代码在谷歌浏览器下可行,在火狐下却无法实现

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)
var mycanvas = $("#export11").find("canvas")[0];

  var image = mycanvas.toDataURL("image/jpeg");
  var $a = document.createElement('a');
  $a.setAttribute("href", image);
  $a.setAttribute("download", this.state.nowDate + "多能点号图");
  $a.click();

关注 5 回答 4

小样886 赞了问题 · 2018-08-01

解决组件之间通信的问题

问题描述

左右两个模块分别由很多个子组件构成,当左侧点击某个子组件,右侧的板块显示不同的内容(该内容由很多子组件构成)
【问】:当右侧的各个子组件中的值发生变化时,如何将这些变化的值显示在左侧对应的子组件中?

相关代码

clipboard.png

你期待的结果是什么?实际看到的错误信息又是什么?

右侧的子组件是公共的,点击左侧其他的组件,右侧部分可能会引用到部分公共的组件,那当右侧的子组件中的值发生改变的时候,如何将这些值显示在左侧某个子组件中?

我想到需要将值存储在state中,但是这个逻辑一直想不通,React,个人还是小白,请各位大神指点下,给点思路就可以了,先谢过~

关注 4 回答 3

小样886 赞了回答 · 2018-07-23

解决关于echart多条y轴自适应问题

这样的图显示出来也不好看啊,我提供一个思路你看看行不行?
因为你要显示多个Y轴,意味着你有多种数据模型,可能他们的X轴是对应的,Y值不同,所以你可以把Y值按一定方法映射到一个Y值上,然后特殊化处理Y轴标识,不同的数据线用不同的颜色加以区分。

此外 官方提供了 自定义系列来扩展,你可以参考一下:
http://echarts.baidu.com/option.html#series-custom

关注 2 回答 1

小样886 提出了问题 · 2018-07-16

解决关于echart多条y轴自适应问题

问题描述

现在有个新需求,需要在echart中显示多个y轴,但是当y轴超过两个的时候被遮挡,如何让图标区域显示缩小,y轴可以完全显示

clipboard.png图片中值显示了4条(左右两个有两个只能看到一半,其实我是选择了6条的)有没有办法在让图片自适应,就是在y轴增加时减少中间显示内容的面积,原先网上的echart重新渲染在这个问题中无法使用

关注 2 回答 1

认证与成就

  • 获得 2 次点赞
  • 获得 10 枚徽章 获得 0 枚金徽章, 获得 0 枚银徽章, 获得 10 枚铜徽章

擅长技能
编辑

(゚∀゚ )
暂时没有

开源项目 & 著作
编辑

(゚∀゚ )
暂时没有

注册于 2017-09-13
个人主页被 409 人浏览