React memo减少重复渲染详解_React_

import React, { useState, memo } from 'react' const Child = () => { console.log('child') return ( 
child组件
 ) } const App = () => { let [count, setCount] = useState(100) let [name, setName] = useState('张三') return ( 
App -- {count}
 { setCount(v => v + 1) }}> ++++ 
 ) } export default App

import React, { useState, memo } from 'react' const Child = memo(() => { console.log('child') return ( 
child组件
 ) }) const App = () => { let [count, setCount] = useState(100) let [name, setName] = useState('张三') return ( 
App -- {count}
 { setCount(v => v + 1) }}> ++++ 
 ) } export default App

import React, { useState, memo } from 'react' // React.memo顶层Api方法，它可以用来减少子组件的重复渲染次数，从而提升组件渲染性能 // React.memo它是一个只能在函数组件中使用的顶层Api方法 const Child = memo(({count}) => { console.log('child') return ( 
 {/* 此时子组件只依赖于父组件中的 count,所以父组件中的count改变， 子组件就会重新渲染，而input框中的值改变对子组件没有影响 */} 
child组件 -- {count}
 ) }) const App = () => { let [count, setCount] = useState(100) let [name, setName] = useState('张三') return ( 
App -- {count}
 setName(e.target.value)} /> { setCount(v => v + 1) }}> ++++ 
 ) } export default App

import React, { useState, memo } from 'react' // shouldComponentUpdate它必须要有一个返回值，true则表示继续渲染，false停止渲染 // React.memo参数2返回值如果为true则表示停止渲染，false继续渲染 const Child = memo( ({ count }) => { console.log('child') return ( 
child组件 -- {count}
 ) }, // prevProps 旧的props数据 object // nextProps 新的props数组 object // 可以比较两者的不同，来决定是否重新渲染 // 参数2写的回调函数，一般情况下都在props传过来的数据为引用类型，才需要手动来判断，如果是基本类型则不需要写参数2，来手动判断。 (prevProps, nextProps) => { // true/false // return false // console.log(prevProps, nextProps) return prevProps.count === nextProps.count } ) const App = () => { let [count, setCount] = useState(100) let [name, setName] = useState('张三') return ( 
App -- {count}
 setName(e.target.value)} /> { setCount(v => v + 1) }}> ++++ 
 ) } export default App

import React, { useState, memo } from 'react' import _ from 'lodash' // shouldComponentUpdate它必须要有一个返回值，true则表示继续渲染，false停止渲染 // React.memo参数2返回值如果为true则表示停止渲染，false继续渲染 const Child = memo( ({ count }) => { console.log('child') return ( 
child组件 -- {count.n}
 ) }, // 使用lodash库来完成对象的值的比较，从而用来完成减少组件的无用的重复渲染 (prevProps, nextProps) => _.isEqual(prevProps, nextProps) ) const App = () => { // let [count, setCount] = useState(100) let [count, setCount] = useState({ n: 100 }) let [name, setName] = useState('张三') return ( 
 {/* 
App -- {count}
 */} 
App -- {count.n}
 setName(e.target.value)} /> { setCount({ n: Date.now() }) }} > ++++ 
 ) } export default App