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