svelte 中的 useRef 相当于什么？

Question

我在 svelte 中有一个组件，我需要在其中定义一个名为 的值oldVal，该值不绑定到任何html元素，并将其初始化为值 X。下次组件渲染时，我想将其值更新为 X1，并且该值应该持续到下一次渲染，依此类推。在反应中我们使用useRef这个，但是如何在不编写存储的情况下以svelte实现这个？

编辑：添加一些代码

所以，基本上，我在组件内进行转换，其中我有一个自定义的 css 转换函数

<script>
export let tick;
export let tranX;
import {select} from 'd3-selection';
import {interpolate} from 'd3-interpolate';

// This value is initially 0 but then updated on each render
let oldVal =0;

//Custom CSS transition function
function animateX(node, {duration}){
const xTranslate = +select(node)
      .attr('transform')
      .split('(')[1]
      .split(',')[0];//Here I extract the translate value in the x direction
    const interVal =
      oldVal > xTranslate 
        ? interpolate(xTranslate , oldVal)
        : interpolate(oldVal, xTranslate );

    oldVal = xTranslate ; //Here I update the value, to interpolate values in the next render

    return {
      duration,
      css: (t) => {
        return `
        transform:translate(${interVal(t)},0);
        `;
      },
    };
  }
</script>

 <g
   opacity="1"
   transform="translate({tranX}, 0)"
   in:animateX={{ duration: 2000 }}
 >
   <line y2="6" stroke="black" />
   <text text-anchor="end" transform="rotate(-45)" y="20">{tick}</text>
 </g>

所以，基本上我想做的是在第一个渲染中g从0计算值转换到计算值xTranslate，然后更新，oldValue以便oldVal = xTranslate下一个渲染oldVal开始xTranslate

Answer 1

在 Svelte 中，useRef()是bind:this.

<script>
  let inputEl;
  let handleClick = () => inputEl.focus()
</script>

<input bind:this={inputEl}/>
<button on:click={handleClick}>Focus</button>

您可以从此存储库中找到更多 Svelte 中的 React hooks 示例