React 组件生命周期函数里 setState 调用分析

注:本文是阅读《深入React技术栈》的一些心得,一部分内容和图片是直接摘抄自此书。 React 组件的生命周期函数是 react 的基础知识,如果有不熟悉的可以看官方文档。简单总结如下。 组件的生命周期函数分为两类:挂载或卸载过程 / 组件更新时。挂载或卸载过程涉及到三个函数:componentWillMount - 组件即将挂载、componentDidMount - 组件挂载完成、componentWillUnmount - 组件即将卸载。这些函数都只会在组件初始化或者卸载时运行一次。 组件更新时涉及到四个函数: »

CSS 实现元素较宽不能被完全展示时将其隐藏

遇到一个需求,需要实现的样式是固定宽度的容器里一排显示若干个标签,数量不定,每个标签的长度也不定。当到了某个标签不能被完全展示下时则不显示。大致效果如下,标签只显示一排,多了放不下了就不显示了。 标签部分 DOM 结构如下 <div class="labels"> <span class="label">Cooking</span> < »

[译] 理解 React-redux connect

Redux 是一个非常简单库,主要目的是进行状态管理,它使得 React 开发变得更加容易。然鹅很多人都只是简单的使用 Redux 官网提供的样板代码,把它和 React 应用结合起来,却并不理解这两者到底是如何结合并且运作的。 有一个库叫做 React-redux,它唯一的目的就是把 redux 的状态管理机制无缝衔接到 react 应用上。我认为当使用了一些构成了你应用核心的东西的时候,还是非常应该了解具体发生了什么的。 React 和 redux 本身 »

placehold.it - 图片占位符小工具推荐

在做页面的时候,经常需要临时找个图片顶上或者测试~ 随便找张图可能大小尺寸并不符合自己的要求,放在页面上也丑丑的。。 因此本周推荐一个非常好用的图片占位符小工具~ 一言不合先看图~ 上门三张图片用来占位的话,不仅标有尺寸很清晰,而且可以调整背景色和文字颜色。即使 Demo 页面一样也可以美美哒~ 四不四很神奇~ 我猜你一定已经打开调试器看图片 url 的,好啦其实只需要在 placehold.it 的 URL 后面加上图片尺寸和颜色的参数,就可以快速生成美观的占位图啦。 像这样: <img »

Webpack + gulp + babel-loader 配置踩坑

最近新启了一个项目,由于之前没有从零新建过项目,在项目的配置上花了很长时间。简单记录下配置中遇到的最大的坑:webpack + gulp + babel-loader 的问题。 先说一下配置的需求,整个项目工作流主要用 gulp 管理。引入 webpack 只用来打包压缩 js。 很早以前就听过 Webpack 2 有 Tree Shaking 的功能,配合 ES6 的 »