• react实战系列 —— react 的第一个组件


    🚀 优质资源分享 🚀

    学习路线指引(点击解锁)知识定位人群定位
    🧡 Python实战微信订餐小程序 🧡进阶级本课程是python flask+微信小程序的完美结合,从项目搭建到腾讯云部署上线,打造一个全栈订餐系统。
    💛Python量化交易实战💛入门级手把手带你打造一个易扩展、更安全、效率更高的量化交易系统

    其他章节请看:

    react实战 系列

    react 的第一个组件

    写了 react 有一个半月,现在又有半个月没写了,感觉对其仍旧比较陌生。

    本文分两部分,首先聊一下 react 的相关概念,然后不使用任何语法糖(包括 jsx)或可能隐藏底层技术的便利措施来构建 React 组件

    Tip:从一项新技术的底层元素起步有利于使用者更好的长期使用它

    跨平台

    大部分 react 应用是在 Web 平台上。而 React NativeReact VR 这样的项目则创造了 react 应用在其他平台上运行的可能

    React 应用主要成分

    组件

    组件是 React 中最基本单元

    组件通常对应用户界面的一部分,比如导航。也可以担任数据格式化等职责。

    可以将任何东西作为组件,尽管并不是所有东西作为组件都有意义。

    如果将整个界面作为组件,并且没有子组件或进一步的细分,那么对自己并没有什么帮助。倘若,将界面不同部分拆解成可以组合,复用的部分,却很有帮助。

    组件具有良好的封装性复用性组合性。有助于为使用者提供一个更简单的方式来思考和构建用户界面。使用 React 构建应用就像使用积木来搭建项目,而构建应用时有取之不尽的“积木”

    将 UI 分解成组件可以让人更轻松的处理应用不同的部分。

    组件需要一起工作,也就是说组件可以组合起来形成新的组件。组件组合也是 React 最强大的部分之一。

    如果身处一个中大型团队,可以将组件发布到私有注册中心(npm 或者其他)

    React 组件还有一个方面就是生命周期方法。当组件经过其生命周期的不同时期时(挂在、更新、卸载等),可以使用可预测、定义良好的方法。

    React 库

    React 核心库与 react-dom 和 react-native 紧密配合,侧重组件的规范和定义。能让开发者构建一个组件树,该组件树能够被浏览器和其他平台所使用。

    react-dom 就是一个渲染器。针对浏览器环境和服务端渲染。

    比如我们要将组件渲染到浏览器,就得用到 react-dom。

    React Native 库专注于原生平台,能够为 ios、android 和其他平台创建 react 应用。

    第三方库

    React 不自带 http 等其他前端常用工具库。开发者可以自由的选择对于工作最好的工具。

    react 的权衡

    react 属于 专一型,主要关注 UI 试图方面。

    而 angular 属于 通用型,其内置了许多解决方案,例如 http 调用、路由、国际化、字符串和数字格式化…

    Tip:通常一些优秀的团队会用这两种方式。

    React 的创建主要用于 Facebook 的 UI 需求。虽然大多数的 web 应用在此范围之内,但也有一些应用不在。

    React 是一种抽象,也存在抽象的代价。React 以特定的方式构建并通过 api 向外暴露,开发者会失去对底层的可见性。当然 React 也提供了紧急出口,让开发者深入较低的抽象层级,仍然可以使用 jQuery,不过需要以一种兼容 React 的方式使用。

    有时还需要为 React 的行事方式买单。或许会影响应用的小部分(即不太适合用 React 的方式来工作)

    使用 React 时所做的权衡有助于使用者成为更好的开发者。

    虚拟 Dom

    React 旨在将复杂的任务简单化,把不必要的复杂性从开发者身上剥离出来。

    鼓励开发者使用声明式的编程而非命令式,也就是开发者声明组件在不同状态下的行为和外观即可,React 负责渲染以及更新 UI,并将性能做到恰到好处。从而让研发人员腾出时间思考其他方面。

    驱动这些的主要技术之一就是虚拟dom

    Tip:有关虚拟dom 的介绍可以参考 vue 快速入门-虚拟dom

    虚拟 Dom 不是我们关注的重点。这正是 React 简单 的地方:开发者被解放出来,去关注最关注的部分。

    React 的简单、非固化

    什么使 React 成为大型团队的宠儿?首先是简单,其次是非固化

    简单的技术让人更容易理解和使用。

    React 是一个非常轻量的库,只关注应用的视图。更加容易与使用者当前的技术集成,并在其他方面为使用者留下了选择的空间。一些功能固化的框架和库要求使用者要么全盘接受要么彻底不用。

    简单和非固化的特性,以及恰到好处的性能,让它非常适合大大小小的项目。

    组件间的关系

    组件可以独立存在,也可用来创建其他组件。人们认为组件可以创建很多不同类的关系,从某种意义这是对的。

    但组件更多的是以灵活的方式被使用,应该关注其独立性和常常不带任何负担,可组合使用。所以组件只关注其父母和孩子,兄弟关系可以不管。

    建立组件关系的过程对每个团队或项目都不尽相同,组件关系也可能会随时间而改变,我们可以不期望一次就建立完美,也无需太过担心,因为 React 会让我们的 UI 迭代没那么困难。

    搭建组件的框架

    首先我们将组件的框架写好:

    
     
    div>