最佳實踐設計一些特定反應的組分，通知等

有三口人的方式來使用像通知/吐司成分發生化學反應：最佳實踐設計一些特定反應的組分，通知等

在React docs，有modal example這與這樣的通知類似：

class Modal extends React.Component { 
    ... 
} 

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

材料的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> 
    ); 
    } 
}

而在螞蟻設計：

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文檔和Material-UI實現這種類型的組件？是更容易實施還是更「反應」的方式？還是其他原因？

來源

2017-10-12 Zhuo

你的問題是一個主觀的問題，你的3個例子都有點不同。根據我的經驗（在React和Material-UI中開發約1年），您從vanilla React和Material-UI示例中獲得的最大收益是可重用性和可組合性。

在第一個示例中，您可以採用您定義的Modal類，如果將其導出，則可以在應用程序中的任意位置重複使用該類，並將其傳遞給不同的動態道具以更改其內容或外觀。

在材質用戶界面的第二個示例中，除了提供組件和一組預定義屬性以對其執行操作外，它與上述示例相同。

我還沒有親自使用Ant Design，但它看起來像你給的例子沒有做任何不同的事情，而只是在你的React應用程序的最頂部位置顯示/解釋它的渲染。您的其他兩個示例（Modal組件和Snackbar組件）也可以在ReactDOM.render()級別上呈現，只是這些文檔選擇將它們置於理論應用中更深入的現實位置。

希望這會有所幫助！

來源

2017-10-12 13:39:16 melmquist

最佳實踐設計一些特定反應的組分，通知等

回答

相關問題