使用 React 钩子来防止 React 重新渲染 D3 图表

Question

我一直在分别使用 React 和 D3，现在有一个项目，我需要对应用程序的绘图功能进行低级控制。基本上，我需要能够在用户放大时从数据库中获取更高分辨率的数据，反之亦然，当用户缩小绘图时。

我找到了几种一起使用 D3 和 React 的方法。我想尝试将我所有的 React 代码都基于钩子 API，因为这是用于其余代码库的代码。我正在努力为我面临的特定情况获得等效的钩子。关于 React 钩子的文档很棒，但我认为我的情况更像是一个边缘情况，我没有看到任何与我拥有的类似用例相关的讨论。

代码的逻辑相当简单： 我有一个主容器，称为App.js，它包含一些状态。App.js 呈现一个包装器组件(这是发生质询的位置(，然后包装器.js文件只是创建 D3 绘图。D3 图只是具有一些缩放事件的线图的典型 D3 代码。

包装器代码：

import React, { Component } from 'react';
import Plot from './Plot'; // D3 plot
class Wrapper extends Component {
// Sets up plot when Wrapper first added to DOM tree
componentDidMount(){
this.setState({
plot: new Plot(this.refs.plot, this.props.data, this.props.updateData)
});
};
// Do not allow React to re-render the Wrapper and therefore the Plot
shouldComponentUpdate(){
return false;
};
// When the data prop changes, execute the update() method in the plot file
componentWillReceiveProps(nextProps){
this.state.plot.update(nextProps.data) // the .update() method calls props.updateData()
}
render(){
return <div ref="plot"></div>
}
}
export default Wrapper;

我已经开始将下面的钩子版本放在一起，但我无法为应该组件更新和组件WIllReceiveProps块的情况提出合适的emthod来满足我所追求的特定要求。

钩子版本：

import React, { useEffect, useRef } from 'react';
import Plot from './Plot'; // D3 plot
const Wrapper = props => {
// destruct props
const { 
data = props.data,
fields = props.fields,
click = props.click
} = props
// initialise empty ref
const plotRef= useRef(null);
// ComponentDidMount translated to hooks
useEffect(() => {
new Plot(plotRef, data, updateData)
},[]) // empty array ensures the plot object is only created once on initial mounting
// shouldComponentUpdate
useEffect(...) // This won't work because render has already occurred before useEffect dependency array diffed?
// ComponentWIllReceiveProps
useEffect(() => {
plot.update(data)
}, [data]) // This won't work because component needs to have re-rendered
return (
<div ref= {plotRef}></div>
)

};
export default Wrapper;

我试图实现的是阻止初始挂载后 D3 图表的任何渲染，但如果父组件中的数据属性发生变化，请在 D3 类中执行方法，而不允许 React 重新渲染包装器组件。

这是可能的还是我最好将其保留为基于类的组件？

我一直在用头撞墙，试图获得逻辑没有任何成功，所以任何输入将不胜感激。

Answer 1

你可以用合适的依赖项将返回值包装在 React useMemo 中。

https://reactjs.org/docs/hooks-reference.html#usememo