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智能和哑元组件

回答

相关问题