function tick() {    // 绘制动画内容至载体上    // 下一帧继续执行，则调用    requestAnimationFrame(tick);};
// 开始执行 tick 逻辑，用于动画的不间断绘制tick();

const stage = new Konva.Stage({    container: 'container',    width: 100,    height: 100,});
// 这里 Layer 是实际的 Canvas 实例const layer = new Konva.Layer();stage.add(layer);let x = 0;
// 创建一个矩形并添加到 Canvas 中const rect = new Konva.Rect({    x: x,    y: 20,    width: 50,    height: 50,    fill: 'red',});layer.add(rect);
// 定时更新 rect 这个对象的位置function tick() {    x += 1;
    // 更新位置后便重绘    rect.setAttr('x', x);    rect.draw();
    if (x > 30) {        return;    }    requestAnimationFrame(tick);};
tick();

function createPic(canvasContainer) {    const width = 100;    const height = 100;    // 根据传入的 canvasContainer 来创建画布    const stage = new Konva.Stage({        container: canvasContainer,        width: width,        height: height,    });    // 其余与上面的代码类同    return stage;}
// 使用 React 函数组件方式建立 Canvas 或者对应的容器function DrawCanvas() {    const ref = useRef();
    useEffect(() => {        // 将 div 容器传入方法创建对应的场景元素        const stage = createPic(ref.current);        // 销毁容器        return () => {            stage.destroy();        }    }, []);    return <div ref={ref} id="canvasContainer" />;}

import React, { useEffect, useRef, useState } from 'react';import { Layer, Rect, Stage, Text } from 'react-konva';import Konva from 'konva';
const Picture = () => {    // 这里只是为了表明这里 div 和 konva 的 Rect 能同时被绘制，因此加了一层 div 元素    // 实际可以不需要    return (        <div>            <Stage width={100} height={100}>                <Layer>                    <Rect                        x={0}                        y={20}                        width={50}                        height={50}                        fill="red"                    />                </Layer>            </Stage>        </div>    );};

import ReactFiberReconciler from 'react-reconciler';// 这里的 HostConfig 是接口的具体实现import * as HostConfig from './ReactKonvaHostConfig';// 创建自定义的 renderconst KonvaRenderer = ReactFiberReconciler(HostConfig);
// Stage 的函数组件function StageWrap(props) {  // ...do something  const container = useRef();
  React.useLayoutEffect(() => {    // 创建渲染的根节点，传入的属性略过    // 这里使用 StageWrap 里返回的 div 作为 Stage 的容器    // 相当于在 react-dom 中开启了第二个 render    const stage = new Konva.Stage({ container: container.current });    // 利用自定义创建    fiberRef.current = KonvaRenderer.createContainer(stage);    KonvaRenderer.updateContainer(props.children, fiberRef.current);
    // unmount 的时候对 Stage 画布本身进行销毁    return () => {      KonvaRenderer.updateContainer(null, fiberRef.current, null);      stage.destroy();    };  }, []);
  // 每次 StageWrap 被触发 componentDidUpdate 时，同时更新内容  React.useLayoutEffect(() => {    applyNodeProps(stage.current, props, oldProps);    KonvaRenderer.updateContainer(props.children, fiberRef.current, null);  });
  return (    <div      ref={container}    />  );}

function createInstance(type, props, rootContainer, hostContext, internalHandle) {    // 用于创建node的节点，!!!但不可操作本节点以外的内容，包括添加删除，事件也可以在后续再添加
    // 这里的type是string，因此可以直接根据type来选择对应的konva对象    let NodeClass = Konva[type];
    // 初始化节点的属性，由于事件不在这个方法内添加，因此从props中滤除    const propsWithoutEvents = excludeEvts(props);
    // 创建渲染用的对象并返回    const instance = new NodeClass(propsWithoutEvents);    return instance;}

function createTextInstance(text, rootContainer, hostContext, internalHandle) {  console.error(    `Text components are not supported for now in ReactKonva. Your text is: "${text}"`  );}

function appendInitialChild(parentInstance, child) {  // 这边做了一个额外的判断，如果是字符串类型的子节点，则不支持  //  (eg <Text>foo</Text>)  if (typeof child === 'string') {    console.error(      `Do not use plain text as child of Konva.Node. You are using text: ${child}`    );    return;  }
  // 节点添加  parentInstance.add(child);}

function commitUpdate(instance, updatePayload, type, prevProps, nextProps, internalHandle) {    // 对比新旧属性，并赋值属性到渲染对象上    applyNodeProps(instance, newProps, oldProps);}

const isPrimaryRenderer = false;

const Picture = () => {    const updateRef = useRef();    const xRef = useRef(0);    const [x, setX] = useState(0);    updateRef.current = setX;        // 创建 tick 函数，进行动态更新，只需要执行一次就可以了    useEffect(() => {        let id;        const tick = () => {            // 更新矩形的位置            xRef.current += 1;            updateRef.current(xRef.current);            if (xRef.current > 30) {                return;            }            id = requestAnimationFrame(tick);        };
        tick();        return () => {            cancelAnimationFrame(id);        };    }, []);        return (        <div>            <Stage width={100} height={100}>                <Layer>                    <Rect                        x={x}                        y={20}                        width={50}                        height={50}                        fill="red"                    />                </Layer>            </Stage>        </div>    );};

updateRef.current(xRef.current);

// 对 react 的节点，直接更新并绘制rectRef.current.setAttr('x', xRef.current);updatePicture(rectRef.current);

const Picture = () => {    // 获取 rect 的节点    const rectRef = useRef();    const xRef = useRef(0);        // 创建 tick 函数，进行动态更新，只需要执行一次就可以了    useEffect(() => {        let id;        const tick = () => {            xRef.current += 1;            // 直接更新并绘制            rectRef.current.setAttr('x', xRef.current);            updatePicture(rectRef.current);            if (xRef.current > 30) {                return;            }            id = requestAnimationFrame(tick);        };
        tick();        return () => {            cancelAnimationFrame(id);        };    }, []);        return (         <div>            <Stage width={100} height={100}>                <Layer>                    <Text text="Hello world" />                    <Rect                        x={x}                        y={20}                        width={50}                        height={50}                        fill="red"                    />                </Layer>            </Stage>        </div>    );};