React面试题
1.什么是错误边界
错误边界是一种react组件,可以捕获并打印发生在其子组件树任何位置的JavaScript错误,并会渲染出备用UI。
作用:防止子组件的错误导致整个组件树被卸载
错误边界无法捕获以下场景产生的错误:
1.事件处理
异步代码(setTimeout或者requsetAnimationFrame)
服务端渲染
它自身抛出来的错误
使用:
如果类组件中使用了static getDerivedStateFromError() 或者 componentDidCatch() 这两个生命周期方法中的任意一个(或两个)时,那么他就变成了一个错误边界。
static getDerivedStateFromError() 渲染备用UI,使用componentDidCatch() 打印错误信息。
2.react组件通信
1.父传子,父组件的传递值给子组件,子组件通过props接收
2.子传父,父组件传递函数给子组件,子组件将所要传递的值作为参数传递给父组件
3.如果是同级别之间,可以使用redux进行状态管理
3.父组件如何使用子组件的方法
1.可以设置ref获取子组件的实例,然后调用子组件的方法
4.setState是同步还是异步
setState()会进行批处理,合并策略
setState批量更新:
除了虚拟dom的优化,减少数据更新的频率是另外一种手段,也就是React的批量更新。
setState()批量更新的原理,react内部的隐式操作,会有一个布尔值canMerge判断这些操作是否可以合并,如果可以都将其放入一个finalState,直到不能合并canMerge为false,最好将finalState进行合并。
如何控制canMerge逻辑
关键点在于React是否有时机执行canMerge逻辑,也就是React对目标函数有没有控制权。如果没有控制权,那么就不会执行canMerge逻辑,也就不会发生setState()被react隐式合并了
可以通过:Promsie.then(),fetch回调,xhr网络回调、setTimout
通过unstable_batchedUpdates重回react的控制
import React from 'react'
import { unstable_batchedUpdates as batchedUpdates } from 'react-dom'
export default class BatchedDemo extends React.Component {
state = {
number: 0,
}
handleClick = () => {
this.setState({
number: this.state.number 1
})
this.setState({
number: this.state.number 2
})
this.setState({
number: this.state.number 3
})
setTimeout(() => {
//通过这个api,让react拿回控制权,执行canMerge逻辑
batchedUpdates(() => {
this.setState({
number: this.state.number 4
})
this.setState({
number: this.state.number 5
})
this.setState({
number: this.state.number 6
})
})
})
}
render() {
return <button id="myButton" onClick={this.handleClick}>Num:
{this.state.number}
</button>
}
}
setState本身是同步的,导致setState异步的原因是因为走了React内部的合并逻辑,那只要绕过react内部的合并逻辑,不让它进入react的合并逻辑。
总结
:
异步的情况:
由React控制的事件处理函数,以及生命周期函数调用setState时表现为异步 。大部分开发中用到的都是React封装的事件,比如onChange、onClick、onTouchMove等(合成事件中),这些事件处理函数中的setState都是异步处理的。
同步的情况:
React控制之外的事件中调用setState是同步更新的。比如原生js绑定的事件,setTimeout/setInterval,ajax,promise.then内等 React 无法掌控的 APIs情况下,setState是同步更新state的
setState可以传入一个对象,也可以传入一个函数。
传入对象时:
它会将对象与原state进行合并,形成新的state
传入一个函数时:
有两个参数,一个是state、一个是props
state是原state对象
props:接收父组件传递的的
return一个对象与原state进行合并
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhieggki
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
excel图片置于文字下方的方法
PHP中文网 06-27 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
微信提示登录环境异常是什么意思原因
PHP中文网 04-09 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
微信人名旁边有个图标有什么用
PHP中文网 03-11