![](https://i-blog.csdnimg.cn/direct/5aec2427e693497293ed7f6ee36e9cab.jpeg?x-oss-process=image/resize,m_fixed,h_224,w_224)
React系列专栏
文章平均质量分 93
深入浅出React,包含原理篇,适合冲击面试
真的很上进
debuff叠满的双非前端鼠
展开
-
浅浅探究一下React的虚拟DOM和diff算法
通过事务处理机制,将多次DOM修改的结果一次性的更新到页面上,从而有效的减少页面渲染的次数,减少修改DOM的重绘重排次数,提高渲染性能。另外现代前端框架的一个基本要求就是无须手动操作DOM,一方面是因为手动操作DOM无法保证程序性能,多人协作的项目中如果review不严格,可能会有开发者写出性能较低的代码,另一方面更重要的是省略手动DOM操作可以大大提高开发效率。Virtual DOM的更新DOM的准备工作耗费更多的时间,也就是JS层面,相比于更多的DOM操作它的消费是极其便宜的。原创 2024-09-12 21:57:49 · 384 阅读 · 0 评论 -
一文带你看懂状态管理库Redux原理
react-redux 数据传输∶ view–>action–>reducer–>store–>view。view 上的AddClick 事件通过mapDispatchToProps 把数据传到action —> click:()=>dispatch(ADD)action 的ADD 传到reducer上reducer传到store上 const store = createStore(reducer);原创 2024-09-12 21:55:06 · 437 阅读 · 0 评论 -
前端速通面经八股系列(八)—— React篇(上)
(1)受控组件在使用表单来收集用户输入时,例如等元素都要绑定一个change事件,当表单的状态发生变化,就会触发onChange事件,更新组件的state。这种组件在React中被称为受控组件,在受控组件中,组件渲染出的状态与它的value或checked属性相对应,react通过这种方式消除了组件的局部状态,使整个状态可控。react官方推荐使用受控表单组件。可以通过初始state中设置表单的默认值每当表单的值发生变化时,调用onChange事件处理器。原创 2024-09-09 21:50:47 · 1294 阅读 · 0 评论 -
React组件通信详解
即没有任何包含关系的组件,包括兄弟组件以及不在同一个父级中的非兄弟组件。:父组件通过 props 向子组件传递需要的信息。:: props+回调的方式。原创 2024-09-05 22:43:38 · 1274 阅读 · 0 评论 -
一文带你看懂React生命周期和性能优化
在老版本的 React 中,如果组件自身的某个 state 跟其 props 密切相关的话,一直都没有一种很优雅的处理方式去更新 state,而是需要在 componentWilReceiveProps 中判断前后两个 props 是否相同,如果不同再将新的 props更新到相应的 state 上去。但是,有的时候子组件的接受父组件的数据没有变动。需要注意,在进行新旧对比的时候,是**浅对比,**也就是说如果比较的数据时引用数据类型,只要数据的引用的地址没变,即使内容变了,也会被判定为true。原创 2024-09-04 23:35:44 · 1485 阅读 · 0 评论 -
详解React setState调用原理和批量更新的过程
假如所有setState是同步的,意味着每执行一次setState时(有可能一个同步代码中,多次setState),都重新vnode diff + dom修改,这对性能来说是极为不好的。setState 并不是单纯同步/异步的,它的表现会因调用场景的不同而不同。在代码中调用setState函数之后,React 会将传入的参数对象与组件当前的状态合并,然后触发调和过程(Reconciliation)。React会将state的改变压入栈中,在合适的时机,批量更新state和视图,达到提高性能的效果。原创 2024-09-03 21:00:35 · 1279 阅读 · 0 评论