反应 redux oop 类

Question

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

例如用户 Class 可以看起来像

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.我如何在 React 组件中复制这种方法？

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

2。如果我将所有当前 class 移植到 react，我是否也应该实现 render 方法？我可以根据页面 return 不同 html 设置多个渲染函数吗？

上面的示例用户可以出现在配置文件中的所有详细信息中，并作为用户列表中的一张卡片，所以我应该在 class 原型中为两者保留 html ?

Answer 1

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

看来您是 React 新手。我从来没有使用这种方法为数据库中的每个实体创建一个 class，在 React 中，从来没有。这对我来说是新的。也许有效，也许无效。但我建议您先动手操作示例项目。这将回答你的大部分问题。

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

Data Model component ?

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

can i have multiple render functions to return different html based on page.

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

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

React.js
Redux
Redux-thunk
Redux 传奇

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

Answer 2

来自 Angular 世界，您似乎对 React 及其设计用途感到有些困惑，这是完全正常的。

事实是，就 React 而言，没有数据模型之类的东西，只有组件。这些组件可以有状态（也可以没有）并且这些组件被渲染到 DOM。

各种组件似乎也让你一头雾水。 React 只关心数据的呈现方式。表示和容器组件相互区分，使我们更容易推理如何管理应用程序状态。

回答您的具体问题：

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

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

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

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

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

你不能在一个 React 组件中有多个渲染方法，那绝对没有意义。 React 是纯粹的 JavaScript 并且 JavaScript 在 classical OOP 的意义上没有任何覆盖 class 成员的概念。哎呀，JavaScript 甚至没有包含在 ES6 中的 class 的概念，所以来自 class 面向编程语言的人不需要正确学习原型是如何工作的连锁工程。

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

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

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

说了这么多，您可以使用正常的 JavaScript 编码方法根据某些条件将组件的实际渲染委托给其他对象。但这不是 React 应该工作的方式。您的渲染方法可以根据您的条件决定渲染什么。

反应 redux oop 类

React redux oop classes

oop

data-modeling

angularjs

reactjs

redux