React笔记
文章平均质量分 88
视频链接 https://www.bilibili.com/video/BV1gh411U7JD
Suyuoa
这个作者很懒,什么都没留下…
展开
-
附录1-分析setState()
回调函数会在页面完成渲染后执行,无论setState有多少个,页面只渲染一次,所以回调函数只会执行最后一次。发现可以执行两次setState(),但由于是异步,不能加后就获取值,只触发一次render()如果是0,表示setState()与console.log()没有按照书写顺序来走。如果是1,表示先执行了setState()再执行console.log()setState()是异步更新数据的,异步实际就是不按顺序执行。结论是setState()的执行顺序与书写顺序没有关系。点击一次后发现显示的是0。原创 2023-03-19 12:48:34 · 378 阅读 · 0 评论 -
8.React路由
目前都是前端出路由与页面转换这种,后端只出接口。原创 2023-03-19 12:43:06 · 325 阅读 · 0 评论 -
7.避免不必要的渲染
shouldComponentUpdate()可以接收nextProps与nextState两个参数,我们可以通过这两个参数对是否需要渲染进行判断,如果我们定义返回值为true表示需要重新渲染组件,false表示不需要重新渲染。当数据发生改变的时候,生成一个新的虚拟DOM,Diff算法比较新的虚拟DOM与旧的虚拟DOM的区别,然后只重新渲染有改动的真实的DOM。当父组件重新渲染时,父组件的所有子组件也会重新渲染,但非父组件的所有子组件不会重新渲染。原创 2023-03-19 12:41:25 · 1325 阅读 · 0 评论 -
6.组件状态复用
render props 实质上是利用 props 传递要渲染的东西,我们做一个 以文本形式显示鼠标当前位置 的例子在鼠标移动的时候可以得到鼠标的坐标有点像JSONP的原理,首先 制造组件方 与 使用组件方 定义一个属性(例子中是Myrender),然后 由制造组件方提供数据(this.state),使用组件方用一个形参(Mouse_state)接收并使用用这种方式就可以再简单地渲染一个跟随鼠标的效果。原创 2023-03-19 12:36:29 · 418 阅读 · 0 评论 -
5.组件钩子函数
componentDidUpdate()在更新后触发,所以在componentDidUpdate()中使用setState()也要放在一个条件中使用,在componentDidUpdate()条件使用setState()不会出现warning。由于setState()会改变组件状态导致组件渲染,组件渲染会执行render(),所以一般不在render()中调用setState()打开后会先执行父子组件的两个render(),但并不执行componentDidUpdate()原创 2023-01-30 09:41:55 · 392 阅读 · 0 评论 -
4.组件通讯
默认情况下组件只能使用自己的状态,但当组件拆分的比较小的时候,就不可避免的使用到其他组件的状态,比如之前做的例子,当我们的发表评论区域与显示评论区域拆分为两个组件时,这两个组件之间一定要进行通讯以达成某些功能。原创 2023-01-30 09:35:39 · 356 阅读 · 0 评论 -
3.组件的基本用法
其中三个点的意思是继承指定变量的所有内容,这三个点可以用于对象也可以用于列表,如果用于列表可以选择将之前的内容放在前面还是放在后面,我下面的图是放在后面,如果写 [...this.state.remark_list,{...this.state,remark_id:this.state.remark_id}] 就是将之前的内容放在新列表的前面。也可以这样写,这样写的this指向的是render()的this,render()的this就是组件的this。原创 2023-01-29 12:09:45 · 282 阅读 · 0 评论 -
2.JSX
JSX(JavaScript XML) 是 JavaScript 的语法扩展,格式上比较像模板语言。React支持JSX下面两个代码可以实现相同的功能,JSX看起来要简洁一些。原创 2023-01-29 12:02:16 · 352 阅读 · 0 评论 -
1.初识React
React是用于构建用户界面的JavaScript库,可以应用于web,app(react-native),VR(react 360)原创 2023-01-15 09:26:01 · 619 阅读 · 0 评论