Weismann

零散知识点二

零散知识点二

CSS兄弟元素选择器

ul > li + li

ul > li 代表ul元素下的直接li子元素

li + li 代表li元素后紧邻的li兄弟元素（同父级），注意是后，没有前

.demo ~ li 代表类名为demo元素后的所有li兄弟元素（同父级）

可以用来给列表加border

CSS圆心渐变

.demo { 
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(blue60%,red 60% 80%, green 80%);
}

参数说明：

conic-gradient(<第一个颜色>[ <结束位置>][,<第n个颜色>[ <开始位置> <结束位置>],…],<最后一个颜色> [<开始位置>])

如果增加开始位置或结束位置，则不产生渐变

用来画饼状图

优点是不需要考虑整体和是否为100%的问题，因为有些时候，百分比传过来的值往往和为100.1%这样？

CSS自定义属性（变量？）

语法：–<属性名>: <属性值>

应用于进度条

<div class=“demo" style="--percent:20;"></div>

.demo {
    height: 50px;
    border: 1px solid;
    background-image: linear-gradient(red, red);
    background-repeat: no-repeat;
    background-size: calc(var(--percent) * 1%);
}

通过dom.style.cssText来控制进度

CSS resize

还记得textarea吗，原来右下角那个小东西可以拖动，现在可以通过resize属性实现任意元素的大小拖动

.demo {
    height: 1px;
    border: 1px solid;
    overflow: hidden;
    resize: auto;
}

上述除了resize属性之外，其他三者都是必须的，其中height必须>0

深拷贝中如何判断字符串是不是json？

function isJson(str) {
    try {
        return JSON.parse(str);
    }catch(e){
        return str;
    }
}

React的setState

此api用于更新组件状态（废话

但是，React在这上面做了一些手脚，导致这个api是异步的，作为初学者的我在写业务的时候也遇到了。

一般人来讲，更新了状态后回紧接着打印出来查看结果，但是在React中不会立即更新状态，因为它是异步的。

Component.prototype.setState = function(partialState, callback) { //React 16.8.X
    ...
    this.updater.enqueueSetState(this, partialState, callback, 'setState');
};

通过源码中的函数名称enqueueSetState就可以看出来，setState只是将要更新的状态加入了一个队列当中，类似于event loop中的队列，都是pedding状态并未执行。

然后在真的需要更新的时候去合并队列中的state。

但是真实情况更加复杂，react16引入了fiber这一概念，类似于操作系统的时间分片，具体内容这里不展开。

最后如果真的想要看到更新后的结果，可以通过第二个参数callback中去打印。