react 有状态组件最佳实践？

Question

<Father>
   <Modal {...modalProps}></Modal>
</Father>

• 页面如上，由普通页面+弹窗组件构成；

• modal组件是个复杂的组件：

  1. 内部状态既受Father影响，又可以在Modal自身改变；
  2. Modal还需要post,get操作；
  3. Modal需要用在多个不同的Father里面；

如何设计比较优雅，既能满足子组件modal的通用性，又不需要在各个父组件中复制粘贴一大堆预处理逻辑

Answer 1

查了下资料以及antd的示例，最后方案如下：

// 父组件
import OverlieChart from './component/overlie-chart'

        <Modal
          width="860px"
          visible={overlieVisible}
          title="test"
          maskClosable={false}
          onCancel={this.cancelOverlie}
          footer={[
            <Button key="back" type="" onClick={this.cancelOverlie}>
              关闭
            </Button>,
          ]}
        >
          <OverlieChart
            loading={loading}
            dispatch={dispatch}
            casChartData={casChartData}
            {...overlieChartProps}
          />
        </Modal>

// 子组件
  componentDidMount() {
    this.fetchData()
  }

  componentDidUpdate(prevProps) {
    // 切换化合物时更新数据
    if (prevProps.id !== this.props.id) {
      this.fetchData()
    }
  }

关键点在于：

1. modal开关的逻辑就放在父组件中；
2. 将复杂业务封装成子组件，和普通页面一样，使用上面两个生命周期，
3. 利用好destroyOnClose，避免重复点击请求数据。

Answer 2

如果逻辑过于复杂，就不建议把所有逻辑都放在一个组件里。过度复用，会使代码丧失扩展性和可维护性，一旦业务发生变更，将是极其头痛的问题。建议你根据不同业务，多写几个modal，尽量让每个modal只做一件事，这才是组件化的最终目的。不能为了复用而复用，相较复用而言，代码的可维护性和扩展性优先级应该更高。

Answer 3

参照上图写法，其目的减少Modal逻辑，在页面中处理相关逻辑