2017-08-08 59 views
-2

在阅读this article并编写了几个React应用之后,我仍然不明白为什么“组件”被称为组件。即我知道这是“一段代码”,但对于我来说,来自C#和Python这个词的“封装”意味着很多。在阵营我看到创建,例如,成分“UsernamePasswordComponent”,看起来像:为什么React的组件是“组件”?

class UsernamePasswordComponent extends React.Component { 
    render() { 
    return(
     <div> 
     <input type="text" name="username" 
      value={this.props.username} onChange={this.props.handlerUsernameFromParentComponent} /> 
     <input type="password" name="password" 
      value={this.props.password} onChange=this.props.handlerUsernameFromParentComponent /> 
     <button onClick={this.props.handlerClickFromParentComponent}>Login</> 
     </div> 
    ); 
} 

我被迫存放在父母(通常是root)状态passwordusername,我必须写大量的垃圾在PARENT组件来处理孩子的变化事件。我不明白。

所以最后我有以下问题:

  1. 为什么阵营提供的双向绑定这么丑法?我喜欢LinkedStateMixin,但它被标记为“已弃用”。为什么???

  2. 为什么我必须将paswwordusername存储在父级状态中,而不是将其封装在子组件中,并提供一种从其获取数据的接口。或者这个组件可以用更多的反应方式重写并封装所有东西?

+2

1)在React世界中,双向数据绑定或多或少地被忽视。统一的数据流对于复杂的应用程序更容易推理。 2)React组件通常可以放入演示文稿类别(仅显示内容)和容器类别。将设计与业务逻辑分开总是一个好主意。 – marvinhagemeister

+0

我想你错过了关于React架构的观点。你应该实际使用的是flux架构,还是其简单的版本叫做redux。这将允许你完全分离你的组件状态。 – Sulthan

回答

0

您应该在组件中存储passwordusername字段。因为与该处理有关的所有内容均为,该组件内部为。父母不在乎。父母只需要凭据的结果。

在你的情况下,你有一个简单的组件,但有更复杂的结构,例如整个表。你不想在你父母处理表格状态,因为你不在乎。你只想通过dataSourceTableComponent并让它在那里处理。

定义回调是完全正确的 - 所以你实际上得到你想要的。

0

LinkedStateMixin从React v15开始已弃用。建议使用 来显式设置值和更改处理程序,而不是使用 LinkedStateMixin。

来源:https://facebook.github.io/react/docs/two-way-binding-helpers.html

为什么我要paswword和用户名保存在父母的状态,而不是 封装这里面子和 从中获取数据提供了一种接口。

你的代码中有onChange={this.props.handlerUsernameFromParentComponent}因为usernamepassword现场父组件(孩子只能读取和通过写它的母公司)上。它通常被定义,那是因为你需要在另一个组件使用这些usernamepassword值,在作出反应,最好是共享的“状态”是lifted up the component hierarchy.

或者这种成分还能在更多的反应路被重写封装 一切?

是的,像React推荐的那样写它,将共享状态提升到父组件,例如, App主机usernamepassowrd状态,并传递值和处理程序作为道具。 App封装了需要在子组件之间共享的应用程序的状态。

此模型中不需要兄弟组件之间的通信。

+0

是的,我知道我的处理程序是在父组件和父变量定义的变量中定义的。我对此不满意。我想它应该在子控件内部定义并且可以在外部使用。但是如何? –

+0

@ AlexG.P。您好,我可以将您链接到[post](http://andrewhfarmer.com/component-communication/),它描述了组件之间的非流量通信。但说实话,我感觉到你对React如何让你做事情感到沮丧,例如Flux拱门。但它确实为您提供了一个很好的代码库,因为如果没有直接的兄弟对兄弟间的通信,组件之间不必知道彼此,因为父应用程序协调事物,因此组件更具可重用性。假设你想/必须使用React。 – bakkal