CSS3 box-shadow

box-shadow 属性记录(IE9+)

box-shadow: x y blur spread color inset;

x:表示水平(即X轴)阴影的位置。正值使阴影出现在元素的右边,负值出现在元素的左边

y:表示垂直(即Y轴)阴影的位置。正值使阴影出现在元素的下边,负值出现在元素的上边

blur:模糊距离,通过将x,y设置为0,调大模糊距离可以实现四周阴影效果

spread:元素到阴影的距离,正值会让阴影向各个方向按照指定的数值延伸。负值会让阴影收缩得比元素本身尺寸更小,通过将x,y设置为0,调大距离可以实现四周阴影效果

color:颜色

inset:【inset/outset】内外阴影选择

IE浏览器兼容性标记

X-UA-Compatible 从IE8开始支持

content=”IE=8″ 代表当前IE浏览器以IE8的文档模式渲染;

content=”IE=EmulateIE8″ 如果网页开头带有 <!DOCTYPE> 标记,则模拟 IE8,否则则模拟IE5;

content=”IE=edge” 代表总是使用当前IE浏览器的最新版本;

content=”IE=edge,chrome=1″ 代表如果安装了 Google Chrome Frame (谷歌浏览器內嵌框架)则使用谷歌浏览器内核模式,否则使用最新的IE模式

 

typeof

用typeof可以检测出变量的基本数据类型[Number、String、Null、Undefined、Symbol、Boolean],但是null的typeof返回是object

os.EOL 和path.sep

os.EOL是node在系统中换行的常量

  • \n 在 POSIX 系统上
  • \r\n 在 Windows系统上

参考地址:http://nodejs.cn/api/os.html#os_os_eol

path.sep是node在系统中的路径片段分隔符

  • Windows 上是 \
  • POSIX 上是 /

参考地址:http://nodejs.cn/api/path.html

React Portals

render() {
  return ReactDOM.createPortal(
    this.props.children,
    domNode, // 可以是任何的dom,而不是父组件的dom
  );
}

React Context(上下文)

如果组件多层嵌套,props就要进行层层手动传递,比较麻烦,为此可以使用Context;

最外层的父组件childContextTypes 和 getChildContext 来声明需要往下传递的context,其子组件只需要contextTypes 去访问他,必须要手动传递;

问题:如果某组件的shouldUpdate返回false那么context不会更新,因为context的更新是根据props和state的更新来决定getChildContext是否需要重新触发

参考文档:http://www.css88.com/react/docs/context.html

context不更新的解决办法:https://medium.com/@mweststrate/how-to-safely-use-react-context-b7e343eff076

react 组件的key属性

在循环显示组件的过程中,设置key时不要贪图方便使用随机数或者直接使用索引,否则会造成不必要的渲染,最好是每个组件的内容一致时key也一致。