React培训课程，第28部分：React现代功能，项目构想，结论

今天，在React课程的翻译的最后部分，我们将讨论React的现代功能并讨论React应用程序的思想，创建它们可以重复您在学习本课程时学到的知识，并学到很多东西。



→ 第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部分：课程项目
→ 第28部分：当前的React功能，项目构想，结论
→ 结束！

课46.开发现代React应用程序

→ 原创

Facebook上的许多程序员都在使用React库，而React周围的大型社区的成员正在为该项目做贡献。 所有这些导致了一个事实，即React正在迅速发展。 例如，如果您在2019年初学习React并查看了该库中的资料，例如两年前，您不禁会注意到自这些资料发布以来React在发生的变化。 例如，在React 16.3中，出现了一些新的组件生命周期方法，并且不赞成使用某些方法。 而且，例如，在React 16.6中，还有更多新功能。 在React 17.0和该库的未来版本中，预计会有大量创新。

现在，我们将讨论一些现代的React功能。

其中许多功能取决于用于开发React项目的工具所支持的ECMAScript规范版本。 假设，如果您使用Babel传送器，则意味着您具有最新的JavaScript功能。 应该注意的是，在尚未包含在标准中的项目中使用JavaScript功能时，您可能会遇到这样的事实，即如果包含在标准中，则它们可能会发生变化。

开发React应用程序时可以使用的现代JavaScript功能之一是能够使用箭头函数语法声明类方法。

这是显示文本字段的App组件的代码：

 import React, {Component} from "react" class App extends Component {   //        constructor() {       super()       this.state = {           firstName: ""       }       this.handleChange = this.handleChange.bind(this)   }     //        handleChange(event) {       const { name, value } = event.target       this.setState({           [name]: value       })   }     render() {       return (           <main>               <form>                   <input                       type="text"                       name="firstName"                       value={this.state.firstName}                       onChange={this.handleChange}                       placeholder="First Name"                   />               </form>               <h1>{this.state.firstName}</h1>           </main>       )   } } export default App 

这是该应用程序的页面在浏览器中的外观。


浏览器中的应用

我们将handleChange()方法重写为箭头函数，使组件代码具有以下形式：

 import React, {Component} from "react" class App extends Component {   //        constructor() {       super()       this.state = {           firstName: ""       }   }     //        handleChange = (event) => {       const { name, value } = event.target       this.setState({           [name]: value       })   }     render() {       return (           <main>               <form>                   <input                       type="text"                       name="firstName"                       value={this.state.firstName}                       onChange={this.handleChange}                       placeholder="First Name"                   />               </form>               <h1>{this.state.firstName}</h1>           </main>       )   } } export default App 

在此转换过程中，对代码进行了少量更改，但是这些更改对方法的工作方式产生了严重影响。 箭头函数中的this指示它们所在的词法范围。 这些功能不支持this绑定。 箭头函数的此功能导致以下事实：使用它们声明的方法不需要在类构造函数中与this绑定。

我们将在这里考虑的另一种可能性是使用类属性。 现在，在构造函数中初始化状态时，我们使用this.state 。 因此，我们创建了该类的实例属性。 现在，可以在构造函数之外创建属性。 如此一来，您可以将代码转换如下：

 import React, {Component} from "react" class App extends Component {   //        state = { firstName: "" }     //        handleChange = (event) => {       const { name, value } = event.target       this.setState({           [name]: value       })   }     render() {       return (           <main>               <form>                   <input                       type="text"                       name="firstName"                       value={this.state.firstName}                       onChange={this.handleChange}                       placeholder="First Name"                   />               </form>               <h1>{this.state.firstName}</h1>           </main>       )   } } export default App 

请注意，这里在声明相应属性时通过初始化状态摆脱了构造方法。 一切都表明，在可预见的将来，此JS功能将包含在标准中。

这是React功能的列表。

• 上下文API 可以使用它代替Redux，尽管这并不意味着Redux库已经失去了相关性。
• 错误的边界 。
• 渲染道具模板 。
• 高阶组件 。
• 反应路由器 。
• 反应钩子 。
• React 16.6的新功能 。

总的来说，应该指出的是，由于React的发展非常迅速，因此建议所有参与React开发的人员都应持续监控该库的创新。

课47.反应项目的想法

→ 原创

在React的开发过程中，您和我创建了两个项目-Todo应用程序和meme生成器。 您可能已经知道要使用React创建的内容。 也许您已经在开发自己的应用程序。 如果您还没有决定，并且考虑到实践是学习计算机技术的最佳方法，那么这里 -您将在其中找到大量可以使用React创建Web应用程序的想法。

课48.结论

→ 原创

恭喜你！ 您刚刚完成了关于React库的课程。 您已经熟悉了React应用程序的基本构建块，您已经可以使用它们来创建自己的项目。 的确，如果您想使用React创建一些东西，请做好准备，以备您仍然有很多东西需要学习。

让我们介绍一下在开发本课程时学到的基本概念。

• JSX。 JSX允许您使用与常规HTML代码非常相似的语法来描述用户界面。
• 组件开发的两种方法。 基于类和功能的组件。
• 样式化React应用程序的不同方法。
• 将属性从父组件传递到子组件。
• 使用组件的状态来存储和处理数据。
• 有条件的渲染。
• 在React中使用表单。

感谢您的关注！

亲爱的读者们！ 我们要求您分享对本课程的印象，并告诉我们您想使用React开发（或已经开发）的内容。