React 14升级至React 16：自定义Mixins迁移方法问询

针对你从React 14升级到16时遇到的自定义Mixins迁移问题，我整理了三种业界最常用的替代方案，结合典型代码场景逐一拆解说明：

方案一：高阶组件（HOC）—— 适配类组件的经典复用方案 #

高阶组件本质是一个接收组件、返回增强后组件的函数，完美替代Mixin实现生命周期、方法的复用。假设你的自定义Mixin是这样的：

// 原自定义Mixin示例
const LoggingMixin = {
  componentDidMount() {
    console.log(`${this.displayName || this.constructor.name} 已挂载`);
  },
  logAction(action) {
    console.log(`执行操作：${action}`);
  }
};

const CounterMixin = {
  getInitialState() {
    return { count: 0 };
  },
  increment() {
    this.setState(prev => ({ count: prev.count + 1 }));
  }
};

步骤1：将Mixin转换为HOC #

// 封装日志逻辑的HOC
const withLogging = (WrappedComponent) => {
  return class extends React.Component {
    componentDidMount() {
      console.log(`${WrappedComponent.displayName || WrappedComponent.name} 已挂载`);
    }

    logAction = (action) => {
      console.log(`执行操作：${action}`);
    }

    render() {
      // 将HOC的方法和props传递给原组件
      return <WrappedComponent {...this.props} logAction={this.logAction} />;
    }
  };
};

// 封装计数器状态逻辑的HOC
const withCounter = (WrappedComponent) => {
  return class extends React.Component {
    state = { count: 0 };

    increment = () => {
      this.setState(prev => ({ count: prev.count + 1 }));
    }

    render() {
      return <WrappedComponent {...this.props} count={this.state.count} increment={this.increment} />;
    }
  };
};

步骤2：用HOC增强你的React 16类组件 #

class MyComponent extends React.Component {
  render() {
    const { count, increment, logAction } = this.props;
    return (
      <div>
        <p>计数：{count}</p>
        <button onClick={increment}>增加</button>
        <button onClick={() => logAction('点击了日志按钮')}>记录操作</button>
      </div>
    );
  }
}

// 组合多个HOC，按需求调整顺序
export default withLogging(withCounter(MyComponent));

方案二：Render Props组件—— 灵活的逻辑复用方式 #

Render Props通过传递渲染函数的方式复用逻辑，适合需要动态控制逻辑触发时机的场景：

步骤1：封装Mixin逻辑为Render Props组件 #

// 日志逻辑组件
class LoggingProvider extends React.Component {
  componentDidMount() {
    console.log('组件已挂载');
  }

  logAction = (action) => {
    console.log(`执行操作：${action}`);
  }

  render() {
    // 将方法通过渲染函数传递给子组件
    return this.props.children({ logAction: this.logAction });
  }
}

// 计数器状态组件
class CounterProvider extends React.Component {
  state = { count: 0 };

  increment = () => {
    this.setState(prev => ({ count: prev.count + 1 }));
  }

  render() {
    return this.props.children({ count: this.state.count, increment: this.increment });
  }
}

步骤2：在你的组件中嵌套使用 #

class MyComponent extends React.Component {
  render() {
    return (
      <LoggingProvider>
        {({ logAction }) => (
          <CounterProvider>
            {({ count, increment }) => (
              <div>
                <p>计数：{count}</p>
                <button onClick={increment}>增加</button>
                <button onClick={() => logAction('点击了日志按钮')}>记录操作</button>
              </div>
            )}
          </CounterProvider>
        )}
      </LoggingProvider>
    );
  }
}

方案三：自定义Hooks（React 16.8+）—— 最简洁的现代化方案 #

如果你的React 16版本是16.8及以上（支持Hooks），自定义Hooks是最优解，无需额外组件嵌套，直接复用状态和逻辑：

步骤1：将Mixin转换为自定义Hooks #

// 日志Hook
const useLogging = (componentName) => {
  React.useEffect(() => {
    console.log(`${componentName} 已挂载`);
  }, []); // 仅在组件挂载时执行

  const logAction = (action) => {
    console.log(`执行操作：${action}`);
  };

  return { logAction };
};

// 计数器Hook
const useCounter = () => {
  const [count, setCount] = React.useState(0);

  const increment = () => {
    setCount(prev => prev + 1);
  };

  return { count, increment };
};

步骤2：在函数组件中使用Hooks #

// 建议转换为函数组件（Hooks仅支持函数组件）
const MyComponent = () => {
  const { logAction } = useLogging('MyComponent');
  const { count, increment } = useCounter();

  return (
    <div>
      <p>计数：{count}</p>
      <button onClick={increment}>增加</button>
      <button onClick={() => logAction('点击了日志按钮')}>记录操作</button>
    </div>
  );
};

迁移注意事项 #

• 冲突处理：多个Mixin有同名方法时，迁移需手动合并逻辑（HOC/Render Props需显式处理，Hooks可通过重命名避免）
• 生命周期适配：React 16弃用了componentWillMount等旧生命周期，迁移时对应替换为useEffect（Hooks）或新生命周期方法（类组件）
• 组件选型：若计划逐步转向函数组件，优先选择自定义Hooks；若暂时保留类组件，优先用HOC或Render Props

内容的提问来源于stack exchange，提问作者Leandro Lima