React.memo和useMemo

React.memo和usememo

React.memo

React.memo是一个高阶组件,对组件进行性能优化,主要用于优化函数组件的性能,如果一个组件在相同的props下渲染出相同的结果,但是又不需要在组件更新的时候重新渲染,就可以使用react.memo来对其进行性能优化
React.memo能够记忆组件的渲染,让它在prop没有发生变化的时候重用上一次的结果,从而避免不必要的渲染专门用于函数组件

javascript 复制代码
const MyComponent = React.memo(function MyComponent(props) {
	//
}
const MyComponent = React.memo(props => {
	// 
})

在默认情况下,react.memo只会对props进行浅层比较,如果props的结果比较复杂或者包含了不可变的数据结构,需要传入第二个参数,一个比较函数,来定制更新时机。

javascript 复制代码
const Mycomponent = React.memo(
	function MyComponent(props) {
		//
	},
	(prev, next) => {
		//
	}
)

React.memo仅检查props变化,如果函数组件中有使用useState,useReducer或者是useContext这些hook的时候,就算props没有发生变化,组件还是会重新渲染,内部组件状态的变化或者是上下文的变化都会导致组件的更新。
只有组件更新比较频繁,而且更新不依赖于内部状态或者上下文的时候,使用React.memo比较合适

  • React.memo可能会增加应用的内存使用量,因为需要记忆组件的渲染结果
  • 如果组件经常有新的props传入导致经常重新渲染,使用react.memo会导致性能的负担
  • 组件渲染很快,或者是更新不频繁,没有必要使用react.memo
  • 最好是在遇到性能瓶颈的时候使用这些优化手段

useMemo

useMemo接受两个参数,分别是一个函数和一个数组,实际上是以来,函数里return函数,数组内存放依赖

javascript 复制代码
interface ChildProps {
    name: { name: string; color: string };
    onClick: Function;
}
const Child = ({ name, onClick}: ChildProps): JSX.Element => {
    console.log('子组件?')
    return(
        <>
            <div style={{ color: name.color }}>我是一个子组件,父级传过来的数据:{name.name}</div>
            <button onClick={onClick.bind(null, '新的子组件name')}>改变name</button>
        </>
    );
}
const ChildMemo = memo(Child);

const Page = (props) => {
    const [count, setCount] = useState(0);
    const [name, setName] = useState('Child组件');
    
    return (
        <>
            <button onClick={(e) => { setCount(count+1) }}>加1</button>
            <p>count:{count}</p>
            <ChildMemo 
                //使用useMemo,返回一个和原本一样的对象,第二个参数是依赖性,当name发生改变的时候,才产生一个新的对象
                name={
                    useMemo(()=>({ 
                        name, 
                        color: name.indexOf('name') !== -1 ? 'red' : 'green'
                    }), [name])
                } 
                onClick={ useCallback((newName: string) => setName(newName), []) }
                {/* useCallback((newName: string) => setName(newName),[]) */}
                {/* 这里使用了useCallback优化了传递给子组件的函数,只初始化一次这个函数,下次不产生新的函数
            />
        </>
    )
}
相关推荐
没有鸡汤吃不下饭9 分钟前
前端【数据类型】 No.1 Javascript的数据类型与区别
前端·javascript·面试
用户76787977373210 分钟前
后端转全栈之Next.js后端及配置
react.js·next.js
码流之上12 分钟前
【一看就会一写就废 指间算法】设计电子表格 —— 哈希表、字符串处理
javascript·算法
跟橙姐学代码12 分钟前
Python时间处理秘籍:别再让日期时间卡住你的代码了!
前端·python·ipython
汤姆Tom17 分钟前
从零到精通:现代原子化 CSS 工具链完全攻略 | PostCSS × UnoCSS × TailwindCSS 深度实战
前端·css·面试
菜市口的跳脚长颌18 分钟前
Web3基础
前端
RoyLin20 分钟前
TypeScript设计模式:代理模式
前端·后端·typescript
IT_陈寒2 小时前
Vue3性能优化实战:这5个技巧让我的应用加载速度提升了70%
前端·人工智能·后端
树上有只程序猿2 小时前
react 实现插槽slot功能
前端