React0.13.0-beta.1でのComponentのES6 classでの継承とmixinが使えない理由

mixinが使えない理由

(訳)

残念ながらReactではES6 class向けにmixinをサポートするつもりはありません。これはJavaScriptの文法的なコンセプトの目的を台無しにしたくないからです。

(訳注: JavaScriptでは)普遍的なmixinの実現方法がありません。実際、いくつかのmixinをサポートする方法が、今のES6の仕様からはドロップしています。いろんなライブラリが様々なセマンティクスを持っています。私達はES6のクラスにmixinを実装するためにはあなたができることは一つだけであるべきだと考えています。Reactは、(訳注: 他のライブラリと違って)なにもしないことを決めました。

React v0.13.0 Beta 1 | React http://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html

JSXみたいな独自文法を作っといて今さら何をという気もするが、コレに関しては正しい姿勢な気はする。

継承を使う

mixin的な実装をするためにはどうしたらよいか？ たぶんオブジェクト指向的に継承で解決するのを意図していると思う。

coffeeのclass記法はes6と互換なんで(というか仕様の策定時期的にこちらがインスパイア元だと思うが)、coffeeでやった

React = require 'react'

class ComponentBase extends React.Component
  componentWillMount: ->
    console.log 'bbb'

class A extends ComponentBase
  componentWillMount: ->
    super
    console.log 'aaa'

  render: ->
    React.createElement 'div', {}, 'hello'

console.log React.renderToString React.createFactory(A)({})

$ coffee scratch.coffee 
bbb
aaa
<div data-reactid=".cf68u4imtc" data-react-checksum="1161957053">hello</div>