教你学习react-初学者的hooks-useCallback-useMemo

1.useCallback组件被多次调用，多次渲染，性能低下。demo可以查看gitreact-Hooks-study/src/components/reactTs/useCallback详细的useCallback需要注意。一种是react的高阶函数React.memo结合useCallback学习使用React.memo防止props或state没有变化时组件的重新渲染。了解什么是useCallback，如何使用useCallback来缓存一个方法，并且只依赖少数变量的变化来更新，避免传递给子组件的props每次都被更新，最终避免子组件不必要的重新渲染。importReactfrom"react";functionCount(props:{text:string;count:number}){console.log(`RenderingCount${props.text}`);return(

);}exportdefaultReact.memo(Count);constincrementAge=useCallback(()=>{setAge(age+1);},[age],);constincrementSalary=useCallback(()=>{setSalary(薪水+1000);},[薪水],);2.useMemoconstmemoizedValue=useMemo(()=>computeExpensiveValue(a,b),[a,b]);返回一个记忆值。将“create”函数和依赖项数组作为参数传递给useMemo，它只会在依赖项之一发生变化时重新计算记忆值。这种优化有助于避免在每次渲染时进行昂贵的计算。请记住，传递给useMemo的函数将在渲染期间执行。请不要在该函数内进行与渲染无关的操作。副作用等操作属于useEffect的适用范围，不属于useMemo。如果没有提供dependencies数组，useMemo将在每次渲染时计算新值。您可以将useMemo用作性能优化，但不要将其视为语义保证。将来，React可能会选择“忘记”一些以前的记忆值，并在下一次渲染时重新计算它们，例如为屏幕外组件释放内存。首先编写无需useMemo即可运行的代码-稍后将useMemo添加到您的代码中以优化性能。importReact,{useState}from'react'functionCounter(){const[counterOne,setCounterOne]=useState(0)const[counterTwo,setCounterTwo]=useState(0)constincrementOne=()=>{setCounterOne(counterOne+1)}constincrementTwo=()=>{setCounterTwo(counterTwo+1)}constisEven=()=>{leti=0while(i<1000000000)i+=1returncounterOne%2===0}return()}exportdefaultCounteruseMemo在性能优化中的作用。通过缓存函数的返回值，避免不必要的调用，从而避免组件重新渲染。最后分析useMemo和useCallback的区别，即useMemo缓存了函数的返回值，useCallback缓存了函数本身。这两个API都是性能优化的方法。个人建议从性能优化的角度，少用useCallback。建议####useRef解决方案