当前位置：首页 > news >正文

React.memo和useMemo

news 2025/8/17 15:07:39

React.memo和usememo

React.memo

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

const MyComponent = React.memo(function MyComponent(props) {//
}
const MyComponent = React.memo(props => {// 
})

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

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函数，数组内存放依赖

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优化了传递给子组件的函数，只初始化一次这个函数，下次不产生新的函数/></>)
}