react.js
文章平均质量分 60
雨穆笙
这个作者很懒,什么都没留下…
展开
-
十、children的深入用法-React.Children对象上的方法
上图中我们看到了,我们之前学过的React.createElement方法,现在大家发现jsx的内容,全部都体现在了该方法上;那么React.createElement其实是有三个参数的,第三个参数被称之为children,也就是子元素;看下图: 这个时候,第三个参数也体现出来了; 那么我们可以发现children其实也是外部传递的数据,只不过传递的是react元素。那么我们在组件的内部应该用this.props.children去接收这些元素; 在组件的内部:我们已经知道在组件的内部如何获取到ch原创 2022-11-17 20:40:53 · 1028 阅读 · 0 评论 -
九、propTypes验证
理解类型验证的必要性灵活掌握类型验证的使用安装引入和使用基本的使用格式如下:基本的类型验证如下还有一些辅助方法instanceOf 使用形式如下: 这个方法表示验证类型必须是某个类的实例,上述代码表示传入的参数必须是Array的实例;一般这个方法会接收一个类;oneOf 使用形式如下: 这个方法用来规定传入的属性必须是给定值中的一个,上述代码表示传入的值只能是’news’或者’photos’,一般该方法接收一个数组,数组的元素则为供选择的值oneOfType 使用形式如下 这个方法表示原创 2022-11-16 17:42:32 · 719 阅读 · 0 评论 -
八、什么是纯函数-组件的性能优化-pureComponent-组件性能优化的原理
foo 函数不是一个纯函数,因为它返回的结果依赖于外部变量 a,我们在不知道 a 的值的情况下,并不能保证 foo(2) 的返回值是 3。虽然 foo 函数的代码实现并没有变化,传入的参数也没有变化,但它的返回值却是不可预料的,现在 foo(2) 是 3,可能过了一会就是 4 了,因为 a 可能发生了变化变成了 2。现在 foo 的返回结果只依赖于它的参数 x 和 b,foo(1, 2) 永远是 3。今天是 3,明天也是 3,在服务器跑是 3,在客户端跑也 3,不管你外部发生了什么变化,foo(1,原创 2022-11-16 17:41:40 · 165 阅读 · 0 评论 -
七、组件的高级用法-组件的组合(children的用法)-高阶组件-封装组件
在组件传值时,不光可以传递变量,函数,也可以传递标签,通常我们使用两种方式传递标签: 1 通过属性传递标签,子组件接收时使用this.props。简而言之,就是受到状态state控制的表单,表单的值改变则state值也改变,受控组件必须要搭配onchange方法,否则不能使用。2 将组件写成双标签,包住要传递的标签,子组件接收时使用this.props.children。高阶函数是一个函数,它接收函数作为参数或将函数作为输出返回。高阶组件是一个组件,它接收组件作为参数,并将组件作为输出返回。原创 2022-11-16 17:39:57 · 420 阅读 · 0 评论 -
六、react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参
1.组件和组件之间的关系 (1)父子 props (2)子父 回调函数 context (3)嵌套 props context (4)并列 redux mobx(公共数据管理仓库) 全局变量 (暂时不讲)2.在根组件(需要提供数据或方法的组件)套上一个Provider, 把值赋给属性value 在接收数据或函数方法的组件上套上一个Consumer。子向父传值 是父组件向子组件传一个函数名字 子组件去调用,在调用函数时通过参数传给父组件。4.嵌套传值 嵌套组件传值和父子传值都可用 context。原创 2022-11-16 17:29:14 · 525 阅读 · 0 评论 -
五、事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制
react中的合成事件就是利用了事件传递的这种特性,所有的元素事件触发,肯定会传递到document身上,react中为了节省性能,我们写在虚拟dom中的事件,其实在编译的时候,都被挂载到了document这个元素上,只是react自己实现了一套事件系统,可以记录真正触发的元素是那个,以及其他相关的信息。而所谓的事件传递指的是当在A元素上触发某一事件的时候,B元素如果满足了和A元素一定的关系的话,那么B元素上也可能触发改事件(即使B元素未添加该事件);这个元素的话,哪些元素会触发事件,且顺序是怎样的?原创 2022-11-16 17:26:40 · 692 阅读 · 1 评论 -
四、ref与DOM-findDomNode-unmountComponentAtNode
理解react的框架使用中,真实dom存在的意义。灵活掌握并能够合理使用操作真实dom的方法。使用真实dom和使用虚拟dom的场景。原创 2022-11-16 17:25:49 · 516 阅读 · 0 评论 -
三、react组件的生命周期
销毁期指的是组件被卸载的时候,此时有一个声明周期函数会执行:(一般这个生命周期函数中可以做一些清除的工作)灵活掌握react组件的生命周期以及组件的活动过程。中去调用请求接口,也不要去写太多的逻辑、不要调用。这些生命周期中初始化调用请求接口。能够灵活使用react的生命周期。每个生命周期接收的参数。原创 2022-11-16 17:23:09 · 391 阅读 · 0 评论 -
二、react的组件-state-props-setState
组件中的状态(state)是和组件的视图对应的,状态决定了视图的呈现,每个组件都有自己独立的状态。组件的内部的状态是可以随意改变的,状态的改变意味着视图的呈现也发生了变化。组件中的属性(props)是来在组件调用的时候,从外部传入组件内部的。在组件内部属性是不能被改变的。属性的数据在一定程度上也决定了视图的呈现。想要改变组件内部的状态,从而让视图也跟着更新需要执行。原创 2022-11-16 17:22:26 · 403 阅读 · 0 评论 -
一、react简介
的语法(有值的表达式),其中的值可以是 数字、字符串、null、布尔、undefined 或者react元素(虚拟dom),如果是数组的话,则会自动的把数组中的元素展开。只会让前端越来越复杂,因此react就诞生了,react只关注与视图层,官方对react的定位是:一个快速构建前端视图的javaScript库。react中引入静态资源(css、图片),其实是webpack使用对应的loader加载了资源,并进行了打包。则以虚拟dom的方式解析,遇到。其虚拟dom的表示方法为。原创 2022-11-16 17:20:54 · 598 阅读 · 0 评论 -
分享web前端开发的一些面试经验(持续更新中……)
面试过程中的态度也要掌握好,不要自卑,也不要傲娇,自信的回答出每个问题,尤其遇到不会的问题,要么做一些引导,实在不能引导也可以先打打擦边球,和面试官交流一下问题,看起来像是没听懂题意,这个过程也可以再自己思考一下,如果觉得这个过程可以免了的话也直接表明一下这个地方不太熟悉或者还没有掌握好,千万不要强行回答。那我们主要来说技术面,技术面的话主要是考察专业技术知识和水平,我们是可以有一定的技巧的,但是一定是基于有一定的能力水平的。最重要的肯定是系统的学习了,有一个知识的框架,基础知识的牢靠程度等。原创 2022-09-12 08:02:17 · 681 阅读 · 0 评论