React
W-MoMo
- 心若向阳 - 永远向阳
展开
-
「React」之useLayoutEffect
useEffect 和 useLayoutEffect 都是 React 中的 Hook,用于在函数组件中执行副作用操作。它们的主要区别在于触发时间和执行时机。由于 useLayoutEffect 在浏览器绘制之前同步执行,如果它的执行时间过长,可能会阻塞页面渲染,导致用户看到延迟。使用时,优先使用useEffect,出现界面内容闪烁,使用useLayoutEffect。原创 2023-08-02 22:06:59 · 470 阅读 · 0 评论 -
「React」之组件通信传参
当子组件中的按钮被点击时,会触发 handleClick 函数,该函数调用父组件传递的回调函数 sendData,并将数据作为参数传递给父组件;此时父组件中的 handleChildData 函数会接收到子组件传递的数据,并进行相应处理。在react中,子组件向父组件中传递参数通常通过回调函数的方式实现。然后,在子组件中通过调用父组件传递的回调函数,并传递参数进行数据传递。首先,在父组件中定义一个函数,并将它作为 props 传递给子组件。原创 2023-08-01 22:30:08 · 167 阅读 · 1 评论 -
「React」之useContext
useContext 是 React Hooks 中的一个钩子函数,用于获取 React 中的上下文(Context)的值。它接受一个上下文对象(通过 React.createContext 创建),并返回该上下文的当前值。useContext 的优势在于它使得在多级组件中共享和访问上下文值变得更加便捷。不需要手动传递上下文值给每个子组件,而是可以直接在需要的地方使用 useContext 获取上下文的值。原创 2023-08-01 18:10:07 · 1155 阅读 · 1 评论 -
「React」之useReducer
reducer 函数会根据动作类型更新状态,并触发组件的重新渲染。useState 接受初始状态作为参数,并返回一个状态变量和一个更新状态的函数,而 useReducer 接受一个 reducer 函数和初始状态作为参数,并返回当前状态和一个 dispatch 函数。状态更新逻辑:使用 useState 时,每次调用状态更新函数时,它都会独立地更新状态,不受之前状态的影响。而使用 useReducer 时,根据不同的动作类型,reducer 函数可以定义不同的状态更新逻辑,这使得状态更新更加灵活和可预测。原创 2023-08-01 15:19:40 · 687 阅读 · 1 评论 -
「React」之useEffect
react函数式组件本没有生命周期函数,提供了useEffect副作用函数借以处理类似的功能// 页面第1次加载会触发 console . log('Component mounted') // 页面卸载时触发 return() => {console . log('Component WillUnmount') } } , [ ]) // state每次改变都会触发 useEffect(() => {原创 2023-07-31 21:26:19 · 112 阅读 · 0 评论