将州作为道具传递给孩子是好习惯吗？

我发现自己在一个组件上聚合了状态。通常情况下，我知道我将重新渲染节点，以便更改可以传播，并且状态不是全部。最近，我发现自己将道具的状态作为道具传递给第一个使用JSX spread attributes的孩子。只是要绝对明确的，这就是我的意思是：将州作为道具传递给孩子是好习惯吗？

var Child = React.createClass({ 
    handleClick: function(){ 
    this.props.owner.setState({ 
     count: this.props.count + 1, 
    }); 
    }, 
    render: function(){ 
    return <div onClick={this.handleClick}>{this.props.count}</div>; 
    } 
}); 

var Parent = React.createClass({ 
    getInitialState: function(){ 
    return { 
     count: 0, 
     owner: this 
    }; 
    }, 
    render: function(){ 
    return <Child {...this.state}/> 
    } 
});

和它的作品（http://jsbin.com/xugurugebu/edit?html,js,output），你可以随时返回到该组件明白怎么回事，并保持状态尽可能小。

所以真正的问题是，如果这是/不是一个好的做法，为什么。

我现在可以考虑的缺点是，使用这种方法可能每个子组件总是会在所有者发生状态更改时重新呈现，如果是这种情况，我认为以上是可以使用的东西小的组件树。

来源

2015-04-22 stringparser

当父母通过所有本地状态时，如同对传播属性所做的那样，这并不是很规范和容易遵循发送给孩子的内容。事实上，取决于组件的复杂性，可能难以推断发送的内容。我也很惊讶，孩子实际上需要父母的所有状态。 – WiredPrairie

是的，这取决于情况。要查看正在发送的内容，您只需查看父母即可。我喜欢这一点的原因，从国家的来源和来源可以清楚地看出。 – stringparser

如果家长是在本地定义的，那很简单。但随着项目范围的扩大，一个组件被多种父母使用，挑战可能会扩大。 – WiredPrairie

是的！

状态应该只设置在顶层元素上，这可以确保数据只能通过组件的一个方向流动。请注意，React将只渲染自上次渲染以来所做的更改，如果子元素的某些部分未被修改，则不会将其重新渲染到DOM。

React在他们的文档中有一个标题为lifting up state的部分。

来源

2015-04-22 11:48:39

对！我没有想到差异。所以你所说的是，diff算法会考虑重新渲染的意义，所以即使它传播了，它也只会确保重新渲染到那些实际上**有一些变化的DOM。我认为，如果这样坚持下去，我会测量一些东西，并通过这种方法进行处理。 – stringparser

@stringparser正确。 React使用虚拟DOM来区分任何变化。然后，这些更改，只有这些更改将呈现给真正的DOM。在jsperf上有许多React渲染测试，例如http://jsperf.com/react-vs-pure-js/9 –

谢谢，伙计。它让事情变得清晰。 – stringparser

将州作为道具传递给孩子是好习惯吗？

回答

相关问题