Redux: 那么如何使用redux处理html5 canvas

创建于 2015-07-21 · 3评论 · 资料来源: reduxjs/redux

嗨，我有一个项目，它有一个画布区域，我在上面的 3 个静态布局之一中渲染图形（即节点 + 边）。假设在另一个组件（可能是顶部导航栏）上，用户单击一个按钮，它应该触发画布为这些节点和边缘设置动画，移动它们以将它们更改为 3 个中的另一个布局。

所以我的问题是：在这种情况下，显然状态对于渲染画布不会太有用，因为这是绘制上下文的工作。但是，画布仍然有它的“状态”，这是它的布局参数，但是一旦state.layout更改，我不希望 React 刷新 HTML 画布元素，因为正如我所说，这是绘图的工作上下文（如果我这样做，我会丢失动画，因为它是对 HTML 元素的重新渲染，而不是画布）。因此，我在这里唯一需要的是通过 Actions 在组件之间进行分派。

但是在 Flux 中（Redux 也是一样），它会改变状态来触发 UI 重新渲染，而 UI 是基于状态本身的。在canvas中，Actions还是会触发状态的改变，但是UI（canvas）是通过重绘来呈现的。

我问这个是因为我的项目只有一半使用画布，并且有很多组件完全由 React 渲染（是的，我使用的是 React 但没有使用 Flux 模式）。我不喜欢 Flux，因为在我看来它有点“过度设计”。然后我找到了这个 Redux，它只是减少了我对 Flux 不喜欢的部分。但是，我仍然有这个画布问题，我不确定使用 Redux 是否明智。

你能给我一些提示或小代码片段来帮助我吗？或者如果你认为在我上面提到的项目中使用 Redux 不合适，也请告诉我。

太感谢了！

PS 我在 youtube 上看过你的视频（关于 react hot loader + Redux 演讲）。杰出的。

question

资料来源

rui-ktei

👍1

最有用的评论

如果我理解正确的话，这与我最近在将 D3 与 React 集成时遇到的问题本质上是相同的。我需要创建初始的<svg>标签并渲染我的状态，然后随着状态的变化，启动 d3 动画，添加新元素，删除元素等。

这篇StackOverflow 文章解释了如何让 React 第一次渲染你的<svg>元素（或者在你的情况下<canvas> ，然后让 React 保持它肮脏的小手指远离它，同时当状态改变时，仍然给你机会重绘：

这是文章中的代码：

React.createClass({
    render: function() {
        return <svg></svg>;
    },
    componentDidMount: function() {
        d3.select(this.getDOMNode())
            .call(chart(this.props));
    },
    shouldComponentUpdate: function(props) {
        d3.select(this.getDOMNode())
            .call(chart(props));
        return false;
    }
});

需要注意的关键是shouldComponentUpdate()总是返回false ，所以 React 在初始渲染后永远不会触及 DOM 的那部分。

您应该能够将 d3 调用替换为对渲染代码的调用。

mindjuice 于 2015-07-23

👍4

所有3条评论

这是文章中的代码：

React.createClass({
    render: function() {
        return <svg></svg>;
    },
    componentDidMount: function() {
        d3.select(this.getDOMNode())
            .call(chart(this.props));
    },
    shouldComponentUpdate: function(props) {
        d3.select(this.getDOMNode())
            .call(chart(props));
        return false;
    }
});

需要注意的关键是shouldComponentUpdate()总是返回false ，所以 React 在初始渲染后永远不会触及 DOM 的那部分。

您应该能够将 d3 调用替换为对渲染代码的调用。

mindjuice 于 2015-07-23

👍4

@mindjuice 非常感谢。这绝对帮助了我。顺便说一下，我是这个问题的作者 rui-infotrack。我之前用的是公司的账号...

ktei 于 2015-07-23

我要结束了，如果您需要有关 Redux 的更多信息，请告诉我。

gaearon 于 2015-07-31

此页面是否有帮助？

0 / 5 - 0 等级

Redux: 那么如何使用redux处理html5 canvas

最有用的评论

所有3条评论

相关问题