FBI WARNING: this may be an anti-pattern in regard to react's stateless design.

As is known to all, there're a lot of web components that can be mutated by user interactions, such as <input>, <select>, or the rich editor I am using now. These components are inconspicuous in daily development - we can easily modify the value by typing something in it or set the value property. However, as React comes with one-way data binding, these components seem to be out of control:

  1. A <Input> that maintains its own state of value can't be mutated from outside;
  2. A <Input> of which value is set via props can't update without outside control.

Finally, React put forward the concept of Controlled Components and Uncontrolled Components.

Hey Bob! Your css rules break my components!

For many years, we are facing the lack of local scope in CSS, conflict happens everyday and we have to give every component a specific name like this-is-my-component.


css-modules is a great workaround to this problem. By sharing transformed class names between JavaScript and CSS files, we no longer worry about the global css - all class names are scoped locally!

css-modules output

The Problem

However, happiness comes with tears. As scoped css rules are tightly bound with js files, when you are trying to write a reusable component, you're possibly getting a headache: how can other developers override the default styles in my components?

We have no idea about the generated class names from outside, one thing we can do is to add some attributes onto elements so that developers can use attribute selector [attr]:

attr selector in react-toolbox

Hmm...I'd rather writing class names for every component.

Another solution is to expose an API that extends class names inside you components:

classname api

Does it mean that I may have to pass several class names in order to customize a complex component?

So, what if we could also import class name maps into sass/less/stylus ?

关于 __proto__ 属性,MDN 上的解释是这样的[1]

The __proto__ property of Object.prototype is an accessor property (a getter function and a setter function) that exposes the internal [[Prototype]] (either an object or null) of the object through which it is accessed.

即是说,__proto__ 属性指向了实例对象的原型 Constructor.prototype。那么,这个属性里隐藏着怎样的黑魔法呢?




观察上面的数字,我们可以得出千分位的特征是到字符串终止位有 3n 个数字,不包括起始位。于是可以得到这样的函数:

let milliFormat = (num) => {  
    return num && num.toString().replace(/(?=(?!^)(\d{3})+$)/g, ',')







let makeAjaxCall = (url, cb) => {  
    // do some ajax
    // callback with result

makeAjaxCall('http://url1', (result) => {  
    result = JSON.parse(result)


makeAjaxCall('http://url1', (result) => {  
    result = JSON.parse(result)

    makeAjaxCall(`http://url2?q=${result.query}`, (result) => {
        result = JSON.parse(result)

        makeAjaxCall(`http://url3?q=${result.query}`, (result) => {
            // ...

天哪!快让那堆 }) 见鬼去吧!

于是,我们想尝试借助 JavaScript 事件模型: