文章详情

登录

短信预约-IT技能 免费直播动态提醒

选择考试省份

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团

请输入下面的图形验证码

提交验证

短信预约提醒成功

手写ReactHook核心原理

2024-12-03 18:29

关注

 基本准备工作

基本准备工作

利用 creact-react-app 创建一个项目

 

 

 

已经把项目放到 github：https://github.com/Sunny-lucking/HowToBuildMyReactHook 可以卑微地要个star吗

手写useState

useState的使用

useState可以在函数组件中，添加state Hook。

调用useState会返回一个state变量，以及更新state变量的方法。useState的参数是state变量的初始值，初始值仅在初次渲染时有效。

 

更新state变量的方法，并不会像this.setState一样，合并state。而是替换state变量。下面是一个简单的例子, 会在页面上渲染count的值，点击setCount的按钮会更新count的值。

  1. function App(){ 
  2.     const [count, setCount] = useState(0); 
  3.     return ( 
  4.         
     
  5.             {count} 
  6.             
  7.                 onClick={() => { 
  8.                     setCount(count + 1); 
  9.                 }} 
  10.             > 
  11.                 增加 
  12.              
  13.         
 
  •     ); 
  • } 
  • ReactDOM.render( 
  •     , 
  •   document.getElementById('root') 
  • ); 
    •

    原理实现

    1. let lastState 
    2. function useState(initState) { 
    3.     lastState = lastState || initState; 
    4.     function setState(newState) { 
    5.         lastState = newState 
    6.     } 
    7.     return [lastState,setState] 
    8. } 
    9. function App(){ 
    10.     //。。。 
    11. } 
    12. ReactDOM.render( 
    13.     , 
    14.   document.getElementById('root') 
    15. ); 

    如代码所示，我们自己创建了一个useState方法

    当我们使用这个方法时，如果是第一次使用，则取initState的值，否则就取上一次的值（laststate）.

    在内部，我们创建了一个setState方法，该方法用于更新state的值

    然后返回一个lastSate属性和setState方法。

    看似完美，但是我们其实忽略了一个问题：每次执行玩setState都应该重新渲染当前组件的。

    所以我们需要在setState里面执行刷新操作

    1. let lastState 
    2. function useState(initState) { 
    3.     lastState = lastState || initState; 
    4.     function setState(newState) { 
    5.         lastState = newState 
    6.         render() 
    7.     } 
    8.     return [lastState,setState] 
    9. } 
    10. function App(){ 
    11.     const [count, setCount] = useState(0); 
    12.     return ( 
    13.         
       
    14.             {count} 
    15.             
    16.                 onClick={() => { 
    17.                     setCount(count + 1); 
    18.                 }} 
    19.             > 
    20.                 增加 
    21.              
    22.         
     
  •     ); 
  • } 
  • // 新增方法 
  • function render(){ 
  •     ReactDOM.render( 
  •         , 
  •         document.getElementById('root') 
  •     ); 
  • } 
  • render() 
    •

    如代码所示，我们在setState里添加了个render方法。render方法则会执行

    1. ReactDOM.render( 
    2.         , 
    3.         document.getElementById('root') 
    4.     ); 

    也就是重新渲染啦。

    好了，现在是不是已经完整了呢？

    不，还有个问题：就说我们这里只是用了一个useState，要是我们使用了很多个呢？难道要声明很多个全局变量吗？

    这显然是不行的，所以，我们可以设计一个全局数组来保存这些state

    1. let lastState = [] 
    2. let stateIndex = 0 
    3. function useState(initState) { 
    4.     lastState[stateIndex] = lastState[stateIndex] || initState; 
    5.     const currentIndex = stateIndex 
    6.     function setState(newState) { 
    7.         lastState[stateIndex] = newState 
    8.         render() 
    9.     } 
    10.     return [lastState[stateIndex++],setState] 
    11. } 

    这里的currentIndex是利用了闭包的思想，将某个state相应的index记录下来了。

    好了，useState方法就到这里基本完成了。是不是so easy!!!

    React.memo介绍

     

    看下面的代码!你发现什么问题?

    1. import React ,{useState}from 'react'; 
    2. import ReactDOM from 'react-dom'; 
    3. import './index.css'; 
    4. function Child({data}) { 
    5.     console.log("天啊，我怎么被渲染啦，我并不希望啊") 
    6.     return ( 
    7.         
      child
       
    8.     ) 
    9. } 
    10. function App(){ 
    11.     const [count, setCount] = useState(0); 
    12.     return ( 
    13.         
       
    14.              
    15.              { setCount(count + 1)}}> 
    16.                 增加 
    17.              
    18.          
    19.     ); 
    20. } 
    21. function render(){ 
    22.     ReactDOM.render( 
    23.         , 
    24.         document.getElementById('root') 
    25.     ); 
    26. } 
    27. render() 

    没错，就是尽管我们传个子组件的props是固定的值，当父组件的数据更改时，子组件也被重新渲染了，我们是希望当传给子组件的props改变时，才重新渲染子组件。

    所以引入了React.memo。

    看看介绍

    React.memo() 和 PureComponent 很相似，它帮助我们控制何时重新渲染组件。

     

    组件仅在它的 props 发生改变的时候进行重新渲染。通常来说，在组件树中 React 组件，只要有变化就会走一遍渲染流程。但是通过 PureComponent 和 React.memo()，我们可以仅仅让某些组件进行渲染。

    1. import React ,{useState,memo}from 'react'; 
    2. import ReactDOM from 'react-dom'; 
    3. import './index.css'; 
    4. function Child({data}) { 
    5.     console.log("天啊，我怎么被渲染啦，我并不希望啊") 
    6.     return ( 
    7.         
      child
       
    8.     ) 
    9. } 
    10. Child = memo(Child) 
    11. function App(){ 
    12.     const [count, setCount] = useState(0); 
    13.     return ( 
    14.         
       
    15.              
    16.              { setCount(count + 1)}}> 
    17.                 增加 
    18.              
    19.          
    20.     ); 
    21. } 
    22. function render(){ 
    23.     ReactDOM.render( 
    24.         , 
    25.         document.getElementById('root') 
    26.     ); 
    27. } 
    28. render() 

    因此，当Child被memo包装后，就只会当props改变时才会重新渲染了。

    当然，由于React.memo并不是react-hook的内容，所以这里并不会取讨论它是怎么实现的。

    手写useCallback

    useCallback的使用

     

    当我们试图给一个子组件传递一个方法的时候，如下代码所示

    1. import React ,{useState,memo}from 'react'; 
    2. import ReactDOM from 'react-dom'; 
    3. function Child({data}) { 
    4.     console.log("天啊，我怎么被渲染啦，我并不希望啊") 
    5.     return ( 
    6.         
      child
       
    7.     ) 
    8. } 
    9. // eslint-disable-next-line 
    10. Child = memo(Child) 
    11. function App(){ 
    12.     const [count, setCount] = useState(0); 
    13.     const addClick = ()=>{console.log("addClick")} 
    14.     return ( 
    15.         
       
    16.              
    17.              
    18.              { setCount(count + 1)}}> 
    19.                 增加 
    20.              
    21.          
    22.     ); 
    23. } 
    24. function render(){ 
    25.     ReactDOM.render( 
    26.         , 
    27.         document.getElementById('root') 
    28.     ); 
    29. } 
    30. render() 

    发现我们传了一个addClick方法 是固定的，但是却每一次点击按钮子组件都会重新渲染。

     

    这是因为你看似addClick方法没改变，其实旧的和新的addClick是不一样的，如图所示

    在这里插入图片描述

    这时，如果想要，传入的都是同一个方法，就要用到useCallBack。

     

    如代码所示

    1. import React ,{useState,memo,useCallback}from 'react'; 
    2. import ReactDOM from 'react-dom'; 
    3. function Child({data}) { 
    4.     console.log("天啊，我怎么被渲染啦，我并不希望啊") 
    5.     return ( 
    6.         
      child
       
    7.     ) 
    8. } 
    9. // eslint-disable-next-line 
    10. Child = memo(Child) 
    11. function App(){ 
    12.     const [count, setCount] = useState(0); 
    13.     // eslint-disable-next-line 
    14.     const addClick = useCallback(()=>{console.log("addClick")},[]) 
    15.     return ( 
    16.         
       
    17.              
    18.              
    19.              { setCount(count + 1)}}> 
    20.                 增加 
    21.              
    22.          
    23.     ); 
    24. } 
    25. function render(){ 
    26.     ReactDOM.render( 
    27.         , 
    28.         document.getElementById('root') 
    29.     ); 
    30. } 
    31. render() 

    useCallback钩子的第一个参数是我们要传递给子组件的方法，第二个参数是一个数组，用于监听数组里的元素变化的时候，才会返回一个新的方法。

    原理实现

     

    我们知道useCallback有两个参数，所以可以先写

    1. function useCallback(callback,lastCallbackDependencies){ 
    2.      
    3.      
    4. } 

    跟useState一样，我们同样需要用全局变量把callback和dependencies保存下来。

    1. let lastCallback 
    2. let lastCallbackDependencies 
    3. function useCallback(callback,dependencies){ 
    4.     
    5. } 

    首先useCallback会判断我们是否传入了依赖项，如果没有传的话，说明要每一次执行useCallback都返回最新的callback

    1. let lastCallback 
    2. let lastCallbackDependencies 
    3. function useCallback(callback,dependencies){ 
    4.     if(lastCallbackDependencies){ 
    5.  
    6.     }else{ // 没有传入依赖项 
    7.          
    8.  
    9.     } 
    10.     return lastCallback 
    11. } 

    所以当我们没有传入依赖项的时候，实际上可以把它当作第一次执行，因此，要把lastCallback和lastCallbackDependencies重新赋值

    1. let lastCallback 
    2. let lastCallbackDependencies 
    3. function useCallback(callback,dependencies){ 
    4.     if(lastCallbackDependencies){ 
    5.  
    6.     }else{ // 没有传入依赖项 
    7.          
    8.         lastCallback = callback 
    9.         lastCallbackDependencies = dependencies 
    10.     } 
    11.     return lastCallback 
    12. } 

    当有传入依赖项的时候，需要看看新的依赖数组的每一项和来的依赖数组的每一项的值是否相等

    1. let lastCallback 
    2. let lastCallbackDependencies 
    3. function useCallback(callback,dependencies){ 
    4.     if(lastCallbackDependencies){ 
    5.         let changed = !dependencies.every((item,index)=>{ 
    6.             return item === lastCallbackDependencies[index] 
    7.         }) 
    8.     }else{ // 没有传入依赖项 
    9.          
    10.         lastCallback = callback 
    11.         lastCallbackDependencies = dependencies 
    12.     } 
    13.     return lastCallback 
    14. } 
    15. function Child({data}) { 
    16.     console.log("天啊，我怎么被渲染啦，我并不希望啊") 
    17.     return ( 
    18.         
      child
       
    19.     ) 
    20. } 

    当依赖项有值改变的时候，我们需要对lastCallback和lastCallbackDependencies重新赋值

    1. import React ,{useState,memo}from 'react'; 
    2. import ReactDOM from 'react-dom'; 
    3. let lastCallback 
    4. // eslint-disable-next-line 
    5. let lastCallbackDependencies 
    6. function useCallback(callback,dependencies){ 
    7.     if(lastCallbackDependencies){ 
    8.         let changed = !dependencies.every((item,index)=>{ 
    9.             return item === lastCallbackDependencies[index] 
    10.         }) 
    11.         if(changed){ 
    12.             lastCallback = callback 
    13.             lastCallbackDependencies = dependencies 
    14.         } 
    15.     }else{ // 没有传入依赖项 
    16.          
    17.         lastCallback = callback 
    18.         lastCallbackDependencies = dependencies 
    19.     } 
    20.     return lastCallback 
    21. } 
    22. function Child({data}) { 
    23.     console.log("天啊，我怎么被渲染啦，我并不希望啊") 
    24.     return ( 
    25.         
      child
       
    26.     ) 
    27. } 
    28. // eslint-disable-next-line 
    29. Child = memo(Child) 
    30. function App(){ 
    31.     const [count, setCount] = useState(0); 
    32.     // eslint-disable-next-line 
    33.     const addClick = useCallback(()=>{console.log("addClick")},[]) 
    34.     return ( 
    35.         
       
    36.              
    37.              
    38.              { setCount(count + 1)}}> 
    39.                 增加 
    40.              
    41.          
    42.     ); 
    43. } 
    44. function render(){ 
    45.     ReactDOM.render( 
    46.         , 
    47.         document.getElementById('root') 
    48.     ); 
    49. } 
    50. render() 

    手写useMemo

    使用

     

    useMemo和useCallback类似，不过useCallback用于缓存函数，而useMemo用于缓存函数返回值

    1. let data = useMemo(()=> ({number}),[number]) 

    如代码所示，利用useMemo用于缓存函数的返回值number，并且当只有监听元素为[number]，也就是说，当number的值发生改变的时候，才会重新执行

    1. ()=> ({number}) 

    然后返回新的number

    原理

     

    所以，useMemo的原理跟useCallback的差不多，仿写即可。

    1. import React ,{useState,memo,}from 'react'; 
    2. import ReactDOM from 'react-dom'; 
    3. let lastMemo 
    4. // eslint-disable-next-line 
    5. let lastMemoDependencies 
    6. function useMemo(callback,dependencies){ 
    7.     if(lastMemoDependencies){ 
    8.         let changed = !dependencies.every((item,index)=>{ 
    9.             return item === lastMemoDependencies[index] 
    10.         }) 
    11.         if(changed){ 
    12.             lastMemo = callback() 
    13.             lastMemoDependencies = dependencies 
    14.         } 
    15.     }else{ // 没有传入依赖项 
    16.         lastMemo = callback() 
    17.         lastMemoDependencies = dependencies 
    18.     } 
    19.     return lastMemo 
    20. } 
    21. function Child({data}) { 
    22.     console.log("天啊，我怎么被渲染啦，我并不希望啊") 
    23.     return ( 
    24.         
      child
       
    25.     ) 
    26. } 
    27. // eslint-disable-next-line 
    28. Child = memo(Child) 
    29. function App(){ 
    30.     const [count, setCount] = useState(0); 
    31.     // eslint-disable-next-line 
    32.     const [number, setNumber] = useState(20) 
    33.     let data = useMemo(()=> ({number}),[number]) 
    34.     return ( 
    35.         
       
    36.              
    37.              
    38.              { setCount(count + 1)}}> 
    39.                 增加 
    40.              
    41.          
    42.     ); 
    43. } 
    44. function render(){ 
    45.     ReactDOM.render( 
    46.         , 
    47.         document.getElementById('root') 
    48.     ); 
    49. } 
    50. render() 

    手写useReducer

    使用

     

    先简单介绍下useReducer。

    1. const [state, dispatch] = useReducer(reducer, initState); 

    useReducer接收两个参数：

    第一个参数：reducer函数，第二个参数：初始化的state。

    返回值为最新的state和dispatch函数(用来触发reducer函数，计算对应的state)。

    按照官方的说法：对于复杂的state操作逻辑，嵌套的state的对象，推荐使用useReducer。

     

    听起来比较抽象，我们先看一个简单的例子：

    1. // 官方 useReducer Demo 
    2. // 第一个参数：应用的初始化 
    3. const initialState = {count: 0}; 
    4.  
    5. // 第二个参数：state的reducer处理函数 
    6. function reducer(state, action) { 
    7.     switch (action.type) { 
    8.         case 'increment': 
    9.           return {count: state.count + 1}; 
    10.         case 'decrement': 
    11.            return {count: state.count - 1}; 
    12.         default: 
    13.             throw new Error(); 
    14.     } 
    15. } 
    16.  
    17. function Counter() { 
    18.     // 返回值：最新的state和dispatch函数 
    19.     const [state, dispatch] = useReducer(reducer, initialState); 
    20.     return ( 
    21.         <> 
    22.             // useReducer会根据dispatch的action，返回最终的state，并触发rerender 
    23.             Count: {state.count} 
    24.             // dispatch 用来接收一个 action参数「reducer中的action」，用来触发reducer函数，更新最新的状态 
    25.              dispatch({type: 'increment'})}>+ 
    26.              dispatch({type: 'decrement'})}>- 
    27.          
    28.     ); 
    29. } 

    其实意思可以简单的理解为，当state是基本数据类型的时候，可以用useState，当state是对象的时候，可以用reducer，当然这只是一种简单的想法。大家不必引以为意。具体情况视具体场景分析。

    原理

     

    看原理你会发现十分简单，简单到不用我说什么，不到十行代码，不信你直接看代码

    1. import React from 'react'; 
    2. import ReactDOM from 'react-dom'; 
    3.  
    4. let lastState 
    5. // useReducer原理 
    6. function useReducer(reducer,initialState){ 
    7.     lastState = lastState || initialState 
    8.     function dispatch(action){ 
    9.         lastState = reducer(lastState,action) 
    10.         render() 
    11.     } 
    12.     return [lastState,dispatch] 
    13. } 
    14.  
    15. // 官方 useReducer Demo 
    16. // 第一个参数：应用的初始化 
    17. const initialState = {count: 0}; 
    18.  
    19. // 第二个参数：state的reducer处理函数 
    20. function reducer(state, action) { 
    21.     switch (action.type) { 
    22.         case 'increment': 
    23.           return {count: state.count + 1}; 
    24.         case 'decrement': 
    25.            return {count: state.count - 1}; 
    26.         default: 
    27.             throw new Error(); 
    28.     } 
    29. } 
    30.  
    31. function Counter() { 
    32.     // 返回值：最新的state和dispatch函数 
    33.     const [state, dispatch] = useReducer(reducer, initialState); 
    34.     return ( 
    35.         <> 
    36.             {} 
    37.             Count: {state.count} 
    38.             {} 
    39.              dispatch({type: 'increment'})}>+ 
    40.              dispatch({type: 'decrement'})}>- 
    41.          
    42.     ); 
    43. } 
    44. function render(){ 
    45.     ReactDOM.render( 
    46.         , 
    47.         document.getElementById('root') 
    48.     ); 
    49. } 
    50. render() 

    手写useContext

    使用

    createContext 能够创建一个 React 的 上下文(context)，然后订阅了这个上下文的组件中，可以拿到上下文中提供的数据或者其他信息。

     

    基本的使用方法：

    1. const MyContext = React.createContext() 

    如果要使用创建的上下文，需要通过 Context.Provider 最外层包装组件，并且需要显示的通过 的方式传入 value，指定 context 要对外暴露的信息。

    子组件在匹配过程中只会匹配最新的 Provider，也就是说如果有下面三个组件：ContextA.Provider->A->ContexB.Provider->B->C

    如果 ContextA 和 ContextB 提供了相同的方法，则 C 组件只会选择 ContextB 提供的方法。

     

    通过 React.createContext 创建出来的上下文，在子组件中可以通过 useContext 这个 Hook 获取 Provider 提供的内容

    1. const {funcName} = useContext(MyContext); 

    从上面代码可以发现，useContext 需要将 MyContext 这个 Context 实例传入，不是字符串，就是实例本身。

    这种用法会存在一个比较尴尬的地方，父子组件不在一个目录中，如何共享 MyContext 这个 Context 实例呢?

    一般这种情况下，我会通过 Context Manager 统一管理上下文的实例，然后通过 export 将实例导出，在子组件中在将实例 import 进来。

     

    下面我们看看代码，使用起来非常简单

    1. import React, { useState, useContext } from 'react'; 
    2. import ReactDOM from 'react-dom'; 
    3. let AppContext = React.createContext() 
    4. function Counter() { 
    5.     let { state, setState } = useContext(AppContext) 
    6.     return ( 
    7.         <> 
    8.             Count: {state.count} 
    9.  
    10.              setState({ number: state.number + 1 })}>+ 
    11.          
    12.     ); 
    13. } 
    14. function App() { 
    15.     let [state, setState] = useState({ number: 0 }) 
    16.     return ( 
    17.          
    18.             
       
    19.                  
    20.                  
    21.              
    22.          
    23.     ) 
    24. } 
    25. function render() { 
    26.     ReactDOM.render( 
    27.         , 
    28.         document.getElementById('root') 
    29.     ); 
    30. } 
    31. render() 

    要是用过vue的同学，会发现，这个机制有点类似vue 中提供的provide和inject

    原理

     

    原理非常简单，由于createContext，Provider 不是ReactHook的内容， 所以这里值需要实现useContext，如代码所示，只需要一行代码

    1. import React, { useState } from 'react'; 
    2. import ReactDOM from 'react-dom'; 
    3. let AppContext = React.createContext() 
    4. function useContext(context){ 
    5.     return context._currentValue 
    6. } 
    7. function Counter() { 
    8.     let { state, setState } = useContext(AppContext) 
    9.     return ( 
    10.         <> 
    11.              setState({ number: state.number + 1 })}>+ 
    12.          
    13.     ); 
    14. } 
    15. function App() { 
    16.     let [state, setState] = useState({ number: 0 }) 
    17.     return ( 
    18.          
    19.             
       
    20.                  
    21.                  
    22.              
    23.          
    24.     ) 
    25. } 
    26. function render() { 
    27.     ReactDOM.render( 
    28.         , 
    29.         document.getElementById('root') 
    30.     ); 
    31. } 
    32. render() 

    手写useEffect

    使用

     

    它跟class组件中的componentDidMount，componentDidUpdate，componentWillUnmount具有相同的用途，只不过被合成了一个api。

    1. import React, { useState, useEffect} from 'react'; 
    2. import ReactDOM from 'react-dom'; 
    3.  
    4. function App() { 
    5.     let [number, setNumber] = useState(0) 
    6.     useEffect(()=>{ 
    7.         console.log(number); 
    8.     },[number]) 
    9.     return ( 
    10.  
    11.         
       
    12.              
    13.              setNumber(number+1)}>+ 
    14.          
    15.     ) 
    16. } 
    17. function render() { 
    18.     ReactDOM.render( 
    19.         , 
    20.         document.getElementById('root') 
    21.     ); 
    22. } 
    23. render() 

    如代码所示，支持两个参数，第二个参数也是用于监听的。当监听数组中的元素有变化的时候再执行作为第一个参数的执行函数

    原理

     

    原理发现其实和useMemo，useCallback类似，只不过，前面前两个有返回值，而useEffect没有。(当然也有返回值，就是那个执行componentWillUnmount函功能的时候写的返回值，但是这里返回值跟前两个作用不一样，因为你不会写

    1. let xxx = useEffect(()=>{ 
    2.         console.log(number); 
    3.     },[number]) 

    来接收返回值。

     

    所以，忽略返回值，你可以直接看代码，真的很类似，简直可以用一模一样来形容

    1. import React, { useState} from 'react'; 
    2. import ReactDOM from 'react-dom'; 
    3. let lastEffectDependencies 
    4. function useEffect(callback,dependencies){ 
    5.     if(lastEffectDependencies){ 
    6.         let changed = !dependencies.every((item,index)=>{ 
    7.             return item === lastEffectDependencies[index] 
    8.         }) 
    9.         if(changed){ 
    10.             callback() 
    11.             lastEffectDependencies = dependencies 
    12.         } 
    13.     }else{  
    14.         callback() 
    15.         lastEffectDependencies = dependencies 
    16.     } 
    17. } 
    18. function App() { 
    19.     let [number, setNumber] = useState(0) 
    20.     useEffect(()=>{ 
    21.         console.log(number); 
    22.     },[number]) 
    23.     return ( 
    24.  
    25.         
       
    26.              
    27.              setNumber(number+1)}>+ 
    28.          
    29.     ) 
    30. } 
    31. function render() { 
    32.     ReactDOM.render( 
    33.         , 
    34.         document.getElementById('root') 
    35.     ); 
    36. } 
    37. render() 

    你以为这样就结束了，其实还没有，因为第一个参数的执行时机错了，实际上作为第一个参数的函数因为是在浏览器渲染结束后执行的。而这里我们是同步执行的。

     

    所以需要改成异步执行callback

    1. import React, { useState} from 'react'; 
    2. import ReactDOM from 'react-dom'; 
    3. let lastEffectDependencies 
    4. function useEffect(callback,dependencies){ 
    5.     if(lastEffectDependencies){ 
    6.         let changed = !dependencies.every((item,index)=>{ 
    7.             return item === lastEffectDependencies[index] 
    8.         }) 
    9.         if(changed){ 
    10.             setTimeout(callback()) 
    11.             lastEffectDependencies = dependencies 
    12.         } 
    13.     }else{  
    14.         setTimeout(callback()) 
    15.         lastEffectDependencies = dependencies 
    16.     } 
    17. } 
    18. function App() { 
    19.     let [number, setNumber] = useState(0) 
    20.     useEffect(()=>{ 
    21.         console.log(number); 
    22.     },[number]) 
    23.     return ( 
    24.  
    25.         
       
    26.              
    27.              setNumber(number+1)}>+ 
    28.          
    29.     ) 
    30. } 
    31. function render() { 
    32.     ReactDOM.render( 
    33.         , 
    34.         document.getElementById('root') 
    35.     ); 
    36. } 
    37. render() 

    手写useLayoutEffect

    使用

    官方解释，这两个hook基本相同，调用时机不同，请全部使用useEffect，除非遇到bug或者不可解决的问题，再考虑使用useLayoutEffect。

    原理

    原理跟useEffect一样，只是调用时机不同

    上面说到useEffect的调用时机是浏览器渲染结束后执行的，而useLayoutEffect是在DOM构建完成，浏览器渲染前执行的。

     

    所以这里需要把宏任务setTimeout改成微任务

    1. import React, { useState} from 'react'; 
    2. import ReactDOM from 'react-dom'; 
    3. let lastEffectDependencies 
    4. function useLayouyEffect(callback,dependencies){ 
    5.     if(lastEffectDependencies){ 
    6.         let changed = !dependencies.every((item,index)=>{ 
    7.             return item === lastEffectDependencies[index] 
    8.         }) 
    9.         if(changed){ 
    10.             Promise.resolve().then(callback()) 
    11.             lastEffectDependencies = dependencies 
    12.         } 
    13.     }else{  
    14.         Promise.resolve().then(callback()) 
    15.         lastEffectDependencies = dependencies 
    16.     } 
    17. } 
    18. function App() { 
    19.     let [number, setNumber] = useState(0) 
    20.     useLayouyEffect(()=>{ 
    21.         console.log(number); 
    22.     },[number]) 
    23.     return ( 
    24.  
    25.         
       
    26.              
    27.              setNumber(number+1)}>+ 
    28.          
    29.     ) 
    30. } 
    31. function render() { 
    32.     ReactDOM.render( 
    33.         , 
    34.         document.getElementById('root') 
    35.     ); 
    36. } 
    37. render() 

    恭喜你阅读到这里，又变强了有没有 已经把项目放到 github：https://github.com/Sunny-lucking/HowToBuildMyReactHook

    来源：前端阳光内容投诉

    免责声明：

    ① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

    ② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

    软考中级精品资料免费领

    • 2024年上半年信息系统项目管理师第二批次真题及答案解析（完整版）

      难度     813人已做
      查看

    • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

      难度     354人已做
      查看

    • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

      难度     318人已做
      查看

    • 2024年上半年软考高项第一、二批次真题考点汇总（完整版）

      难度     435人已做
      查看

    • 2024年上半年系统架构设计师考试综合知识真题

      难度     224人已做
      查看

    相关文章

    发现更多好内容

    猜你喜欢

    AI推送时光机

    手写ReactHook核心原理

    后端开发ReactHook2024-12-03

    ReactHook核心原理是什么

    后端开发2024-04-02

    手写Axios核心原理

    后端开发Axios核心2024-12-03

    JavaScript手写Promise核心原理

    后端开发2024-04-02

    30个类手写Spring核心原理之环境准备

    后端开发Spring核心原理2024-12-02

    手写Axios核心原理，再也不怕面试官问我Axios原理

    后端开发axios核心原理2024-12-03

    手写Express核心原理，再也不怕面试官问我Express原理

    后端开发Express原理2024-12-03

    手写React核心原理，再也不怕面试官问我React原理

    后端开发React2024-12-03

    30个类手写Spring核心原理之MVC映射功能

    后端开发SpringMVC2024-12-02

    手写React-Redux核心原理，再也不怕面试官问我React-Redux原理

    后端开发React-Redux2024-12-03

    手写Async await核心原理，再也不怕面试官问我Async await原理

    后端开发ES7promise2024-12-01

    30个类手写Spring核心原理之依赖注入功能

    后端开发Spring依赖注入2024-12-02

    NameServer 核心原理解析

    后端开发NameServer2024-12-03

    Axios核心原理是什么

    后端开发2024-04-02

    ReentrantLock核心原理是什么

    后端开发2024-04-02

    如何理解golang里面的读写锁实现与核心原理

    后端开发2023-06-19

    零基础理解 ESLint 核心原理

    后端开发ESLint工作原理2024-12-02

    深入了解Zookeeper核心原理

    后端开发zookeeperZNode2024-12-03

    ReentrantLock核心原理，绝对干货

    后端开发ReentrantLock源码2024-12-03

    .NET WebSocket 核心原理初体验

    后端开发核心SignalR2024-12-03
    位置：首页-资讯-后端开发
    咦！没有更多了？去看看其它编程学习网 内容吧
    首页课程
    资料下载    问答资讯