代码CR（render props）

最近 CR 同学代码，发现一些看上去不太友好，但又没什么大毛病的 case！

简单来说就是项目里面用到了大量 antd 的 Modal 组件，搜索工具查找了一下 240 / 3 = 80 ！大部分 Modal 都维护了自身的状态。

看一个 antd 最简单的 Modal 示例：

import { Button, Modal } from 'antd';
import React, { useState } from 'react';

const App: React.FC = () => {
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = () => {
    setIsModalOpen(true);
  };
  const closeModal = () => {
    setIsModalOpen(false);
  };

  return (
    <>
      <Button type="primary" onClick={showModal}>
        Open Modal
      </Button>
      <Modal
        title="Basic Modal"
        open={isModalOpen}
        onCancel={closeModal}
      >
        <p>Some contents...</p>
      </Modal>
    </>
  );
};

export default App;

这个示例足够精简了吧，试想，如果每个组件都维护对应 state，是多么令人头疼的事。

如果我们使用 render props 抽象出 Modal 的状态，实现起来更简洁优雅，而且可复用。

抽一个 RenderModal 的方法，将 state 维护起来：

const RenderModal = ({ children }) => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const showModal = () => {
    setIsModalOpen(true);
  };

  const closeModal = () => {
    setIsModalOpen(false);
  };

  return children({
    isModalOpen,
    showModal,
    closeModal,
  });
};

使用：

const App = () => {
  return (
      <RenderModal>
        {(model) => (
          <React.Fragment>
            <Button type="primary" onClick={model.showModal}>
              Open Modal
            </Button>
            <Modal
              title="Basic Modal"
              open={model.isModalOpen}
              onCancel={model.closeModal}
            >
              <p>Some contents...</p>
            </Modal>
          </React.Fragment>
        )}
      </RenderModal>
  );
};

export default App;

如此，RenderModal 可以复用到其它组件，是不是看上简洁了很多？

如果你只单看这个示例，你甚至可能觉得简单问题复杂化了，但随着项目里面的 Modal 逐渐增多，你会发现不但简洁，而且爽！