首页 > 其他分享 >反应变得简单!

反应变得简单!

时间:2022-08-31 03:34:18浏览次数:65  
标签:react DOM 应用程序 React 反应 简单 组件 变得

反应变得简单!

如果您完全不知道对语言做出反应,那么阅读这篇文章可能是一个良好的开端,即使您一开始没有遵循,只要坚持到博客的最后一个,您就会得到它。这里还有一些关于 React 的无用但有趣的事实。如果您赶时间,请跳过反应历史段落。

内容 :

  1. 反应历史
  2. 为什么每个前端开发人员都喜欢 react
  3. 先决条件
  4. 主要概念
  5. 你的第一个反应应用

反应历史:

React 是一个免费的开源 JavaScript 前端库,广泛用于构建基于 UI 组件的用户界面。组件显然是 UI 的模块化部分,可以重用并且理想情况下是通用的。

React 由 Meta(Facebook) 维护和开发。 React 可以用作开发单页、移动或服务器渲染应用程序的基础,这些应用程序具有类似的框架 下一个 .js。

为什么每个前端开发人员都喜欢 react :

  1. React 有基于组件的架构,这是我个人最喜欢的部分,使用 React 组件可以泛化组件,并且屏幕可以划分到任何复杂程度。这意味着组件可以像按钮或文本字段的组件一样原子,也可以像登录表单或幻灯片一样复杂。
  2. 使用 react 和其他一些 npm 依赖项可以构建单页应用程序。
  3. React 还使用虚拟 DOM 来帮助页面快速加载。我将借助下图详细说明该过程:

Human — Virtual DOM, Machine — Real DOM

因此,首先应该知道 DOM 代表 Document Object Module。简而言之,它包含如何绘制屏幕的树中的信息。首先 Virtual DOM 和 Real DOM 绘制初始树。但后来,每当在屏幕上看到变化时,虚拟 DOM 都会绘制确切的内容并将其移交给做出反应。 React 比较虚拟 DOM 和真实 DOM 并重新渲染,即仅重新加载更改的组件。

先决条件:

在开始编码反应之前,应该知道:

  1. JavaScript
  2. HTML
  3. CSS/引导程序
  4. VScode(您可以使用您选择的编辑器)

主要概念:

React 应用程序基本上由组件组成。组件有两种类型:

  1. 基于类的组件。
  2. 基于功能的组件。

这意味着单个组件可以使用类组成,也可以是简单的函数。

早些时候,基于函数的组件也被称为无状态组件,而基于类的组件被称为全状态组件。

但是现在,在 React 版本 16 之后,如果一个人使用基于功能的组件,它也具有所有功能,他/她可以借助 反应钩子。

你的第一个反应应用程序:

最好的学习方式是从你所拥有的实用知识开始,并在需要时学习进一步的文档。

因此,首先在终端中运行以下命令(我假设您的系统中安装了 linux,因为这是开发的第一步。

标签:react,DOM,应用程序,React,反应,简单,组件,变得
From: https://www.cnblogs.com/amboke/p/16641574.html

相关文章

  • 简单的Css动画--涟漪效果
    <!DOCTYPEhtml><htmllang="en"><head>  <metacharset="UTF-8">  <metahttp-equiv="X-UA-Compatible"content="IE=edge">  <metaname="viewport"c......
  • Linux的简单使用(2)
    文件目录指令:pwd:显示当前工作目录的绝对路径ls指令:基本语法:ls选项目录或是文件 -a:显示当前目录所有文件和目录,包括隐藏的 -l:以列表的方式显示信息cd指令:基本语法:c......
  • 实验一 c++简单程序设计
    题目代码第一题#include<iostream>usingnamespacestd;//求数字根intdigital_root(intn){ while(n>=10){ n=n/10+n%10; } returnn;}in......
  • cv2简单使用(opencv-python)
    opencv简介:OpenCV是一个基于Apache2.0许可(开源)发行的跨平台计算机视觉和机器学习软件库,可以运行在Linux、Windows、Android和[MacOS](https://baike.baidu.com/item/Mac......
  • 史上最简单的 《三角形判定》 面试题答案
     面试过程中,经常遇到要求写三角形判定测试用例,要求:利用等价类、边界值设计测试用例。直接把下面的用例背下来,默写一下就可以了。。  ......
  • 小复习:简单Dos命令
    1cd切盘符cdD: 2查看目录dir3切换目录cd/d C:\目录名注:参数是正斜杠/  目录是反斜杠\同盘直接cd目录名3cd..返回上一级4清理屏幕cls5退出exit5查......
  • GO简单包一下缓存
     ICacheQueryBasetypeICacheQueryBaseinterface{GetCacheKey()string} CacheMiddlewarepackageentity_cacheimport("encoding/json""erro......
  • leetcode 28. Implement strStr() 实现 strStr()(简单)
    一、题目大意实现strStr()函数。给你两个字符串haystack和needle,请你在haystack字符串中找出needle字符串出现的第一个位置(下标从0开始)。如果不存在,则返回......
  • 简单罗列几种可能导致无法上网的原因
    简单罗列几种可能导致无法上网的原因:WiFi网络未验证(portal网络),访问时路由器会重定向到二次登录网址运营商服务器或代理服务器问题,无法连接到外网DNS服务器问题,导致DNS......
  • 【远程访问和支持软件】上海道宁为您提供简单、安全、随时可用的远程访问解决方案
      VNCConnect是面向需要强大安全性、弹性和稳定性的组织的远程访问解决方案  通过灵活的多平台远程......