javascript - 使用 React 更新包含 Canvas 的组件

Question

所以我试图修改包含 Canvas 元素的组件的状态。 Canvas 本身不应该更新，因为受影响的状态不会影响 Canvas 的渲染？

import React from 'react';

export default class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            isPlaying: false
        }
    }

    handleClick() {
        this.setState({isPlaying: true});
    }

    componentDidMount() {
        this.ctx.fillRect(50,50, 100, 100);
    }

    render() {
        return(
            <div id='container'>
                <canvas width={900} height={500}
                    ref={r => this.ctx = r.getContext('2d')}
                    onClick={() => this.handleClick()} />
            </div>
        );
    }
}

然而，当我触发 Canvas 的 onClick 事件时会出现错误:

Uncaught TypeError: Cannot read property 'getContext' of null
at ref (App.js:52)

Answer 1

React 组件将在其任何状态属性更改时重新呈现自身。如果您想控制此行为，请考虑覆盖 shouldComponentUpdate方法。如果您返回 false从此方法适用于任何 state条件，您的组件将不会为该条件重新渲染。

现在，关于错误，你应该移动 ref 的箭头函数定义成函数引用。

原因是，箭头函数在重新渲染时总是作为新实例传递，而函数引用在第一次渲染时只会传递一次。

阅读更多来自 here更详细地了解这一点。

您的实现应如下所示:

import React from "react";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isPlaying: false
    };
    this.setContext = this.setContext.bind(this);
  }

  setContext(r) {
    console.log(r);
    this.ctx = r.getContext("2d");
  }

  handleClick(e) {
    this.setState({ isPlaying: true });

  }

  componentDidMount() {
    this.ctx.fillRect(50, 50, 100, 100);
  }

  render() {
    return (
      <div id="container">
        <canvas
          width={900}
          height={500}
          ref={this.setContext}
          onClick={() => this.handleClick()} />
        />
      </div>
    );
  }
}