We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
useMemo 与 PureComponent 功能类似,都是使组件不会因为其他不相关的参数变化而重新渲染。 PureComponent 适用于 class 组件,useMemo 适用于 Function 组件。另外 React.useMemo 可以指定一个参数,只有当这个参数改变时,才会重新渲染组件。
import React, {useMemo, useState} from 'react' function Child (props) { const showNumber = () => { console.log('========render========') return ( <div> <p>number is : {props.number}</p> </div> ) } return useMemo(showNumber, []) } export default () => { const [count, setCount] = useState(0) return ( <> <p>{count}</p> <button onClick={() => setCount(count+1)}>Click me!</button> <Child number={count}/> </> ) }
上面这段代码中,我们用 useMemo 处理了 Child 函数组件,useMemo 的第二个参数数组内,可以放入你改变数值就重新渲染 Function Component 的对象。如果[]为空就是只渲染一次,无论 props 发生什么变化,之后都不会渲染。 运行上面这段代码,我们会发现,Child 组件只在第一次渲染的时候,执行了一次 showNumber 方法,之后无论点击多少次 button 按钮,Child 都不会再重新渲染。
The text was updated successfully, but these errors were encountered:
No branches or pull requests
React useMemo 作用
useMemo 与 PureComponent 功能类似,都是使组件不会因为其他不相关的参数变化而重新渲染。
PureComponent 适用于 class 组件,useMemo 适用于 Function 组件。另外 React.useMemo 可以指定一个参数,只有当这个参数改变时,才会重新渲染组件。
如何使用
上面这段代码中,我们用 useMemo 处理了 Child 函数组件,useMemo 的第二个参数数组内,可以放入你改变数值就重新渲染 Function Component 的对象。如果[]为空就是只渲染一次,无论 props 发生什么变化,之后都不会渲染。
运行上面这段代码,我们会发现,Child 组件只在第一次渲染的时候,执行了一次 showNumber 方法,之后无论点击多少次 button 按钮,Child 都不会再重新渲染。
The text was updated successfully, but these errors were encountered: