首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

2020面试题--小试牛刀

7.对象和数组解构 8.对象超 9.for...of 和 for...in 10.ES6中 *问题:什么是闭包?...答: 闭包就是能够读取其他函数内部变量函数。例如在javascript中,只有函数内部子函数才能读取[局部变量],所以闭包可以理解成“定义在一个[函数]内部函数“。...undefined 是 Undefined 类型唯一值,它表示未定义值。当声明变量未赋值时,或者定义属性未设置值时,默认值都为 undefined。 *问题:promise是什么?...只有异步操作结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是Promise这个名字由来,它英语意思就是“承诺”,表示其他手段无法改变。...答:受控组件就是可以被 react 状态控制组件,绑定了value属性和onChange方法,value为当前组件state,onChange将触发setState *问题:useEffect返回值一般什么时候用

1.1K20
您找到你想要的搜索结果了吗?
是的
没有找到

Webpack5构造React多页面应用

来源 | https://github.com/zhedh/react-multi-page-app/ 介绍 react-multi-page-app是一个基于webpack5构造react多页面应用...为什么建造多页面应用: 多个页面之间业务互不关联,页面之间并没有共享数据 多个页面使用同一个一个服务,使用通用组件和基础库 建造多页面应用好处: 保留了传统单页应用开发模式:支持补充打包,你可以把每个页面看成是一个单独单页应用...独立部署:每个页面相互独立,可以单独部署,解压缩项目的复杂性,甚至可以在不同页面选择不同技术栈 减少包体积,优化加载渲染流程 快速上手 克隆 git clone https://github.com...sass-loader' ] }, ] }, // ... } 安装依赖 yarn add -D resolve-url-loader sass-loader 到此,一个完整React.../,喜欢给个star 问题与解答 无法读取未定义属性“ createSnapshot” 报错:UnhandledPromiseRejectionWarning:TypeError:无法读取未定义属性

3.6K20

解密传统组件间通信与React组件间通信

中将两个情况统一处理,全部通过属性来完成,之所以能够这样是因为React属性更新时会自动重新渲染子组件, 下面的例子中,2秒后子组件会自动重新渲染,并获取新属性值 class Child extends...需要双向声明,也就是在祖先组件声明属性,并在后代组件上再次声明属性,然后在祖先组件上放上属性就可以了,就可以在后代组件读取属性了,下面看一个例子 import PropTypes from 'prop-types...context来传递,比如登录用户信息等 小贴士:React Router路由就是通过context来传递路由属性 兄弟组件 如果两个组件是兄弟关系,可以通过父组件作为桥梁,来让两个组件之间通信,这其实就是主模块模式...需要双向声明,也就是在祖先组件声明属性,并在后代组件上再次声明属性,然后在祖先组件上放上属性就可以了,就可以在后代组件读取属性了,下面看一个例子 import PropTypes from 'prop-types...context来传递,比如登录用户信息等 小贴士:React Router路由就是通过context来传递路由属性 兄弟组件 如果两个组件是兄弟关系,可以通过父组件作为桥梁,来让两个组件之间通信,这其实就是主模块模式

1.5K10

来自1000多个项目的10大JavaScript错误浅析

在Chrome里读取未定义对象属性或调用未定义对象方法时就会发生这个错误,在Chrome开发者控制台可以很容易地重现这个错误。...我们选择React作为示例,不过在其他框架(Angular、Vue等)中也是一样。...TypeError: ’undefined’ is not an object 在Safari里读取未定义对象属性或调用未定义对象方法时就会发生这个错误,在Safari开发者控制台可以很容易地重现这个错误...TypeError: Object doesn’t support property 在IE里读取未定义对象属性或调用未定义对象方法时就会发生这个错误,在IE开发者控制台可以很容易地重现这个错误。...Uncaught TypeError: Cannot set property 我们无法对undefined变量进行赋值或读取操作,否则的话会抛出“Uncaught TypeError: cannot

6.2K80

JavaScrip最容易犯十大错误及其避免方法()

Uncaught TypeError: Cannot read property 如果你是一个javascript开发者,你肯定看到过此错误 读取属性或调用方法对象未定义 这可能由于许多原因而发生,...让我们看一个在真实应用程序中如何发生这种情况示例。 我们将选择React,但不正确初始化相同原则也适用于Angular,Vue或任何其他框架。...反过来,这意味着ItemList将项目定义为未定义,并且您在控制台中收到错误 - “Uncaught TypeError:无法读取未定义属性’map’”。 这很容易解决。...Uncaught TypeError: Cannot set property 当我们尝试访问未定义变量时,它总是返回undefined,我们无法获取或设置undefined任何属性。...在这种情况下,应用程序将抛出“Uncaught TypeError无法设置未定义属性”。 10.

12210

React两大组件,三大核心属性,事件处理和函数柯里化

编译后,会开启严格模式,因此函数组件中this指向undefined 原理 注意 Class复习 式组件 原理 组件实例三大核心属性----state属性,和class组件 react事件绑定...方法对state属性进行更新,且更新是一种合并,同名替换,不同名合并 组件总结 state简写方式 中可以直接写赋值语句,相当于给实例对象增添了一个属性 属性是放在实例对象身上,而方法是放在原型对象身上...React事件处理 受控和非受控组件 非受控组件---现用现取 受控组件---省略ref 函数柯里化 []方式读取对象属性 不使用函数柯里化写法 入门 ---- 相关js库 1.react.js...否则,this.props 在构造函数中可能会出现未定义 bug。...大写这个是导入js包后,全局新增一个对象,而Person.propTypes是我们需要给上添加一个属性react底层会去寻找当前上名字相同属性,然后进行遍历,设置对应类型限制和默认值 -

3.1K10

前端react面试题合集_2023-03-15

JSX 代码本身不能被浏览器读取,必须使用Babel和webpack等工具将其转换为传统JS。很多开发人员就能无意识使用 JSX,因为它已经与 React 结合在一直了。...中实现:通过给函数传入一个组件(函数或)后在函数内部对该组件(函数或)进行功能增强(不修改传入参数前提下),最后返回这个组件(函数或),即允许向一个现有的组件添加新功能,同时又不去修改该组件...使用它来从DOM读取布局并同步重新渲染(2)React16.9重命名 Unsafe 生命周期方法。...react高阶组件React高阶组件主要有两种形式:属性代理和反向继承。...属性代理 Proxy操作 props抽离 state通过 ref 访问到组件实例用其他元素包裹传入组件 WrappedComponent反向继承会发现其属性代理和反向继承实现有些类似的地方,都是返回一个继承了某个父子类

2.8K50

1000多个项目中十大JavaScript错误以及如何避免

当你读取一个属性或调用一个未定义对象方法时,Chrome 中就会报出这样错误。 ? 导致这个错误发生原因有很多,常见一种情况是在渲染 UI 组件时,不正确地初始化状态。...这是在 Safari 中读取属性或调用未定义对象上方法时发生错误,这与 Chrome 上述错误基本相同,只是 Safari 使用不同错误消息。 ? 3....这是在 Safari 中读取属性或调用空对象上方法时发生错误。 ?...TypeError: Cannot Read Property ‘length’ 这是 Chrome 中发生错误,因为读取未定义长度属性变量。 ?...Uncaught TypeError: Cannot Set Property 当尝试访问未定义变量时,总会返回 undefined。我们也无法获取或设置 undefined 任何属性

8.3K40

深入 React 高阶组件

这可以用于读取、增加实例属性,或调用实例方法。 抽象 state 通过提供给被包裹组件属性和回调,可以抽象 state,这非常类似于 smart 组件是如何处理 dumb 组件。...HOC (强化过)继承了被包裹组件。...出于定制样式目的包裹元素树(正如属性代理中展示) *用 render 引用被包裹组件 render 方法 不能对被包裹组件实例编辑或创建属性,因为一个 React Component 无法编辑其收到...如果那个元素数包含了一个函数类型 React Component,那就无法操作其子组件(被 React 一致性比较过程延迟到真正渲染到屏幕上时)。...将无法在外部访问父元素 state,除非特意为止创建钩子。这限制了其实用性 包裹新 React Elements。

82510

React 开发必须知道 34 个技巧【近1W字】

/> xxx this.props.history.push({pathname:"/path/" + name}); 读取参数用:this.props.match.params.name...,我们定义一个组件时候通常是定义了一个,而static则是创建了一个属于这个属性或者方法 2.组件则是这个一个实例,componentprops和state是属于这个实例,所以实例还未创建...3.所以static并不是react定义,而加上static关键字,就表示该方法不会被实例继承,而是直接通过来调用,所以也是无法访问到 this 4.getDerivedStateFromProps...也是通过静态方法监听值,详情请见技巧 6 10.constructor和super 回顾: 1.谈这两个属性之前,先回顾一下ES6 函数定义方法 2.每一个使用class方式定义默认都有一个...作用:当组件输入属性相同时,可以使用 pureComponent 或 shouldComponentUpdate 来避免组件渲染。

3.4K00

分享 30 道 TypeScript 相关面的面试题

10、readonly 关键字如何改变 TypeScript 变量或属性? 答案:readonly 关键字当作为变量或属性前缀时,可确保一旦设置其值,此后就无法修改。...答案:TypeScript 支持继承,就像 ES6 一样。使用extends关键字,一个可以继承另一个属性和方法,提高代码可重用性并建立基和派生之间关系。...派生还可以重写继承方法或属性,甚至用新方法或属性扩展对象结构。 13、装饰器在 TypeScript 中扮演什么角色?...它通过指示不应或无法到达某个代码路径来帮助确保类型安全。 17、如何将 TypeScript 与 React 这样框架集成?...,它允许读取位于连接对象链深处属性值,而无需检查链中每个引用是否有效。如果任何引用为 null 或未定义,则表达式会与未定义值短路。 空合并运算符 (??)

65230

React路由

Route, Link } from 'react-router-dom' Link与NavLink Link组件最终会渲染成a标签,用于指定路由导航 to属性,将来会渲染成a标签href属性 Link...组件无法实现导航高亮效果 NavLink组件,一个更特殊Link组件,可以用用于指定当前导航高亮 to属性,用于指定地址,会渲染成a标签href属性 activeClass: 用于指定高亮名,...默认active exact: 精确匹配,表示必须精确匹配名才生效 Route path 说明 默认情况下,/能够匹配任意/开始路径 如果 path 路径匹配上了,那么就可以对应组件就会被.../ 通过/home可以匹配Home父组件 再通过/list匹配子组件 编程式导航 场景:点击登录按钮,登录成功后...编程式导航:通过 JS 代码来实现页面跳转 history 是 React 路由提供,用于获取浏览器历史记录相关信息 push(path):跳转到某个页面,参数 path 表示要跳转路径 go(n

1.9K20

vue 随记(4):响应式进化

、pop、直接通过索引为数组添加元素时会触发属性agetter,是因为与这些操作返回值有关,以push方法为例,使用push方法为数组添加元素时,push方法返回值是添加之后数组新长度,当访问数组新长度时就会自然而然触发属性...「修改 data 上任意 key」 和 「读取 data 上任意 key」。...在vue 3中负责响应式部分仓库名为 @vue/rectivity,它不涉及 Vue 其他任何部分,甚至可以轻松集成进 React[注]。是非常非常“正交” 实现方式。...分别对应简化实现中Dep.depend和Dep.notify。 •track 用来在读取时收集依赖。•trigger 用来在更新时触发依赖。 在vue3中,Dep不再是一个class。...因为是一个特殊effect,读取computedvalue属性时候,即可执行计算。

66620

React 开发要知道 34 个技巧

/> xxx this.props.history.push({pathname:"/path/" + name}); 读取参数用:this.props.match.params.name...,我们定义一个组件时候通常是定义了一个,而static则是创建了一个属于这个属性或者方法 2.组件则是这个一个实例,componentprops和state是属于这个实例,所以实例还未创建...3.所以static并不是react定义,而加上static关键字,就表示该方法不会被实例继承,而是直接通过来调用,所以也是无法访问到 this 4.getDerivedStateFromProps...作用:当组件输入属性相同时,可以使用 pureComponent 或 shouldComponentUpdate 来避免组件渲染。...App extends React.Component{ render(){ const authPath = '/login' // 默认未登录时候返回页面,可以自行设置

1.5K31

Antd Form 实现机制解析

FieldsStore 可以理解为组件数据管理中心,负责数据模型初始化,并提供 Api 对组件数据进行更新和读取,以及获取组件数据校验结果和数据更改状态。...Form 组件流程分析 我们通过 Antd Pro 中登录页面的实现来一起看一下,Form 内部调用流程。...rc-form 架构 通过上面的图我们可以看到 FieldsStore 包含两个属性,fields 和 fieldsMeta,fields主要用来记录每个表单项实时数据,包含以下属性: dirty...在子组件 Render 执行过程中, getFieldDecorator 方法从 fieldStore 中读取实时表单数据以及校验信息,并通过注入 value 或者 valuePropName 值设定属性来更新表单...提供受控属性 value 或其它与 valuePropName 值同名属性 提供 onChange 事件或 trigger 值同名事件 支持 ref: React@16.3.0 之前只有 Class

2.6K20

【前端面试题】03—200+道常见JavaScript基础面试题上(附答案)

比如一个黑客,他利用 Iframe把真正银行登录页面嵌到他页面上,当你使用真实用户名、密码登录时,他页面就可以通过 Javascript读取到你表单上 Input中内容,这样黑客就会轻松得到你用户名和密码...29、如何判断一个对象是否属于某个? 使用 instanceof关键字,判断一个对象是否是实例化对象;使用 constructor属性,判断一个对象是否是构造函数。...var x=l, y=2, z= X+y; 59、什么是未声明和未定义变量? 未声明变量是程序中不存在且未声明变量。如果程序尝试读取未声明变量值,则会在运行时遇到错误。...未定义变量是在程序中声明但尚未给出任何值变量如果程序尝试读取未定义变量值,则返回未定义值60.:如何编写可动态添加新元素代码? 下面给出一段示例代码 <!...可以在数组末尾处添加成员arr[ arr length]= value;或者调用push方法 arr.push(value)。 94、解释一下for-in循环。 for-in循环用于循环对象属性

4.4K10
领券