学习路线指引(点击解锁) | 知识定位 | 人群定位 |
---|---|---|
🧡 Python实战微信订餐小程序 🧡 | 进阶级 | 本课程是python flask+微信小程序的完美结合,从项目搭建到腾讯云部署上线,打造一个全栈订餐系统。 |
💛Python量化交易实战💛 | 入门级 | 手把手带你打造一个易扩展、更安全、效率更高的量化交易系统 |
其他章节请看:
写了 react 有一个半月,现在又有半个月没写了,感觉对其仍旧比较陌生。
本文分两部分,首先聊一下 react 的相关概念
,然后不使用任何语法糖(包括 jsx)或可能隐藏底层技术的便利措施来构建 React 组件
。
Tip:从一项新技术的底层元素起步有利于使用者更好的长期使用它
大部分 react 应用是在 Web 平台
上。而 React Native
和 React VR
这样的项目则创造了 react 应用在其他平台上运行的可能
组件是 React 中最基本单元
。
组件通常对应用户界面的一部分,比如导航。也可以担任数据格式化等职责。
可以将任何东西作为组件,尽管并不是所有东西作为组件都有意义。
如果将整个界面作为组件,并且没有子组件或进一步的细分,那么对自己并没有什么帮助。倘若,将界面不同部分拆解成可以组合,复用的部分,却很有帮助。
组件具有良好的封装性
、复用性
和组合性
。有助于为使用者提供一个更简单的方式来思考和构建用户界面。使用 React 构建应用就像使用积木来搭建项目,而构建应用时有取之不尽的“积木”
将 UI 分解成组件可以让人更轻松的处理应用不同的部分。
组件需要一起工作,也就是说组件可以组合起来形成新的组件。组件组合
也是 React 最强大的部分之一。
如果身处一个中大型团队,可以将组件发布到私有注册中心(npm 或者其他)
React 组件还有一个方面就是生命周期方法
。当组件经过其生命周期的不同时期时(挂在、更新、卸载等),可以使用可预测、定义良好的方法。
React 核心库与 react-dom 和 react-native 紧密配合,侧重组件的规范和定义
。能让开发者构建一个组件树,该组件树能够被浏览器和其他平台所使用。
react-dom 就是一个渲染器
。针对浏览器环境和服务端渲染。
比如我们要将组件渲染到浏览器,就得用到 react-dom。
React Native
库专注于原生平台,能够为 ios、android 和其他平台创建 react 应用。
React 不自带 http
等其他前端常用工具库。开发者可以自由的选择对于工作最好的工具。
react 属于 专一型
,主要关注 UI 试图方面。
而 angular 属于 通用型
,其内置了许多解决方案,例如 http 调用、路由、国际化、字符串和数字格式化…
Tip:通常一些优秀的团队会用这两种方式。
React 的创建主要用于 Facebook 的 UI 需求。虽然大多数的 web 应用在此范围之内,但也有一些应用不在。
React 是一种抽象,也存在抽象的代价
。React 以特定的方式构建并通过 api 向外暴露,开发者会失去对底层的可见性
。当然 React 也提供了紧急出口
,让开发者深入较低的抽象层级,仍然可以使用 jQuery,不过需要以一种兼容 React 的方式使用。
有时还需要为 React 的行事方式买单。或许会影响应用的小部分(即不太适合用 React 的方式来工作)
使用 React 时所做的权衡有助于使用者成为更好的开发者。
React 旨在将复杂的任务简单化,把不必要的复杂性从开发者身上剥离出来。
鼓励开发者使用声明式
的编程而非命令式,也就是开发者声明组件在不同状态下的行为和外观即可,React 负责渲染以及更新 UI,并将性能做到恰到好处。从而让研发人员腾出时间思考其他方面。
驱动这些的主要技术之一就是虚拟dom
。
Tip:有关虚拟dom 的介绍可以参考 vue 快速入门-虚拟dom
虚拟 Dom 不是我们关注的重点。这正是 React 简单
的地方:开发者被解放出来,去关注最关注的部分。
什么使 React 成为大型团队的宠儿?首先是简单
,其次是非固化
。
简单的技术让人更容易理解和使用。
React 是一个非常轻量的库,只关注应用的视图。更加容易与使用者当前的技术集成,并在其他方面为使用者留下了选择的空间。一些功能固化的框架和库要求使用者要么全盘接受要么彻底不用。
简单和非固化的特性,以及恰到好处的性能,让它非常适合大大小小的项目。
组件可以独立存在,也可用来创建其他组件。人们认为组件可以创建很多不同类的关系,从某种意义这是对的。
但组件更多的是以灵活的方式被使用,应该关注其独立性
和常常不带任何负担
,可组合使用。所以组件只关注其父母和孩子
,兄弟关系可以不管。
建立组件关系的过程对每个团队或项目都不尽相同,组件关系也可能会随时间而改变,我们可以不期望一次就建立完美,也无需太过担心,因为 React 会让我们的 UI 迭代没那么困难。
首先我们将组件的框架写好:
div>