React新互动式学习文件网站上线,以Hooks为主轴、添加600沙盒范例

前端开发框架React开发团队经过长时间的准备,终于发布全新的文件网站react.dev,新网站提供互动式教学,能够通过函数组件和Hooks,向开发者介绍React概念与开发方法,新文件网站有丰富的图表、插图和挑战,并提供600多个互动式范例。旧React文件网址则移往legacy.reactjs.org。

React从第一版发布以来已经接近十年,在开发技术推陈出新的现在,官方开玩笑表示,React相当于存在了一整个世纪。因此希望通过更新入门指南和文件网站,更好地凸显React仍是当前创建用户接口的好工具。

官方制作全新的文件网站,是因为旧版本已经无法胜任教育新开发者的工作。React在2018年的时候加入了一个称为Hooks的概念,这与之前React中的类别组件(Class Components)是两种不同构建和管理组件的方法,Hooks以函数组件为基础,而类别组件则是以类别为基础,使用面向对象开发的方式构建组件。

Hooks让开发者使用更函数式的方式编写组件,借以提高可读性和可维护性,程序代码更简洁而且具有更好的重用逻辑,官方团队推荐刚开始学习React或是构建新项目的开发者,可以直接使用Hooks。由于React Hooks在2018年才发布,因此官方在当时旧版文件中,以假设读者已经熟悉类别组件的角度编写内容,希望加速社群采用Hooks。

但是经过一段时间的发展,显然旧文件已经不适合现在的React新开发者阅读,毕竟旧文件要开发者必需要学习React两次,第一次先使用类别组件,之后才能学会Hooks,而新教学文件则是一开始就介绍React Hooks写法。

新教学文件更强调互动性,还更新许多经典的教程,以函数组件和Hooks概念重新编写,开发者也可以在新文件网站中看到许多沙盒(下图),沙盒包含了程序代码与程序代码执行结果,开发者可以任意更改程序代码验证想法,并即时查看结果,改坏了也可以直接点击Reset重新来过。

官方提到,新文件改进旧文件中内容错误,同时也发现了一些React中的错误,甚至是开发团队正在解决的设计漏洞。整体来说,新文件的内容更正确,也更符合React发展现况,官方也收集了社群对文件的要求,并会在之后继续更新。