react 组件逻辑复用

组件逻辑复用

React为什么设计成组件化的形式？其实最大的原因就是为了方便复用。
然而组件的复用虽然方便，逻辑的复用却很麻烦，因为state的存在，逻辑被锁死在组件内部，很难分离出去。

下面以一个可以改变背景色的步进器为例，展示react中常见的三种逻辑复用模式

高阶组件（HOC)实现逻辑复用

import React from "react";

const Count = ({ count, add, minus, theme, changeTheme }) => {
  return (
    <div
      style={
  {
        backgroundColor: theme,
        flex: 1,
        alignItems: "center",
        justifyContent: "center",
      }}
    >
      <h1>You clicked *{count}* times</h1>
      <h1 onClick={add}>add 1</h1>
      <h1 onClick={minus}>minus 1</h1>
      <h1 onClick={changeTheme}>change background</h1>
    </div>
  );
};

export default Count;

------------------------------------------------------

import React from "react";
import getRandomColor from "../utils/ColorHelper";

const changeTheme = (initColor) => (WrappedComponent) =>
  class ChangeTheme extends React.Component {
    state = {
      theme: initColor,
    };
    changeTheme = () => this.setState({ theme: getRandomColor() });
    render() {
      return (
        <WrappedComponent
          {...this.props}
          theme={this.state.theme}
          changeTheme={this.changeTheme.bind(this)}
        />
      );
    }
  };

export default changeTheme;

------------------------------------------------------

import React from "react";

const countNumber = (initNumber) => (WrappedComponent) =>
  class CountNumber exten