Javascript Reactjs - 面向对象？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35764800/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Reactjs - Object Oriented?
提问by jbambrough
I am starting to use Reactjs, and coming from a OO (Java) background I was curious if we can use React in a true Object Oriented fashion with true inheritance and composition.
我开始使用 Reactjs，并且来自 OO（Java）背景，我很好奇我们是否可以以真正的面向对象的方式使用 React，并具有真正的继承和组合。
USE CASE: We are creating React components in a library for our developers to reuse. Can we design this in an Object Oriented fashion? For example, can I have a generic Input text field, with some basic styles/behaviors, then have another MyInput field that extends Input that is able to leverage the properties and behaviors from Input?
用例：我们正在一个库中创建 React 组件供我们的开发人员重用。我们可以以面向对象的方式设计它吗？例如，我是否可以拥有一个具有一些基本样式/行为的通用 Input 文本字段，然后拥有另一个扩展 Input 的 MyInput 字段，该字段能够利用 Input 的属性和行为？
It seems that most of what I've learned React uses states and reducers within the Application itself to manage everything; which to me seems like it's missing the point of the power of OO design. But maybe I'm wrong. Any information would be most helpful
似乎我学到的大部分 React 都在应用程序本身中使用状态和化简器来管理一切；在我看来，这似乎缺少 OO 设计的力量。但也许我错了。任何信息都会最有帮助
回答by WitVault
First of all I would like to tell you that Reactis based on Javascriptwhich is obviously object oriented(but not exactly similar to languages such as Java, C++, and many other tradional Object Oriented languages ).
首先我想告诉你，React基于Javascript，它显然是面向对象的（但与 Java、C++ 和许多其他传统的面向对象语言等语言并不完全相似）。
React itself does not enforces any object oriented technique but React components are totally reusable. You can create generic components from very simple input text box, labels to complex one and can be reused many times.
React 本身不强制执行任何面向对象的技术，但 React 组件是完全可重用的。您可以从非常简单的输入文本框、标签到复杂的文本框创建通用组件，并且可以多次重复使用。
If you are coming from JAVAworld then I would suggest you to use Javascript es6to get taste of class in somewhat similar way.
如果您来自JAVA世界，那么我建议您使用Javascript es6以类似的方式体验课程。
A sample React component in Javascript es6
Javascript es6 中的示例 React 组件
class Text extends React.Component {
render() {
return <p>{this.props.children}</p>;
}
}
React.render(<Text>Hello World</Text>, document.body);
See how inheritanceis working here
看看继承是如何在这里工作的
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
class CPoint extends Point {
constructor(x, y, color) {
super(x, y);
this.color = color;
}
toString() {
return super.toString() + ' in ' + this.color;
}
}
All code you see is in Javascript!
你看到的所有代码都是用 Javascript 编写的！
For React you can divide your application to have Presentational componentsand Container componentsfor better re-usability and structuring.
对于 React，您可以将应用程序划分为 展示组件和容器组件，以获得更好的可重用性和结构化。
- Presentational components :mainly concerned with receiving the data via props and displaying them. They don't specify how the data is loaded or mutated and don't have their own states.
- 展示组件：主要涉及通过 props 接收数据并显示它们。它们没有指定数据是如何加载或改变的，也没有自己的状态。
Example
例子
const Text = ({ children = 'Hello World!' }) => <p>{children}</p>
- Container components:passes the data and behavior to presentational or other container components. They have their own states.You can generate the data here and pass it to presentational components.
- 容器组件：将数据和行为传递给展示或其他容器组件。它们有自己的状态。您可以在此处生成数据并将其传递给展示组件。
Example
例子
class Contacts extends React.Component {
constructor(props) {
super(props);
this.state = {
message:"new message"
};
}
render() {
return (
<div><Text children={this.state.message}/></div>
);
}
}
I would suggest stay away from Mixins. Mixins aren't supported in ES6 classes.
我建议远离 Mixins。 ES6 类不支持 Mixin。
