beifeng11996 - 博客园

2022年11月4日

摘要： componentWillReceiveProps调用时机已经被废弃掉当props改变的时候才调用，子组件第二次接收到props的时候在调用setState 之后发生了什么状态合并，触发调和： setState函数之后，会将传入的参数对象与当前的状态合并，然后出发调用过程根据新的状态构建虚阅读全文

posted @ 2022-11-04 07:45 beifeng11996 阅读(81) 评论(0) 推荐(1) 编辑

React组件之间的通信方式总结（上）

摘要：先来几个术语： | 官方 | 我的说法 | 对应代码 | | | | | | React element | React元素 | let element=<span>A爆了</span> | | Component | 组件 | class App extends React.Component { 阅读全文

posted @ 2022-11-04 07:42 beifeng11996 阅读(98) 评论(0) 推荐(0) 编辑

年前端react面试打怪升级之路

摘要： react和vue的区别相同点：数据驱动页面，提供响应式的试图组件都有virtual DOM,组件化的开发，通过props参数进行父子之间组件传递数据，都实现了webComponents规范数据流动单向，都支持服务器的渲染SSR 都有支持native的方法，react有React nativ 阅读全文

posted @ 2022-11-04 07:41 beifeng11996 阅读(26) 评论(0) 推荐(0) 编辑

React组件之间的通信方式总结（下）

摘要：一、写一个时钟用 react 写一个每秒都可以更新一次的时钟 import React from 'react' import ReactDOM from 'react-dom' function tick() { let ele = <h1>{ new Date().toLocaleTimeSt 阅读全文

posted @ 2022-11-04 07:39 beifeng11996 阅读(21) 评论(0) 推荐(0) 编辑

2022年11月2日

前端面试指南之React篇（二）

摘要： react中这两个生命周期会触发死循环 componentWillUpdate生命周期在shouldComponentUpdate返回true后被触发。在这两个生命周期只要视图更新就会触发，因此不能再这两个生命周期中使用setState。否则会导致死循环 react性能优化是在哪个生命周期函数中在阅读全文

posted @ 2022-11-02 07:55 beifeng11996 阅读(46) 评论(0) 推荐(0) 编辑

React循环DOM时为什么需要添加key

摘要：一、React 渲染流程和更新流程 react渲染流程：jsx -> 虚拟dom -> 真实dom react更新流程：props/state改变 -> render函数重新执行 -> 生成新的虚拟dom树 -> 新旧虚拟dom树进行diff -> 计算出差异进行更新 ->更新到真实的dom树所以阅读全文

posted @ 2022-11-02 07:52 beifeng11996 阅读(9) 评论(0) 推荐(0) 编辑

前端面试指南之React篇（一）

摘要：组件之间传值父组件给子组件传值在父组件中用标签属性的=形式传值在子组件中使用props来获取值子组件给父组件传值在组件中传递一个函数在子组件中用props来获取传递的函数，然后执行该函数在执行函数的时候把需要传递的值当成函数的实参进行传递兄弟组件之间传值利用父组件先把数据通过【阅读全文

posted @ 2022-11-02 07:52 beifeng11996 阅读(59) 评论(0) 推荐(0) 编辑

React的useLayoutEffect和useEffect执行时机有什么不同

摘要：我们先看下 React 官方文档对这两个 hook 的介绍，建立个整体认识 useEffect(create, deps): 该 Hook 接收一个包含命令式、且可能有副作用代码的函数。在函数组件主体内（这里指在 React 渲染阶段）改变 DOM、添加订阅、设置定时器、记录日志以及执行其他包含副作阅读全文

posted @ 2022-11-02 07:50 beifeng11996 阅读(49) 评论(0) 推荐(0) 编辑

2022年11月1日

字节前端面试被问到的react问题

摘要： redux中间件中间件提供第三方插件的模式，自定义拦截 action -> reducer 的过程。变为 action -> middlewares -> reducer。这种机制可以让我们改变数据流，实现如异步action ，action 过滤，日志输出，异常报告等功能 redux-logger 阅读全文

posted @ 2022-11-01 08:43 beifeng11996 阅读(31) 评论(0) 推荐(0) 编辑

React-Hooks怎样封装防抖和节流-面试真题

摘要： Debounce debounce 原意消除抖动，对于事件触发频繁的场景，只有最后由程序控制的事件是有效的。防抖函数，我们需要做的是在一件事触发的时候设置一个定时器使事件延迟发生，在定时器期间事件再次触发的话则清除重置定时器，直到定时器到时仍不被清除，事件才真正发生。 const debounce 阅读全文

posted @ 2022-11-01 08:39 beifeng11996 阅读(88) 评论(0) 推荐(0) 编辑

beifeng1996

公告