Question

在React中有三种方式可以使用通知/吐司等组件：

在React docs中，有modal example与此类通知相似：

class Modal extends React.Component {
    ...
}

class App extends React.Component {
    ...
    render() {
        return (
            <div>
                {this.state.isOpen ? <Modal>...</Modal> : null}
            </div>
        )
    }
}

在Material-UI中，像这样：

import React from 'react';
import Snackbar from 'material-ui/Snackbar';
import RaisedButton from 'material-ui/RaisedButton';

export default class SnackbarExampleSimple extends React.Component {
  ...
  handleRequestClose = () => {
    this.setState({
      open: false,
    });
  };

  render() {
    return (
      <div>
        <Snackbar
          open={this.state.open}
          message="Event added to your calendar"
          autoHideDuration={4000}
          onRequestClose={this.handleRequestClose}
        />
      </div>
    );
  }
}

在Ant Design中：

import { message, Button } from 'antd';

const info = () => {
  message.info('This is a normal message');
};

ReactDOM.render(
  <Button type="primary" onClick={info}>Display normal message</Button>
, mountNode);

显然，第三种方式是用户使用的最简单方法，那么为什么React docs和Material-UI会实现这种类型的组件呢？是否更容易实施，或者更多更多＆＃34; React＆＃34;办法？还是其他原因？

Answer 1

你的问题是主观的，你的3个例子也有点不同。根据我的经验（在React和Material-UI中开发大约1年），您从您的香草React和Material-UI示例中获得的最大收益是可重用性和可组合性。

在第一个示例中，您可以获取您定义的Modal类，如果它已导出，您可以在应用程序的任何位置重复使用它，并将其传递给不同的动态道具以更改其内容或外观。

在使用Material UI的第二个示例中，除了为您提供组件和一组预定义属性之外，它是相同的。

我没有亲自使用过Ant Design，但看起来你给出的例子没有做任何不同的事情，只是在你的React应用程序的最顶层位置显示/解释它的渲染。您的其他两个示例（Modal组件和Snackbar组件）也可以在ReactDOM.render()级别上呈现，只是那些文档选择放置它们在理论应用中处于更加现实的位置。

希望这有帮助！

设计一些特定反应组件的最佳实践，例如通知

1 个答案: