今日ブログをめくっていると、render propsについて話しているブロガーがいるのに気づき、React mixinsと言いました.自分でReactを使う時間は特に長くないので、以前のReactバージョンの文法にはあまり詳しくなかったので補足します.ついでに小さなシリーズの文章を作ります.

古いReact mixins

HOC(上位コンポーネント)

render props

React Hooks

React mixinsとは?

mixins(ブレンド)とは、コンポーネントがオブジェクトのメソッドとステータスを継承するようにオブジェクトを定義するプロセスであり、このオブジェクトは混入(ブレンド)オブジェクトとも呼ばれる.コンポーネントと継承されたブレンドオブジェクトが同じライフフック関数を持ち、そのライフフック関数を実行すると、ブレンドオブジェクトの関数が優先され、コンポーネント内の同じ関数が実行されますが、ライフフック関数に限定されます.
また、例のhandlActionのように、コンポーネント内でブレンドオブジェクトと同じ名前のメソッド(非生命フック関数)は許可されません.そうしないと、エラーが発生します.

ReactClassInterface: You are attempting to define `handlAction` on your component more than once. This conflict may be due to a mixin.

//  
const mixinCommon = {
    componentWillMount: function() {
        console.log("mix componentWillMount!");    // 
    },
    handlAction:function(){
        console.log("mix action!");     // ， 
    }
}

var HelloWorld = React.createClass({
    mixins: [mixinCommon],
    componentWillMount: function() {
        console.log("HelloWorld componentWillMount!"); // 
    },
    componentDidMount: function() {
            this.handlAction();      // mixinCommon 
        },
        render: function() {
            return 
Hello World!
;
        }
});
ReactDOM.render(,document.getElementById("example"));

なお、ES 6自体には混入サポートは含まれていない.したがって、classキーワードを使用してコンポーネントを作成すると、混入機能は使用できません.Reactを使用する場合、ほとんどがclassキーを使用してコンポーネントを作成しており、createClassを使用してコンポーネントを作成することはめったにありません.だからこそ、mixinsはほとんど使われていません.

React mixinsはどんな問題を解決しているのか、それ自体にどんな問題があるのか。

上記の質問に答える前に、mixinsの典型を見てみましょう.

import React from 'react'
import ReactDOM from 'react-dom'

// mixin  。
//   mixin  ， 
const MouseMixin = {
  getInitialState() {
    return { x: 0, y: 0 }
  },

  handleMouseMove(event) {
    this.setState({
      x: event.clientX,
      y: event.clientY
    })
  }
}

const App = React.createClass({
  mixins: [ MouseMixin ],
  
  render() {
    const { x, y } = this.state

    return (
      

        
The mouse position is ({x}, {y})
      
    )
  }
})

ReactDOM.render(, document.getElementById('app'));

簡単です.マウスのX座標とY座標を使用する必要がある場所がいくつかある場合は、MouseMixinを簡単にコンポーネントに混入し、thisを通過する必要があります.stateプロパティは、マウスのx座標とy座標を取得します.したがってmixinはコード多重化の問題を解決するためであることは明らかである.
しかし、この解決策は完璧ではありません.具体的な原因は以下のようにまとめられています.

ES 6 classはmixinsをサポートしていません.

は直接的ではありません.minxinsはstateを変更したので、特にmixinsが1つだけ存在しない場合、stateがどこから来たのか分かりにくい.

名前が競合しています.同じstateを更新する2つのmixinsが互いに上書きされる可能性があります.createClass APIは、2つのmixinsのgetInitialStateが同じkeyを持っているかどうかをチェックし、持っている場合は警告しますが、この手段は信頼できません.

そのため、上記の問題を解決するために、Reactコミュニティでは高次コンポーネントHOCを大量に使用する人がいます.次の記事を参照:React HOC(上位コンポーネント).