React教程第13部分：基于类的组件

今天，我们将发布下一个React教程的翻译。 它着重于基于类的组件。 此类组件是使用class关键字创建的。



→ 第1部分：课程概述，React，ReactDOM和JSX普及的原因
→ 第2部分：功能组件
→ 第3部分：组件文件，项目结构
→ 第4部分：父级和子级组件
→ 第5部分：TODO应用程序的开始工作，样式设计的基础
→ 第6部分：关于本课程的一些功能，JSX和JavaScript
→ 第7部分：内联样式
→ 第8部分：继续研究TODO应用程序，熟悉组件的属性
→ 第9部分：组件属性
→ 第10部分：使用组件特性和样式的研讨会
→ 第11部分：动态标记生成和映射数组方法
→ 第12部分：研讨会，TODO应用程序的第三阶段工作
→ 第13部分：基于类的组件
→ 第14部分：关于基于类的组件，组件状态的研讨会
→ 第15部分：组件健康研讨会
→ 第16部分：TODO应用程序的第四阶段工作，事件处理
→ 第17部分：TODO应用程序的第五阶段工作，修改组件的状态
→ 第18部分：TODO应用程序的第六阶段工作
→ 第19部分：组件生命周期方法
第20部分：条件渲染的第一课
→ 第21部分：关于条件渲染的第二课​​和研讨会
→ 第22部分：TODO应用程序的第七阶段工作，从外部资源下载数据
→ 第23部分：关于使用表格的第一课
→ 第24部分：第二形式课
→ 第25部分：使用表单的研讨会
→ 第26部分：应用程序体系结构，容器/组件模式
→ 第27部分：课程项目

课24.基于类的组件

→ 原创

如果您在开始学习本培训课程之前，已经在其他一些课程的基础上学习了React，那么您可能会对我们在这里使用功能组件这一事实有疑问。 事实是，在许多其他课程中，本主题要么未涵盖，要么将功能组件称为并非特别必要的东西。 一些作者甚至走得更远，说最好不要使用功能组件，而应该使用基于类的组件。 他们认为这可以节省程序员不必要的负担。 我相信研究React的任何人都会发现查看全景图并了解当今流行的组件方法很有用。 特别地，现在的方向是相关的，根据它可能的地方使用哪些功能组件，而仅在真正需要它们时才使用基于类的组件。 应该注意的是，所有这些只是一个建议。 每个开发人员都会准确地决定如何设计应用程序。

当我教授React课程时，我更喜欢从功能组件开始，因为功能是清晰的构造。 只需看一眼功能组件就足以准确了解其执行的操作。 说，这里是功能组件的代码，这是一个常规函数，它返回包含<h1>元素和一些文本的<div>元素。

 function App() {   return (       <div>           <h1>Code goes here</h1>       </div>   ) } 

但是，当我们深入研究React时，了解它的功能后，事实证明功能组件无法为我们提供React组件可能需要的一切。 因此，今天我们将讨论基于类的组件。 即，让我们从创建一个类的组件开始，该类执行与上述功能组件相同的操作。 在下一课中，我们将介绍为我们提供基于类的组件的那些附加功能。 特别是，我们正在谈论使用组件状态及其生命周期方法的可能性。

将功能组件转换为基于类的组件。 如果您不太熟悉ES6中出现的class关键字，并且对开发人员开放它的可能性，建议您花一些时间来更好地了解这些类 。

基于类的组件描述以class关键字开头。 然后是组件的名称，根据与功能组件的名称相同的规则进行编译。 同时，在构建了class App的结构之后class App不会像大括号那样，但是表单的结构extends React.Component 。 在它后面放上一对花括号，其中将对班级的身体进行描述。

JavaScript中的类是传统原型继承模型的附加组件。 class App extends React.Component的构造本质是class App extends React.Component是，我们声明一个新类并指出其原型应为React.Component 。 该原型在我们组件中的存在使我们能够使用此组件中React.Component中可用的所有有用功能。

因此，在基于类的组件的现阶段工作中，其代码如下所示：

 class App extends React.Component {  } 

基于类的组件必须至少具有一个方法。 这是render()方法。 此方法应返回与通常从功能组件返回的相同的方法。 这就是基于类的组件的完整代码的样子，实现了与上述功能组件相同的功能。

 class App extends React.Component {   render() {       return (           <div>               <h1>Code goes here</h1>           </div>       )   } } 

以与功能组件相同的方式使用基于类的组件。 也就是说，在我们的情况下，用新代码替换功能组件的代码就足够了，应用程序将像以前一样运行。

让我们谈谈render()方法。 如果在形成此方法返回的元素之前，您需要执行一些计算，则必须在return命令之前使用此方法执行这些计算。 也就是说，如果您有一些代码可以确定组件的视觉表示形成的顺序，则必须将此代码放置在render方法中。 例如，如果您使用内置样式，则可以在此处自定义样式。 也将有实现条件渲染机制和其他类似构造的代码。
如果您熟悉类，则可以创建自己的方法，并在其中放置为可视化准备组件的代码，然后在render方法中调用此方法。 看起来像这样：

 class App extends React.Component {     yourMethodHere() {         }     render() {       const style = this.yourMethodHere()       return (           <div>               <h1>Code goes here</h1>           </div>       )   } } 

即，这里我们假设在方法yourMethodHere()中生成yourMethodHere()样式，并将其返回值写入了render()方法中声明的style常量。 请注意，关键字this用于访问我们自己的方法。 稍后我们将讨论此关键字的功能，但现在让我们集中讨论此处介绍的设计。

现在让我们讨论在基于类的组件中创建传递给类的属性时如何使用它们。

当使用功能组件时，我们用props参数声明了一个对应的函数，这是一个对象，该对象接收实例化时传递给组件的内容。 看起来像这样：

 function App(props) {   return (       <div>           <h1>{props.whatever}</h1>       </div>   ) } 

当使用基于类的组件时，同样的事情看起来像这样：

 class App extends React.Component {   render() {       return (           <div>               <h1>{this.props.whatever}</h1>           </div>       )   } } 

总结

如前所述，基于类的组件为开发人员提供了许多选择。 我们将更多地讨论这些功能。 现在，您可以试验您今天所学的知识，并为基于类的组件上的实际课程做准备。

亲爱的读者们！ 如果您是专业地使用React，请告诉我们在哪些情况下使用功能组件以及在哪些基于类的组件中使用。