反应 redux oop 类

Question

来自 angular 我曾经为我的数据库中的每个实体都有一个类，这样的类封装了所有实体行为。

例如用户类可能看起来像

export class User{
  static notValid(u){
    return !!((u.id && u.id > 0 && u.fullname && u.fullname.length > 2 && u.picture) === false);
  }
  static fromArray(arr){
    let pack = [];
    for(let i=0;i<arr.length;i++){
      pack.push(new User(arr[i]));
    }
    return pack;
  }
  constructor(u){
    this.id = u.id || 0;
    this.fullname = u.fullname+'' || 'N/A';
    this.picture = u.picture+'' || '/imgs/logo.png';
    this.role = u.role || 'N/A';
    this.username = u.username+'' || '';
    this.email = u.email+'' || '';
    this.dob = u.dob || 0;
    this.gender = u.gender+'' || '';

    ///START SETTING FLAGS AND VALIDATING DATA;
    this.isValid = !User.notValid(this);
    this.saved   = this.id > 0;
    let n = this.fullname;
    this.nickname = n.split(' ').shift()+' '+n.split(' ').pop();
  }
  save(){
  ///IF NO ID, POST TO SERVER
    if(!this.saved)return $http.post('/user',this.toJson);
    return $http.put('user/'+this.id,this.toJson());
  //tojson is defined in prototype;
  }
  identity(){
    return {id:this.id,fullname:this.fullname,picture:this.picture,nickname:this.nickname};
  }
}

}

所以我的控制器不知道如何保存或更新用户，它所要做的就是在用户对象上触发 save()。

现在是 React 世界，应用程序内部的所有东西都是一个组件；

1.我如何在反应组件中复制这种方法？

我读了很多关于展示组件和智能组件的文章。但是数据模型组件呢？

2。如果我移植我所有当前类的反应我是否也应该实现渲染方法？我可以有多个渲染函数来根据页面返回不同的 html。

上面的示例用户可以出现在个人资料中将所有详细信息，并作为用户列表中的卡片，所以我应该在类原型中保留 html 吗？

Answer 1

您似乎对 React 以及它的设计目的有点困惑，这是完全正常的，来自 Angular 世界。

问题是，就 React 而言，没有数据模型之类的东西，只有组件。这些组件可以有状态（或者它们可能没有）并且这些组件被渲染到 DOM。

各种类型的组件似乎也让您感到困惑。 React 只关心数据的呈现方式。表示组件和容器组件相互区分，使我们更容易推理如何管理应用程序状态。

回答您的具体问题：

1) 如果你真的坚持要保持现有结构并使其与 React 一起工作，那么你实际上不需要做很多工作。您的数据模型组件只是 JavaScript 对象。您可以传递它们，也可以将它们提供给组件。当组件中发生某些事件时，您可以调用对象中的相关方法。不过，您需要确保将特定于 Angular 的方法移植到纯 JavaScript。

我建议不要使用这种方法。一开始它会起作用，但你很快就会发现自己陷入了维护地狱。相信我，我在工作中构建大型 React 应用程序，当我第一次开始编写 React 组件时，我被类似的决定所困扰。

2) 当然，您可以在类定义中添加几个 React 方法，并且还可以添加表示代码（即 HTML）和表示状态。然后你就可以渲染这些组件了。

但这确实不是解决问题的方法。 React 不会为您决定任何事情，而 Angular 对此非常固执。首先，你应该遵循一些关于 React 的教程。看起来你手上有一个相当大的应用程序，所以我建议你也研究一下 Flux 和 Redux。

之后，您应该坐下来设计应用程序的工作方式以及状态的外观。之后，通过实际的编码部分将变得轻而易举。

你不能在一个 React 组件中拥有多个渲染方法，这完全没有意义。 React 是纯 JavaScript，并且 JavaScript 没有经典 OOP 意义上的覆盖类成员的任何概念。哎呀，JavaScript 甚至没有类的概念，它已包含在 ES6 中，因此来自面向类的编程语言的人不需要正确学习原型链是如何工作的。

React 组件和一般的 JavaScript 对象只能有一个键。您可以在浏览器的控制台中尝试此操作。

let a = {b: 1, b: 2};
console.log(a);

对象a 将只有一个b 键，该键的值将是2。

说了这么多，您可以使用普通的 JavaScript 编码方法，根据某些条件将组件的实际呈现委托给其他对象。但这不是 React 应该如何工作的。您的渲染方法可以根据您的条件决定要渲染的内容。

Answer 2

首先，让我告诉你，我无法回答你的问题。

看起来你是 React 的新手。在 React 中，我从来没有使用过这种方法为 DB 中的每个实体创建一个类。这对我来说是新的。也许它有效，也许它没有。但我建议你先用示例项目弄脏你的手。这将回答你的大部分问题。

不过，我可以回答你的一些问题-

数据模型组件？

显然，没有数据模型组件这样的东西。 React 是关于单向数据流的。您想在反应中使用redux 进行状态管理。连接到此状态的组件是已连接/智能组件。智能组件通过props（属性）将状态传递给展示/哑组件。所以就是这样。所有状态都来自 Redux 或类似的状态管理机制，即。通量。

我可以有多个渲染函数来返回基于不同的 html 页面。

没有。一个组件只包含一个render() 方法。这正是我建议您在 React 中构建一些示例应用程序的原因。

如果你想学习 React，这是我向你推荐的，按特定顺序-

• React.js
• Redux
• Redux-thunk
• Redux 传奇

React 不是像 Angular 那样的单一框架。它只是一个图书馆。程序员打算将不同的库放在一起来构建他们的应用程序。