Curring and React
Curringはカリー化といい、複数の引数を取る関数内においてその引数を分解する機能です。
下記は一般的なJavascriptのコードです。
const sum = (a, b) => a + b;
sum(1, 2); // 3
上記をCurryingで書き直すと、以下のように記述することもできます。
// 以下と同じ
// const sum = function(a) { return function(b) { return a + b }}
const sum = a => b => a + b;
sum(1)(2); // 3
分割した引数を戻り値で使い結果を返すわけです。
Reactのケース
以下のような高階コンポーネントを利用したコードがあるとします。
import React from "react";
import ReactDOM from "react-dom";
// HOC
const Hoc = WrapComponent => (props) => <WrapComponent {...props} />;
// Base Component
const Component = props => <p>Hello, {props.name}</p>;
const MyApp = Hoc(Component);
const App = () => <MyApp name="maeda" />;
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
HOC内で受け取るデータは親から渡ってくるprops
のみですが、props
以外の任意の値をHOCに渡したいとします。上の例で言えば、Hoc(Component)("任意の値")
といった感じです。
これもCurryingで記述ができます。
import React from "react";
import ReactDOM from "react-dom";
const Hoc = WrapComponent => value => ({ name, ...others }) => {
const n = name + value;
return <WrapComponent name={n} {...others} />;
};
const Component = props => <p>Hello, {props.name}</p>;
const MyApp = Hoc(Component)("さん");
const App = () => <MyApp name="maeda" />;
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
当たり前の動作に見えて、根本にはCurringが使われています。