Open5
React の コンポジション vs 継承 ってPropsにもあるよねという話
![kondei](https://res.cloudinary.com/zenn/image/fetch/s--2YemqGDu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/d89c597b18.jpeg)
で継承よりコンポジションが推奨として書かれている
![kondei](https://res.cloudinary.com/zenn/image/fetch/s--2YemqGDu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/d89c597b18.jpeg)
例えば Library
というコンポーネントを使ったりラップする Wrapper
というコンポーネントを作るとき、LibraryのPropsを
type LibraryProps = {
x: string;
};
としたとき、WrapperのPropsの型を
type Props = {
a: string;
} & LibraryProps;
や
interface Props extends LibraryProps {
a: string;
}
のように継承でPropsを作ってWrapper用のPropsとLibraryのPropsを同階層に混ぜてしまい、
const Wrapper: FC<Props> = (props) => <div><Library x={props.x}/></div>;
のように構成するのは拡張性が悪いと思う
![kondei](https://res.cloudinary.com/zenn/image/fetch/s--2YemqGDu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/d89c597b18.jpeg)
より良い形はPropsもコンポジションにした
type Props = {
a: string;
libraryProps: LibraryProps;
}
const Wrapper: FC<Props> = (props) => <div><Library {...props.libraryProps}/></div>;
だと思う
![kondei](https://res.cloudinary.com/zenn/image/fetch/s--2YemqGDu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/d89c597b18.jpeg)
この方式のデメリットはObject Propsが毎回新しいのでrendering対象になり、更にデフォルトのshallowな比較関数によるmemo化ができないことで、ちゃんとdeepEqualしないと
のようにrenderingが増えること
将来的には
のようにimmutable構造が追加されたり、
のようにReact memoを自前で管理する必要がなくなれば楽に解決するかもしれない
![kondei](https://res.cloudinary.com/zenn/image/fetch/s--2YemqGDu--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_70/https://storage.googleapis.com/zenn-user-upload/avatar/d89c597b18.jpeg)
MUIのdate-pickerのカスタマイズに関してはフラットなPropsで拡張しないといけなくなっていたりして、そういう場合もあるので、どちらが良いかは一概に言えないかもしれない