React智能和啞元組件

一直在研究React並希望知道分離智能組件和愚蠢組件的最佳實踐。下面的例子家長控制狀態，但我已經把按鈕ui渲染，如果這些進入孩子，並通過回調實現回父或是過度殺傷？ thoughts..here是我的代碼React智能和啞元組件

class Child extends React.Component { 
    constructor(props){ 
    super(props); 
    } 
    render() { 
    return (
    <div><p>I said {this.props.greeting} {this.props.count} times</p>  
    </div> 
    ); 
    } 
} 

class Parent extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     count: 0, 
     greeting: "Hello" 
    }; 
    } 

    sayHello() { 
    this.setState((prevState, props) => { 
    return { 
     count: prevState.count + 1, 
      greeting: "Hello" 
      } 
    }     
)}; 
    sayGoodBye() { 
    this.setState((prevState, props) => {  
    return {  
     count: this.count = 1, 
     greeting: "Goodbye" 
      } 
    }     
)}; 



    render() { 
    return (
     <div> 
     <button onClick={() => this.sayHello() }>Say Hello</button> 
     <button onClick={() => this.sayGoodBye() }>Say Goodbye</button> 
     <Child count={this.state.count} greeting={this.state.greeting} /> 
     </div> 
    ) 

    } 
} 

ReactDOM.render(<Parent />, document.getElementById('app'));

來源

2017-06-16 Michaelh

這可能更適合[Code Review]（https://codereview.stackexchange.com/）嗎？ –

更多最佳實踐問題比代碼審查，但我會把它放在那裏也有任何建議 – Michaelh

我認爲在這種情況下，分離效果好。按鈕直接與父母的狀態有關，因此只爲他們創建一個孩子將是一個矯枉過正的問題。一般來說，「轉儲」組件只是關於直觀顯示數據/狀態。有時它們包含按鈕等元素，但他們所做的唯一一件事是通知外部世界發生了一件事情。

而且兒童可能是一個無狀態的功能：

const Child = ({ greeting, count }) => (
    <div> 
    <p>I said { greeting } { count } times</p> 
    </div> 
);

你可以嘗試做一個組件只是一個功能。如果你不能那麼它可能不會像你想象的那樣傾倒:)

來源

2017-06-16 10:59:40 Krasimir

那麼我如何擁有它是或多或少正確的呢？ – Michaelh

我想這是正確的。子組件也可以是一個無狀態的函數。看看我上面的答案。 – Krasimir

React智能和啞元組件

回答

相關問題