reactjs - 使用 React 钩子防止 React 重新渲染 D3 图表
问题描述
我一直在分别使用 React 和 D3,现在有一个项目需要对应用程序的绘图功能进行低级别控制。基本上,当用户放大时,我需要能够从数据库中获取更高分辨率的数据,反之亦然,当用户缩小时,在绘图上。
我找到了一些同时使用 D3 和 React 的方法。我想尝试让我所有的 React 代码都基于 hooks API,因为它是用于其余代码库的。我正在努力为我所面临的特定情况获得等效的钩子。React hooks 的文档很棒,但我认为我的情况更像是一个边缘案例,我还没有看到任何与我所拥有的类似用例相关的讨论。
代码的逻辑相当简单:我有一个主容器,称为 App.js,它保存一些状态。App.js 呈现一个 Wrapper 组件(这是发生挑战的地方),然后 Wrapper.js 文件简单地创建 D3 Plot。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;
我已经开始整理下面的钩子版本,但是对于 shouldComponentUpdate 和 componentWIllReceiveProps 块的情况,我无法提出满足我所追求的特定要求的合适方法。
挂钩版本:
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 重新渲染 Wrapper 组件。
这完全有可能还是我最好将其保留为基于类的组件?
我一直在用头撞墙,试图在没有任何成功的情况下获得逻辑,所以任何输入都将不胜感激。
解决方案
你可以用合适的依赖项将你的返回值包装在 React useMemo 中。
推荐阅读
- html - 当我使用 jquery 的超时时,htm5 音频在 safari 上不起作用
- jasmine - 在魅力报告中对套房进行分类,在套房选项卡中
- php - 在 codeigniter 中使用 oho excel 生成 excel 时无法访问此站点
- java - StringTokenizer 显示不需要的结果
- dynamic - Highcharts - 根据某些条件动态地将点添加到具有不同颜色的图表
- android - 使用共享意图在什么应用程序中共享超链接文本?
- r - 数据表中的R闪亮列未填充但没有错误
- jquery - Jquery + regex 脚本以任何顺序匹配单词以进行实时搜索
- java - Selenium @test (dependsOnMethods) 错误
- java - 外部数据库访问,我的应用程序崩溃