【DAY-01】React

最新推荐文章于 2024-11-08 14:35:14 发布
最新推荐文章于 2024-11-08 14:35:14 发布
阅读量49 收藏
点赞数
文章标签： javascript ui 测试 ViewUI
原文链接：http://www.cnblogs.com/codepen2010/p/6832194.html
版权

React

  • 一个用于创建可复用，可聚合的web组件的js库
  • 只提供MVC中的V层

WHY

  1. 组件化，不是写一堆HTML模板
  2. JS逻辑与HTML标签紧密相连且容易理解
  3. 单项数据流   数据一旦更新，则直接重新渲染整个APP 管理UI状态并不简单
  • 修改DOM树
  • 修改数据
  • 接收用户输入
  • 异步API数据请求

　　和传统的服务器端渲染相似

传统方式

React的渲染方式

浏览器请求页面

用户输入

服务器请求数据库

从API获取数据

将数据传给模板

将数据传给顶层组件

模板渲染页面

React将每个组件渲染出来

　　将不再有如下缺点：

  1. 双向数据绑定
  2. 数据模型的肮脏检查dirtychecking
  3. 确切的DOM操作

　　好处：

  1. 每个组件是干啥的，很直观
  2. 结果可以预测
  3. 组件间的关系更清晰

　　一个react组件可以理解为一个独立的函数

  1. 接受参数props
  2. 可复用
  3. 可以传递
  4. 返回结果（渲染组件）

4.虚拟DOM树

在每一次更新时，

  • React重建DOM树
  • 找到与上个版本的DOM的差异
  • 计算出最新的DOM更新操作
  • 从操作队列中批量的执行DOM更新操作

可以在Node.js中运行【服务器端】

  • 服务器与客户端公用逻辑Isomorphic javascript
  • SEO友好，便于生成缓存的单页应用
  • 直接渲染特定的页面而不用渲染整个App

JSX

Javascript的XML的语法扩展

采用易于理解的语法来定义DOM树

 

转载于:https://www.cnblogs.com/codepen2010/p/6832194.html

weixin_30562507
关注
day1--react基础语法
coder_66l的博客
04-07 904
react基础语法
react-day-picker：React的轻量级日期选择器组件
02-03
npm install react-day-picker import DayPicker from " react-day-picker " ; import " react-day-picker/lib/style.css " ; export default function Hello () { return ; } 文献资料 在卡住？ v8即将到来！ 下...
react-day-picker 库里日期选择器 中文展示
weixin_48648178的博客
05-25 784
react-day-picker 库里日期选择器 中文展示。
react-day-picker 时间菜单一直显示
徐同保的专栏
12-20 433
http://react-day-picker.js.org/api/DayPickerInput showOverlay boolean = false Show the overlay during the initial rendering of the component. This is useful if you want to keep the overlay visibile while styling it. showOverlay 值设置为true即可 ...
React入门-day01
qq_45970110的博客
12-06 1272
JSX是JavaScript和XML（HTML）的缩写，表示在JS代码中编写HTML。本质就是JS的语法扩展，浏览器本身不能识别，需要通过解析工具做解析之后才能在浏览器中运行。工具：babeljs.io//既要传递自定义参数，而且还要事件对象econsole.log('button被点击了',name)概念：一个组件就是用户界面的一部分，它可以有自己的逻辑和外观，组件之间可以互相嵌套，也可以复用多次。React组件：在React中，一个组件就是首字母大写的函数。
day04--react中state的简化
weixin_51938803的博客
04-27 361
答：对于创建一个实例对象时，我们对要传进来的数据进行接收，那么我们必须要写一个构造器来接收传进来的数据，但是如果我们要定义的数据是固定的，那么就可以不使用构造器的形式，而是使用赋值语句的方式定义一个属性接收数据。既然我们要传的数据是固定的，那么就不需要构造器，直接使用赋值语句的方式定义属性，那么通过赋值语句定义的属性都会放在实例对象身上。而对于下面的switchover 方法来说，必须使用箭头函数的形式，此时的this指向的就是实例对象，否则this为undefined。state是在构造器里面定义的。
React学习-day01
m0_61535334的博客
12-05 433
day-01 react React 是一个用于构建用户界面的 JavaScript 库。 react特点 声明式 组件式 一次学习,随处使用 使用 React 除了可以开发 Web 应用，还可以使用 React Native 开发原生移动应用，甚至可以开发 VR（虚拟现实）应用（React 360）。 react基本使用 1.下包 npm i react react-dom 2.引入js文件 先引入react,再引入react-dom 3.创建react元素 4.渲染react元素 [外链图片转存失
Day02-React基础2
qq_40884528的博客
08-17 862
自定义Hook是以use开头的函数，通过自定义Hook函数可以用来实现逻辑的封装和复用。
黑马react-Day01
weixin_53777282的博客
05-21 388
三元：如果loading为true，则第一个span标签显示，如果为false，则第二个span标签显示。&&：如果flag为true，则span标签显示，如果为false，span不显示。运行项目：npm start。
React学习 day-08 （React Router）
m0_61535334的博客
12-16 245
day-08 08_React Router 发表于 2021-11-20 更新于 2021-12-14 今日目标 ✔ 了解什么是单页应用。 ✔ 掌握 react-router-dom 的使用。 了解 SPA 网易云音乐。 SPA： Single Page Application 单页面应用程序，整个应用中只有一个页面（index.html）。 MPA : Multiple Page Application 多页面应用程序，整个应用中有很多个页面（*.html）。 优势：页面响应速度快，体
执行 npx create-react-app时候出错
qq_36359324的博客
02-08 2874
1.第一个报错，找不到npm404找不到日志文件 2.切换淘宝镜像，npm404找不到淘宝镜像 3.发现在创建项目的文件夹下出现package-lock.json并且是webstorm图标，不会改，直接删除webstorm。 4依旧报错，npm404找不到淘宝镜像，改成本地镜像，依旧找不到 ...
web-day-56-more-router-react-devtool-conditional-format
03-17
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何...
react-day-select:React日选择
04-18
npm i react-day-select --save 或通过纱线： yarn add react-day-select 用法 这是基本用法示例： import React, { useState } from ' react ' ; import DatePicker from ' react-day-select ' ; function ...
day-17-sw-api-flux-react-router
04-17
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何...
轻量级的日期选择器组件，用于React-React开发
05-27
react-day-picker是React的灵活日期选择器组件。 没有外部依赖项可以选择日期，范围，无论使用CSS修饰符准备进行本地化的方式如何，即使使用通过keyb导航的moment.js可自定义样式，react-day-picker都是React的灵活...
Echarts 折线图
weixin_44443380的博客
11-08 244
解决方法：设置emphasis.lineStyle和折线图本身lineStyle相同即可。问题：鼠标悬停在折线图上，折线变粗。3、去掉 hover 折线变粗方法。
每天10个vue面试题(九)
最新发布
不熬夜的臭宝的博客
11-08 597
一天10个vue面试题喽！
上门理发系统的搭建
app830的博客
11-07 390
上门理发系统的搭建涉及多个方面，包括技术架构、功能模块、用户体验以及运营策略等。服务器：部署应用到云服务器（如AWS、阿里云）或本地服务器上，确保系统的稳定性和可扩展性。消息通知：通过短信、邮件或APP推送等方式，向用户发送预约确认、提醒等消息。订单管理：用户可以查看自己的预约订单，包括待付款、已付款、已完成等状态。服务浏览与选择：展示各类理发服务，包括价格、时长、适用人群等信息。在搭建过程中，要确保系统的安全性和稳定性，防止数据泄露和系统崩溃。操作便捷：优化用户操作流程，减少不必要的步骤，提高用户体验。
JavaScript数据类型- BigInt详解（处理任意大小整数的终极指南）
cx18333的博客
11-05 529
随着ECMAScript 11（ES11）引入了BigInt，JavaScript开发者现在可以轻松地处理超出传统Number类型限制的大整数。本文全面解析了BigInt的使用方法、核心特性和限制条件，为你提供了处理大型整数数据的强大工具。从BigInt的基础用法到算术运算和比较，再到类型检查和兼容性考量，一步步的深入了解这个新的数据类型。
<div class="d-flex jc-between px-2"> <div class="d-flex aside-width"> <div class="react-left ml-4 react-l-s"> <span class="react-before"></span> <span class="text">{{ subtitle[0] }}</span> </div> <div class="react-left ml-3"> <span class="text">{{ subtitle[1] }}</span> </div> </div> <div class="d-flex aside-width"> <div class="react-right bg-color-blue mr-3"> <span class="text fw-b">{{ subtitle[2] }}</span> </div> <div class="react-right mr-4 react-l-s"> <span class="react-after"></span> <span class="text"> {{ timeInfo.dateYear }} {{ timeInfo.dateWeek }} {{ timeInfo.dateDay }} </span> </div> </div> </div>解释代码
06-06
具体来说，这段代码包含了一个 flexbox 容器，容器内部分为左右两个部分，左部分包含了两个子元素，右部分也包含了两个子元素。左侧子元素包含了一个标题和一个副标题，右侧子元素包含了一个状态和一个日期。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值