10.vue和react一起学 (*^_^*)

最新推荐文章于 2023-12-21 13:32:30 发布
最新推荐文章于 2023-12-21 13:32:30 发布
阅读量222 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45490588/article/details/106699798
版权
vue 同时被 2 个专栏收录
23 篇文章 0 订阅
订阅专栏
react
11 篇文章 0 订阅
订阅专栏

静态类型校验

react

react 中自带了校验的库 PropTypes ，但是好像还是ts好用。
两者的校验方式对比如图1-1和图1-2。

在这里插入图片描述

图1-1

截图来自—— react官方文档

在这里插入图片描述

图1-2

如果是库文件去支持校验是无法在runtime之前就能知晓类型缺失或错误的，必须要等到运行后，浏览器终端抛出警告或错误才能得知。可以看下下面的vue源码，我想react的PropTypes内部实现也是类似的。这样就很耗时。而typescript在使用时直接就标红错误的地方。这一点的效率就很高。

vue

toString浏览器内置对象构造函数以判断props的类型。
在这里插入图片描述

图1-3
可以在浏览器中试着去使用这个方法：

在这里插入图片描述

图1-4

最后得知props限定得类型后，如果输入的类型错误则在终端抛出警告。
在这里插入图片描述

图1-5

总之，javascript框架要做静态类型校验还是选择typescript比较好。使用插件库支持不论在可读性和提高效率上都是不及前者的。

林柏川
关注
专栏目录
Vue与React、Angular的比较
youhebuke225的博客
05-26 862
Vue、React和Angular是前端开发中三个流行的JavaScript框架，它们各自具有不同的特点、优势和适用场景。
1.vue和react一起学 (*^_^*)
l_b_c的博客
05-28 368
先对比一下vue与react各自的creatElement函数。 vue <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> &lt
2.vue和react一起学 (*^_^*)
l_b_c的博客
05-30 442
是不是觉得写createElement很抽象？vue和react官方都是提供了相应的转化jsx的支持，这些支持靠的的强大的转换器babel。 react 1.安装依赖以及相关配置 首先我们cd 到 react-jsx目录下，npm init -y初始化项目。 cd react-jsx && npm init -y 安装babel相关依赖 npm i --save-dev @babel/core @babel/cli @babel/preset-react 对babel相关配置，预设@b
7.vue和react一起学 (*^_^*)
l_b_c的博客
06-06 356
代码分割 前面都是使用直接通过script引入的方式使用react或者vue框架，然而这种方式，我们得要考虑全局污染、兼容性、代码优化、依赖关系等众多问题。为了让我们的精力更多地放在框架学习上面，从这里开始我们使用构建工具管理我们的程序，当然不是自己去搭建配置。我们使用的是create-react-app或者vue-cli去使用通用的构建配置。 全局安装： npm install -g @vue/cli react 创建通用构建配置的react-app npx create-react-app my-ap
9.vue和react一起学 (*^_^*)
l_b_c的博客
06-09 280
高阶组件（hoc） 高阶组件： 高阶组件是参数为组件，返回值为新组件的函数。 react里面有高阶组件的概率。vue虽然没有显式提出高阶组件大，但它也有高阶的影子。 react import React from "react"; class Plan { subs; constructor(plans) { this.plans = plans; } addSubs(target) { this.subs.push(target);
react 之 prop-types
catchmypow的博客
10-04 4018
react 之 prop-types 在开发过程当中，经常会用到Prop的type校验，但是React.PropTypes和React.createClass这两个功能在React 15.5之后版本被废弃了，所以从15.5版本开始，须要引入prop-types包来使用props校验。 使用步骤 安装prop-types第三方包 yarn add prop-types //yarn npm install prop-types //npm 导入 import PropTypes form 'pr
面试题：react和vue的区别分析
10-17
React和Vue是当前前端开发领域流行的两大框架，它们各自拥有独特的设计哲学和开发理念。以下从几个维度详细分析了React和Vue的区别。 ### MVC和MVVM设计模式 React和Vue在设计上分别采用了不同的设计模式。React...
面试官：谈谈Vue和React的区别？
热门推荐
程序员成长指北
03-29 3万+
在我之前写的localStorage与Vuex的区别 这篇文章中讲过关于这个类型的题目，其中分析过描述区别，就是求同存异的过程。那接下来我用同样的思路来解这道题目。首先找到 Vue 和 ...
VUE React Angular
DRX0815的博客
01-24 2636
Typescript, ES6 & ES5 React 专注于使用 Javascript ES6 Vue 使用 Javascript ES5 或 ES6 Angular 依赖于 TypeScript 模板 —— JSX 还是 HTML React — JSX：可以理解为在JS中编写与XML类似的语言,一种定义带属性树结构（DOM结构）的语法，它的目的不是要在浏览器或者引擎中实现，它的目的是通过各种编译器将这些标记编译成标准的JS语言 Vue 具有“单个文件组件” Angular 模板使
一个同时支持Vue、React、Flutter的项目脚手架.zip
10-22
标题中的“一个同时支持Vue、React、Flutter的项目脚手架”表明这是一个跨前端框架的开发工具，旨在帮助开发者快速初始化并管理同时包含Vue、React和Flutter组件的项目。这样的脚手架通常会提供自动化配置、构建脚本...
react proptypes
qq_45623378的博客
12-07 773
组件约束
PropTypes 在 React 中的使用心得
天问博客-专注于大前端技术
12-21 2457
在 React 开发中，PropTypes 是一个非常有用的库，用于对组件的属性进行类型检查。它可以帮助我们在开发过程中捕获潜在的错误，提高代码的可靠性和可维护性。本文将介绍 PropTypes 的基本用法和一些使用心得。
React组件属性类型（propTypes）校验
yong_bu_ting_zhi的专栏
09-24 1302
Prop 验证 随着应用不断变大，保证组件被正确使用变得非常有用。为此我们引入propTypes。React.PropTypes 提供很多验证器 (validator) 来验证传入数据的有效性。当向 props 传入无效数据时，JavaScript 控制台会抛出警告。注意为了性能考虑，只在开发环境验证 propTypes。下面用例子来说明不同验证器的区别： React.createCla...
react中props验证
zhoulib__的博客
01-10 558
React.PropTypes 在 React v15.5 版本后已经移到了 prop-types 库。 <script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script> Props 验证使用 propTypes，它可以保证我们的应用组件被正确使用，React.PropTypes...
React中的propTypes
JohnZhongJob的博客
01-09 1122
    在多人开发时，当被人使用自己定义的组件时，有可能出现类型传错的情况，而在自己的组件上加上prop-types，他可以对父组件传来的props进行检查，加入父组件中想传递的是字符串类型‘3’，而传递了一个数字类型3，如果没有类型检查系统不会给与提示，但是有了类型检查以后，再控制台会给你一个类型传递错误的提示。这样在工作中可以快速找到错误。    首先，在React V15.5以前propT...
React
是草莓味的啊
05-15 340
一、状态提升 共享状态是通过将其移动到需要它的组件的最接近的共同祖先组件来实现 用户对子组件操作，子组件不改变自己的状态，通过自己的props把这个操作改变的数据传递给父组件，改变父组件的状态，从而改变受父组件控制的所有子组件的状态，这也是React单项数据流的特性决定的。 二、Hook 系统自带Hook与自定义Hook都只能在1.其他Hook中运行 2.组件中运行 2.1.系统自带Hook 2.1.1.useState 2.1.2.useEffect 2.2.自定义Hook Customer H
React中的PropTypes详解
weixin_30315723的博客
05-31 268
propTypes用来规范props必须满足的类型，如果验证不通过将会有warn提示。 React PropTypes的种类有： React.PropTypes.array // 队列 React.PropTypes.bool.isRequired // Boolean 且必须 React.PropTypes.func // 函数 ...
【05】基础知识：React组件实例三大核心属性 - props
weixin_45559449的博客
10-14 766
理解1、每个组件对象都会有 props（properties的简写）属性2、组件标签的所有属性都保存在 props 中作用通过标签属性从组件外向组件内传递变化的数据注意组件内部不要修改 props 数据需求：自定义用来显示一个人员信息的组件姓名必须指定，且为字符串类型；性别为字符串类型，如果性别没有指定，默认为男年龄为字符串类型，默认为18 2、对 props 进行限制 React 中使用 propTypes 对标签属性进行类型、必要性的限制React.PropTypes 形式 React v15.5 开始
React PropTypes 的使用
mslmhl的博客
06-11 2215
React PropTypes 的使用 参考：https://react.docschina.org/docs/typechecking-with-proptypes.html 在所使用 PropTypes 的页面中引入 ‘prop-types’；如果你是用脚手架创建的项目就不用下载这个包，直接引用就行 import PropTypes from 'prop-types'; 1. PropTypes 提供一系列验证器，可用于确保组件接收到的数据类型是有效的 2. 通过类型检查捕获大量错误 3. PropT
建议学习vue还是React
最新发布
11-06
在选择学习Vue还是React时，需要考虑个人的兴趣、技术背景和项目需求。以下是一些基本的建议： 1. 兴趣：如果对JavaScript或前端开发感兴趣，React和Vue都是很好的选择。它们都是基于JavaScript的库，并具有丰富的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值