反应redux oop类 [英] React redux oop classes
问题描述
从角度来看，我曾经为数据库中的每个实体都有一个类，该类封装了所有实体行为.
例如，用户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};
}
}
}
以使我的控制器不知道如何保存或更新User，它所要做的就是在用户对象上触发save().
现在是React世界，其中应用程序内的所有东西都是组件；
1.我如何在React组件中复制这种方法?
我大量阅读了演示组件和智能组件.但是数据模型组件呢?
2.如果我移植了当前所有的类以做出反应，是否还应该实现render方法?我可以有多个渲染函数来基于页面返回不同的html吗?
上面的示例用户可以在Profile中显示所有详细信息，并作为用户列表中的卡片，所以我应该在类原型中都保留html内容?
您似乎对React和来自Angular世界的完全正常的React感到有些困惑.
问题是，就React而言，没有数据模型之类的东西，只有组件.这些组件可以具有状态(或可以不具有状态)，并且这些组件将呈现给DOM.
各种类型的组件似乎也使您感到困惑. React只关心数据的呈现方式.表示和容器组件彼此区分开来，这使我们更容易推理出如何管理应用程序状态.
要回答您的特定问题:
1)如果您真的坚持保留现有结构并将其与React一起使用，则实际上不需要做很多工作.您的数据模型组件只是JavaScript对象.您可以传递它们，也可以将它们提供给组件.当组件中发生某些事件时，您可以在对象中调用相关方法.但是，您需要确保将特定于Angular的方法移植到纯JavaScript.
我建议您不要使用这种方法.一开始它会工作，但是您很快就会发现自己陷入了维护困境.相信我，我在工作中正在构建大规模的React应用程序，当我刚开始编写React组件时，我也曾因类似的决定而bit之以鼻.
2)当然，您可以在类定义中添加几个React方法，还可以添加表示代码(即HTML)和表示状态.然后，您将能够渲染这些组件.
但这确实不是解决之道. React不会为您决定任何事情，而Angular对此持非常坚定的态度.首先，您应该遵循有关React的一些教程.看来您手中有相当大的应用程序，所以我建议您也研究一下Flux和Redux.
此后，您应该坐下来设计应用程序的工作方式以及状态的外观.之后，轻而易举地遍历实际的编码部分.
在React组件中不能有多个渲染方法，这绝对没有道理. React是纯JavaScript，JavaScript在经典OOP的意义上没有任何重写类成员的概念.哎呀，JavaScript甚至没有一个类的概念，ES6中已经包含了一个类的概念，因此来自面向类的编程语言的人就不需要正确地学习原型链的工作原理.
反应组件和一般的JavaScript对象只能具有一个键.您可以在浏览器的控制台中尝试此操作.
let a = {b: 1, b: 2};
console.log(a);
对象a仅具有一个b键，并且该键的值将为2.
说了这么多，您可以使用正常的JavaScript编码方法，根据某些条件将组件的实际呈现委托给其他对象.但这不是React应该如何工作的.您的render方法可以根据您的条件决定要渲染的内容.
coming from angular i used to have a class for every entity in my DB, such class encapsulated all entity behaviour.
for example users Class can look like
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};
}
}
}
so that my controller doenot know about how to save or update User, all it have is to trigger save() on user object.
Now React world, where every thing inside app is a component;
1. how can i replicate such approach inside react component ?
i read alot that there is presentational components and smart components. but what about Data Model component ?
2. if i port all my current class's to react should i also implement render method ? can i have multiple render functions to return different html based on page.
example above User can appear inside Profile will all details, and as a card in users list, so i should keep html for both inside class prototype ?
You seem to be a bit confused about React and what it is designed to do which is perfectly normal, coming from the Angular world.
The thing is, as far as React is concerned there is no such thing as a data model, only components. These components can have state (or they may not) and these components are rendered to the DOM.
Various types of components seem to have confused you as well. React is only concerned with how data is presented. Presentation and container components are distinguished from each other to make it easier for us to reason about how to manage application state.
To answer your specific questions:
1) If you are really adamant about keeping your existing structure and make it work with React, you don't actually need to do a lot of work. Your data model components are just JavaScript objects. You can pass them around and you can give them to components. When some event happens in the components, you can call the relevant methods in your objects. You will need to make sure that Angular specific methods are ported to pure JavaScript though.
I advise against this approach. It will work at first but you will find yourself in a maintenance hell in no time. Believe me, I'm building large scale React apps in my job and I have been bitten by similar decisions when I first started writing React components.
2) Certainly you could add a couple of React methods to your class definitions and also throw in the presentation code (that is, HTML) and presentation state. Then you would be able to render these components.
But that really is not the way to go about it. React doesn't decide on anything for you whereas Angular is very opinionated about this. First and foremost you should follow some tutorials on React. Looks like you have a sizable application in your hands, so I would advise you to look into Flux and Redux as well.
After that you should sit down and design how your application should work and how your state should look. After that it will be a breeze to go through the actual coding part.
You can NOT have multiple render methods in a React component, that makes absolutely no sense. React is pure JavaScript and JavaScript doesn't have any concept of overriding class members in the sense of classical OOP. Heck, JavaScript doesn't even have the concept of a class, that has been included in ES6 so people coming from class oriented programming languages wouldn't need to properly learn how the prototype chain works.
React components, and JavaScript objects in general, can only have one key. You can try this in your browser's console.
let a = {b: 1, b: 2};
console.log(a);
The object a will only have one b key and the value for that key will be 2.
Having said all this, you can delegate the actual rendering of a component to other objects based on some conditions using normal JavaScript coding methods. But this isn't how React is supposed to work. Your render method can be able to decide on what to render based on your conditions.
这篇关于反应redux oop类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
