React redux oop 类

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

例如用户类可以看起来像

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 吗？

你似乎对 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 应该如何工作的。您的渲染方法可以根据您的条件决定渲染什么。