angularjs - react 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};
  }
}

}

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

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

1.如何在 react 组件中复制这种方法？

我读了很多，有展示组件和智能组件。但是数据模型组件呢？

2. 如果我移植所有当前类(class)的 react 我还应该实现渲染方法吗？我可以有多个渲染函数来根据页面返回不同的 html。

上面的示例用户可以出现在配置文件中的所有详细信息，并作为用户列表中的卡片，所以我应该为两个类原型(prototype)保留 html 吗？

Answer 1

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

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

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

要回答您的具体问题:

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

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

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

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

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

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

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

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

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

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