React及其底层机制
文章平均质量分 73
htguyftg
前端小菜鸡
展开
-
React Hooks —— useContext上下文通信
上下文操作的核心是上下文对象,如ThemeContext。创建多个不同的上下文对象,可以基于不同上下文对象中的Provider存放不同的上下文信息,同时也可以基于不同的上下文对象,获取指定上下文中的信息。为了实现祖孙组件的便捷通信,不使用繁琐的props和ref层层传递信息,可以使用Hooks组件的context特性实现通信。对象存储上下文中共享的数据和方法,祖先组件更新时会往上下文中放入最新的共享内容。将所有后代组件包裹到。创建一个上下文对象,用来管理上下文中的信息。解构上下文对象获取上下文信息。原创 2023-06-28 14:03:02 · 244 阅读 · 0 评论 -
React Hooks —— useReducer【useState进阶方案】
需要注意的是,React 可能仍需要在跳过渲染前再次渲染该组件。不过由于 React 不会对组件树的“深层”节点进行不必要的渲染,所以大可不必担心。如果你在渲染期间执行了高开销的计算,则可以使用。state,因此传入的新状态和旧状态不能是同一个地址。若在旧状态上直接更改,React将跳过子组件的视图重新渲染和副作用的执行。的第三个参数传入,这样初始 state 将被设置为。普通需求场景下,useState直接处理比较简单。将初始 state 作为第二个参数传入。的 reducer,并返回。原创 2023-06-28 13:49:25 · 159 阅读 · 0 评论 -
React Hooks —— useMemo&useCallback优化性能
在前端开发的过程中,我们需要缓存一些内容,以避免在需渲染过程中因大量不必要的耗时计算而导致的性能问题。为此 React 提供了一些方法可以帮助我们去实现数据的缓存,useMemo 就是其中之一,只能应用在函数组件中,在某些情况下能大大提高函数的运行效率。诉求:当父组件更新的时候,因为传递给子组件的属性仅仅是一个函数「特点:基本应该算是不变的」,所以不想再让子组件也跟着更新了!父组件嵌套子组件父组件要把一个内部的函数,基于属性传递给子组件,此时传递的这个方法,基于useCallback处理会更好。原创 2023-06-28 13:47:57 · 271 阅读 · 0 评论 -
React Hooks —— useImperativeHandle和ref转发
【代码】React Hooks —— useImperativeHandle和ref转发。原创 2023-06-28 13:44:39 · 98 阅读 · 0 评论 -
React Hooks—— useRef用法及类组件的三种ref创建使用方式
给元素标签设置ref,目的:获取对应的DOM元素给类组件设置ref,目的:获取当前调用组件创建的实例(后续可以根据实例获取子组件中的相关信息)// 基于ref获取子组件的实例,这样基于实例,可以调用子组件内部,挂载到实例上的东西 class Child extends React . Component {state = {x : 1000 };原创 2023-06-28 13:39:15 · 2092 阅读 · 0 评论 -
React Hooks —— useLayoutEffect及其与useEffect的区别
useLayoutEffect函数签名与 useEffect 相同,但它会在所有的 DOM 变更之后。在浏览器执行绘制之前,useLayoutEffect 内部的更新计划将被同步刷新。尽可能使用标准的 useEffect 以避免阻塞视觉更新。可以使用它来读取 DOM 布局并同步触发重渲染。原创 2023-06-28 13:32:21 · 97 阅读 · 0 评论 -
React Hooks ——useEffect及其底层链表机制
1、按照顺序执行期间,首先会检测依赖项的值是否有更新「有容器专门记录上一次依赖项的值」;有更新则把对应的callback执行,没有则继续处理下一项。函数组件在渲染(或更新)期间,遇到useEffect操作,会基于MountEffect方法把callback(和依赖项)加入到。2、遇到依赖项是空数组的,则只在第一次渲染完毕时,执行相应的callback。3、遇到没有设置依赖项的,则每一次渲染完毕时都执行相应的callback。只能在函数最外层调用 Hook,不要在。作用:在函数组件中使用生命周期函数。原创 2023-06-28 13:26:03 · 747 阅读 · 0 评论 -
React Hooks —— useState异步更新队列、闭包、浅比较深入理解
render多次(理论上是一次,这里是因为这些操作作用的都是一个闭包中的同一个状态值x,在第一次改状态还没改成功之前,其他次操作访问的状态值仍旧是还没改的10,直到第一次改状态成功,剩余次操作不会再通过Object.is的测试。第二次flushSync,更新队列里只有一个setX,立即同步执行,使用的也是第一次Demo创建出来的EC的闭包中的state(因为这些flushSync方法都存在于第一个上下文中),也就是10。注意不是因为DOM-DIFF;,会刷新队列,也就是通知更新队列中的所有任务执行:把。原创 2023-06-28 12:27:28 · 2896 阅读 · 1 评论 -
React Hooks——Hooks组件简介
Hook 是 React 16.8 的新增特性!并且只能运用到函数组件中!就是基于 React 中新提供的 Hook 函数,可以。原创 2023-06-26 14:23:57 · 180 阅读 · 0 评论