React Hooks ---useMemo

useMemo下面我们通过一个实例，来理解下 useMemo的用法。父组件function App() { const [name, setName] = useState(‘名称’) const [content,setContent] = useState(‘内容’) return ( <> <button onClick={() => setName(new Date().getTime())}>name</button> <button onClick={() => setContent(new Date().getTime())}>content</button> <Button name={name}>{content}</Button> </> )}子组件function Button({ name, children }) { function changeName(name) { console.log(‘11’) return name + ‘改变name的方法’ } const otherName = changeName(name) return ( <> <div>{otherName}</div> <div>{children}</div> </> )}熟悉react的同学可以很显然的看出，当我们点击父组件的按钮的时候，子组件的name和children都会发生变化。注意我们打印console.log的方法。不管我们是改变name或者content的值，我们发现 changeName的方法都会被调用。是不是意味着我们本来只想修改content的值，但是由于name并没有发生变化，所以无需执行对应的changeName方法。但是发现他却执行了。这是不是就意味着性能的损耗，做了无用功。下面我们使用useMemo进行优化优化之后的子组件function Button({ name, children }) { function changeName(name) { console.log(‘11’) return name + ‘改变name的方法’ }const otherName = useMemo(()=>changeName(name),[name]) return ( <> <div>{otherName}</div> <div>{children}</div> </> )}export default Button这个时候我们点击改变content值的按钮，发现changeName 并没有被调用。但是点击改变name值按钮的时候，changeName被调用了。所以我们可以使用useMemo方法避免无用方法的调用，当然一般我们changName里面可能会使用useState来改变state的值，那是不是就避免了组件的二次渲染。达到了优化性能的目的