![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
文章平均质量分 92
LYFlied
这个作者很懒,什么都没留下…
展开
-
对react中key的理解&&利用key让组件重新渲染
文章目录key的作用原理对比流程react组件中的key利用key让组件重新渲染当我们渲染列表时通常会用到keyconst listItems = numbers.map((item) => <li key={item.id}>{item.val}</li>)key的作用(一般同级同结构的子节点都需要采用key属性,方便diff算法的使用)纯静态的同级同结构节点的渲染,可以采用index作为key的值,因为这里不需要动态去变化节点里面的内容的值;对于一组动原创 2021-04-30 13:06:33 · 1894 阅读 · 4 评论 -
react-router简单整理总结
文章目录一、react-router与react-router-dom区别二、React-router1.路由组件 BrowserRouter 和 HashRouter2.路径匹配组件: Route 和 Switch2.1Route2.2Switch2.3导航组件: Link 和 NavLink2.4 Redirect2.5 withRouter2.3编程式导航 - history 对象一、react-router与react-router-dom区别react-router: 实现了路由的核心功能原创 2021-04-29 16:50:36 · 570 阅读 · 4 评论 -
React-性能优化(一)
一、使用React.Memo来缓存组件二、使用useMemo缓存大量的计算三、避免使用内联对象四、避免使用匿名函数五、延迟加载不是立即需要的组件六、调整CSS而不是强制组件加载和卸载七、使用React.Fragment避免添加额外的DOM八、基于 shouldComponentUpdate 优化九、基于 PureComponent + immutable.js 优化浅比较:将针对值类型数据对比其值是否相等,而针对数组、对象等引用类型的数据则对比其引用是否相等。原创 2021-04-01 21:23:17 · 497 阅读 · 2 评论 -
React-高阶组件(一)
高阶组件是参数为组件,返回值为新组件的函数。- 组件:将 props 转换为 UI- 高阶组件:将组件转换为另一个组件。一、概念与普通组件的区别二、什么时候使用三、例子四、使用总结原创 2021-04-01 20:12:56 · 381 阅读 · 4 评论 -
React-setState执行过程(为什么不会同步更新组件)
setState 不会立刻改变React组件中state的值.- setState 通过触发一次组件的更新来引发“重绘”.- 多次 setState 函数调用产生的效果会合并。一、setState 为什么不会同步更新组件?二、setState执行过程,流程图分场景讨论1.钩子函数和合成事件中2.异步函数和原生事件中3.componentDidMount调用setstate4.componentWillUpdate componentDidUpdate5.事件处理类型6.传入的是函数原创 2021-03-31 21:10:10 · 1412 阅读 · 1 评论 -
React合成事件(阻止冒泡stopImmediatePropagation)
- React组件类似onClick的事件是合成事件,本质上所有绑定是代理到document上的,所有绑定都会冒泡到document层去执行二、React 合成事件1.执行顺序2.合成事件阻止冒泡2.1e.stopPropagation2.2 e.nativeEvent.stopImmediatePropagation3.this指向问题解决4.传参5. 事件池(React 17 不再使用事件池)原创 2021-03-31 14:21:10 · 3385 阅读 · 3 评论