React:避免在父组件频繁重新渲染时对子组件进行不必要的重新渲染(使用回调道具)

Question

父组件接收到导致重渲染的道具数据(存在于redux中，每秒都不同(。如何避免不必要的子组件重渲染？React.memo不起作用，因为每次的回调都不同

class Parent extends React.Component { 
constructor(props) {
super(props);
this.state = {
value: '',
};
}
shouldComponentUpdate(nextProps, nextState) {
return (!isEqual(nextProps.data, this.props.data)
||  !isEqual(nextState, this.state));
}
onChangeHnadler = (e) => {
this.setState({value: e.target.value})
}
render () {
const { value } = this.state;
return (
<Child value={value} onChange={this.onChangeHnadler}/>
);
}
const Child = React.memo(({value, onChange}) => {
return <input value={value} onChange={onChange}/>
});

Answer 1

使用传递给memoHOC的第二个参数memocompare函数。我假设value道具更稳定？如果

const areEqual = (prevProps, nextProps) => {
return prevProps.value === nextProps.value;
};
const Child = React.memo(
({value, onChange}) => <input value={value} onChange={onChange}/>,
areEqual
);

注意

此方法仅作为性能优化存在。不要依赖它可以"阻止"渲染，因为这可能会导致错误。