假设我有这些 React 组件：
const Compo1 = ({theName}) => {
return (
<Nested foo={() => console.log('Dr. ' + theName)}/>
);
};
const Compo2 = ({theName}) => {
function theFoo() {
console.log('Dr. ' + theName);
}
return (
<Nested foo={theFoo}/>
);
};
和嵌套组件，包裹在memo：
const Nested = React.memo(({foo}) => {
return (
<Button onClick={foo}>Click me</Button>
);
});
在传递函数foo中总是重建中Compo1还Compo2，是否正确？
如果是这样，既然foo每次都收到一个新的函数，是不是就意味着memo没用了，所以Nested总是要重新渲染？
您可以使用新的钩子 Api(React >= 16.8) 来避免重新创建回调函数。
只需为此使用 useCallback 钩子。
例如
父组件
import React, { useCallback} from 'react';
const ParentComponent = ({theName}) => {
const theFoo = () => {
console.log('Dr. ' + theName);
}
const memoizedCallback = useCallback(theFoo , []);
return (
<Nested foo={memoizedCallback}/>
);
};
useCallback 将返回回调的记忆版本，该版本仅在依赖项之一发生更改时才会更改（在第二个参数中传递）在这种情况下，我们将空数组作为依赖项传递，因此该函数将仅创建一次。
和嵌套组件：
import React, { memo } from 'react';
const Nested = ({foo}) => (
<Button onClick={foo}>Click me</Button>
);
export default memo(Nested);
欲了解更多信息 - https://reactjs.org/docs/hooks-reference.html#usecallback
该memo函数将浅比较每个不同的props，包括函数。但是，通过在每次渲染中重新定义组件内部的函数，您每次都会创建不同的引用，从而触发重新渲染。
虽然，正如您在 中看到的Comp3，您仍然可以使用备忘录并通过声明外部函数来避免重新呈现：
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
}
}
componentDidMount = () => {
setInterval(() => { this.setState({ e: true }) }, 2000)
}
render() {
return (
<div>
<Compo1 />
<Compo2 />
<Compo3 />
</div>
)
}
}
const Compo1 = () => <Nested foo={() => console.log('Comp1 rendering')} />
const Compo2 = () => {
function theFoo() {
console.log('Comp2 rendering');
}
return <Nested foo={theFoo} />
};
const foo3 = function (text) { console.log('Comp3 rendering ' + text) }
const Compo3 = () => <Nested foo={foo3} />
const Nested = React.memo(({ foo }) => {
foo('a param')
return <div />
})
ReactDOM.render(<App />, document.getElementById('root'))<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id='root'>我发现的最好的方法是使用useRef. 具体来说，我将此结构与 Formik 一起使用，以防止重新渲染一长串输入值。
const MyMemoizedGroupList = React.memo(
({
groups,
arrayHelpersRef,
}) => {
// [..] stuff
}
}
function MainComponent() {
const groupsArrayHelpersRef = React.useRef();
return (
<Formik
// [..] stuff
render={({ values }) => (
<Form>
<FieldArray
name="groups"
render={arrayHelpers => {
groupsArrayHelpersRef.current = arrayHelpers;
}}
/>
<MyMemoizedGroupList
groups={values.groups}
arrayHelpersRef={groupsArrayHelpersRef}
/>
{/* [..] stuff */}
</Form>
)}
/>
);
}