在线客服
扫描二维码
下载博学谷APP扫描二维码
关注博学谷微信公众号
如何深入理解JSX和React组件?JSX其实是JavaScript对象,所以使用 React和JSX的时候一定要经过编译的过程。React核心机制虚拟DOM,可在内存中创建的虚拟DOM元素。React利用虚拟DOM减少对实际DOM的操作提升性能,虚拟DOM也可以通过JavaScript来创建。
Reactjs 起源于Facebook内部项目,是一个用来构建用户界面的 javascript 库,相当于MVC架构中的V层框架,与市面上其他框架不同的是,React 把每一个组件当成了一个状态机,组件内部通过state来维护组件状态的变化,当组件的状态发生变化时,React通过虚拟DOM技术来增量并且高效的更新真实DOM。
1)、JSX的优势和局限
1、把相关的code放到一起,好维护,这样就是一个单独的组件所必须的。
2、render函数是一个纯函数,没有做渲染的事情,它只不过就是返回了一些指令,然后通过这些指令由React通过DOM或者虚拟DOM来进行操作,所以react返回的结果都是通过 React.createElement产生的结果
3、jsx中的{}中只能是一个表达式,不能是一个语句,因为jsx可以通过babel转换成React.createElement的形式进行渲染,但是React.createElement中的参数只能是一个表达式,不能是一个语句(比如for循环、if判断等),同时jsx中的render函数的{}中不能使用push()、reverse()等数组方法,因为render应该是一个纯函数,纯函数不应该有副作用,渲染的应该是state或者props,如果使用了push()、reverse()等数组方法,那么就会直接修改state或者props里面的数据,而并不是产生新的数据
2)、什么使用props什么时候使用state?
在react中data包括:satae和props,props是从外部的组件中传过来的数据,而satae是组件内部状态,一个组件的自己的satae可以作为传递给它子组件的props的数据来源,一个组件想要改变自己的状态只能通过setState来进行改变自己的状态,一个组件不能够直接通过修改自己的props来改变自己的更新状态,也不能修改自己的porps,因为修改自己的props会很乱的。但凡props能够搞定的事情,尽量不要使用state。
将父级所传递的props,作为子级的state,是会产生值引用对象影响问题,也就是我更改子级state,父级props被相应更改
3)、React组件的生命周期
React组件的生命周期三种过程:
mount:从无到有的过程
update: 重新渲染,又分为state change引发的,和props引发的
unmount:从有到无
mount过程: getDefaultProps getInitialState componentWillMount render componentDidMount:这个函数只能在浏览器端执行,但是使用react做服务器端渲染的时候,不能在服务器端执行(因为在服务器端突出出来的是一个字符串,根本上就没有一个DOM-tree被mount的说法,所以不会执行),
因state改变引发的update过程:
shouldComponentUpdate componentWillUpdate render componentDidUpdate
因父组件想要render这个组件改变引发的update过程:
componentWillReceiveProps shouldComponentUpdate componentWillUpdate render componentDidUpdate
如果当父组件不需要重新渲染,shouldComponentUpdate 会 返回一个false,那样后面的componentWillUpdate、render、componentDidUpdate 就不会执行。
无论是mount过程还是update过程中的render函数之前的声明周期,获取的到的state或者是props都是之前未改变的数据,只有render函数之后,才是数据改变之后的状态,
4)、为什么尽量构建无状态组件
无状态组件就是一个纯函数,尽量让组件成为一个纯函数形式的无状态组件,因为可以减少一些bug出现,我们应该把一些有状态组件(就是里面含有state)集中起来进行管理,让其子组件是一个无状态组件,这样好管理,好维护,
5)、创建高阶组件(HoC,Higher-Order Component)
HoC 高阶组件使用场景把一个通用的功能,使用高阶组件进行共用,这样就不必写同样的功能代码了。
6)、组件之间通讯
父组件通过属性的形式向子组件传递参数,子组件通过props接受父组件传递过来的参数;
子组件如果想和父组件通信,子组件要调用父组件传递过来的方法;
兄弟组件之间的通讯可以借助于父组件作为中介,进行传递数据(父组件中写两个函数,这两个函数分别传给两个子组件,然后互相之间进行相互引用,)
任意组件之间的通讯可以通过设置一个全局变量来作为中介,进行传递数据。
如果这个项目比较打的话,当然也可以使用redux进行组件之间的通讯。
— 申请免费试学名额 —
在职想转行提升,担心学不会?根据个人情况规划学习路线,闯关式自适应学习模式保证学习效果
讲师一对一辅导,在线答疑解惑,指导就业!
相关推荐 更多
新手小白学习web前端必看基础攻略
本篇文章将给新人小白带来学习web前端必看攻略。近些年来IT岗位大火,这些攻略是新手小白学习想要学习web前端很值得借鉴的,相信很多人也知道学好一门IT技术并非简单事,博学谷在十余年的授业生涯里总结了一套适合新手小白学习web前端必看的基础攻略,今天就分享给大家。
7183
2019-07-11 13:20:43
手机HMTL5开发框架推荐
本文将向大家推荐十个手机HMTL5开发框架,它们分别是jquery mobile框架、bootstrap框架、ionic框架、Mobile Angular UI框架、Intel XDK框架、Appcelerator Titanium框架、Sencha Touch框架、Kendo UI框架、.mui框架,相信在这些框架中你一定可以找到适合自己的。
7301
2019-08-02 14:58:17
JavaScript的三大基本操作案例讲解
JavaScript是一种用于创建和控制动态网站内容的编程语言,是开发交互式Web界面的最佳选择之一。那么,其交互性体现在哪些方面?如何实现基本的交互式操作? 下面我们一起来深入学习一下 JavaScript的三大基本操作,分别是改变HTML内容,改变HTML属性以及改变HTML样式。希望通过案例讲解,大家可以快速掌握这些基本操作。
4513
2020-08-17 15:05:06
JSP基于Java开发Web应用程序特点有哪些?
JSP基于Java开发Web应用程序特点有哪些?JSP是建立在Servlet规范之上的动态网页开发技术,实质是一个简化的Servlet,在JSP文件中HTML代码与Java代码共同存在,其中HTML代码用于实现网页中静态内容的显示,Java代码用于实现网页中动态内容的显示。为了与传统HTML有所区别,JSP文件的扩展名为JSP。
4478
2021-02-22 18:17:20
Three.js基础知识分享 帮你入门学习JavaScript 3D 库
Three.js基础知识分享 帮你入门学习JavaScript 3D 库,学习Three.js需要先了解一下 OpenGL 和 WebGL。OpenGL 是一个跨平台的3D/2D的绘图标准,WebGL是一种3D绘图协议。WebGL允许把JavaScript和OpenGL 结合在一起运用,但使用WebGL原生的API来写3D程序非常的复杂,同时需要相对较多的数学知识对于前端开发者来说学习成本非常高。
4569
2022-04-19 16:10:42
热门文章
- 前端是什么
- 前端开发的工作职责
- 前端开发需要会什么?先掌握这三大核心关键技术
- 前端开发的工作方向有哪些?
- 简历加分-4步写出HR想要的简历
- 程序员如何突击面试?两大招带你拿下面试官
- 程序员面试技巧
- 架构师的厉害之处竟然是这……
- 架构师书籍推荐
- 懂了这些,才能成为架构师 查看更多
扫描二维码,了解更多信息
