날씬하다

올여름에 나는 반응 구성 요소 사이의 이동 변수와 관련된 전단 인터뷰를 해 왔다.이것은 내가 가장 잘하지 못하는 일이다.
여러 해 동안 jQuery 응용 프로그램은 스파게티 코드가 생겨서 변수가 서로 다른 리셋에 분산되어 있다는 비난을 받았다.이것은 응용 프로그램에 대한 추리를 까다롭게 한다.
React는 상태/수명 주기를 명확히 하여 환영과 축하를 받았습니다.이것은 정말 도움이 된다.그러나 구성 요소 사이에서 변수를 이동하는 것은 항상 어색하고 해마다 더욱 복잡해지는 것 같다.

앤드류 클라크
@경석고

만약 내가 타임머신을 가지고 있다면 2016년으로 돌아가 젊은 자신의 어깨를 잡고 "네, 전 세계의 가변 상태는 매우 나쁘지만 국부적인 돌연변이가 좋습니다. 당신이 그것을 피하기 위해 하는 갈수록 복잡한 노력은 오도되었을 뿐만 아니라 당신의 합작자를 미치게 했습니다."라고 외칠 것입니다.
2019년 5월 23일 오전 07:01
백
701
이것이 바로 나를 끌어당기는 이유다. 너는 무서운 방식으로 거리에서 변수를 바꿀 수 있다.그것은 모든 스파게티에 대한 수요를 회피한 것 같다.

<!-- Parent.svelte -->
<script>
  import Child from './child.svelte'
  let str = 'init'
  setTimeout(() => {
    str = 'changed'
  }, 2500)
</script>
<div>
  <Child {str} />
</div>

<!-- Child.svelte -->
<script>
  export let str = ''
</script>
<div>
  child: <b>{$str}</b>
</div>

여기서 아이의 HTML이 자동으로 업데이트됩니다.이것은 사실상 매우 대단한 일이다.코드의 절반을 잃어버린 것 같습니다.

답전이 없습니다...?

나는 Svelte에서 때때로 흐름을 제어하는 문제에 부딪힐 수 있다는 것을 인정한다.약간의 수수께끼가 있을 수 있다.나는 때때로 내가 전화를 하지 말아야 할 때 오히려 답전을 하고 있다는 것을 발견한다.
이 예제를 고려하십시오.

<script>
  let value = 'foo'
</script>
<div>
  <input bind:value />
  magical variable: <b>{value}</b>
</div>

이 변수는 뜨겁다. 그것은 양방향으로 연결된다.출처를 보시면 getElementById's과addEventListener's - 보통 본인이 쓰는 것이 있습니다.

아니면 답전이 없습니까?

부모 대상이 하위 대상에 변수를 전달할 때, 하위 대상은 자동으로 변경 사항을 탐지합니다.학부모는 귀하가 bind 를 사용할 때만 아이의 의견을 청취할 수 있습니다.

<!-- one-way (down) -->
<Child str={str} />
<!-- both-ways -->
<Child bind:str />

손자는 중첩 귀속을 사용하여 변수를 변경할 수 있습니다 -

prop ➔ bind:prop ➔ bind:prop

형제자매는 두 개의 귀속을 사용하여 변수를 변경할 수 있습니다 -

prop ➔ [bind:prop, bind:prop]

이 두 가지 상황에서 모든 구성 요소 간의 내용은 스프레드시트처럼 자동으로 업데이트됩니다.
좋아, 이 bind 너무 미쳤어.그것은 웹 개발의 상당 부분을 자동화시켰다.이것은 자동화된 큰 덩어리의 빨아들이다.느꼈어.
bind는 내가 망친 Redux 면접 문제도 많이 해결했다고 할 수 있다.

근데 리셋은요?

물론, 나는 이것에 대해 여전히 약간 곤혹스럽다.
Svelte는 변수가 무서운 의존 관계도에 들어갔다는 것을 let이 아니라 $로 설명할 수 있는 방법이 있습니다. 변수가 언제 변할지 알고 있습니다.
나는 완전히 알지는 못하지만, 그것은 정말 강한 것 같다.

<!-- Parent.svelte -->
<script>
  import Child from './Child.svelte'
  let str = 'init'
  // (fancy-part!)
  $: strLen = () => {
    return str.length
  }
</script>
<div>
  <Child bind:str />
  {strLen()}
</div>

<!-- Child.svelte -->
<script>
  export let str = ''
  setTimeout(() => {
    str = 'child-changed'
  }, 2000)
</script>

서브어셈블리가 변수를 변경하면 함수가 다시 시작되고 DOM도 신기하게 업데이트됩니다.
내 말은, 이것은 답조다.나는 단지 더 이상 전할 필요가 없을 뿐이다.이 $: 도구를 사용하면 언제든지 위쪽, 아래쪽, 측면 구성 요소에서 변경 사항을 정탐할 수 있습니다.손을 들어 수고하다

이 가능하다, ~할 수 있다,...

이 세 가지 측면-

'핫'아이템(하강)

'귀속'개념(상승)

the$:thing(anywhere)

그것들은 마치 완전한 인터페이스인 것 같다.아마도 이것이 우리가 원하는 공공 도서관과 소스 구성 요소의 인터페이스일 것이다.나는 말할 수 없다.
가벼운 구성 요소의 인터페이스가 어떻게 되어야 하는지에 대해서는 아무런 복음이 없는 것 같다.많은 라이브러리에서 아이템을 받아들이고 변경된 아이템마다 리셋합니다.나는 이런'사건 시작'리셋 스타일도 나에게 있어서 매우 멋있다고 생각한다.
읊다, 읊조리다이것은 관찰할 수 있는 자/자 대상이다.나는 그렇게 많이 필요하지 않다는 것을 발견할 때까지 상점을 자주 사용한다.변수 업데이트에 대해 그것들은 더욱 명확하고 전통적이다.
아마도 날씬한 구성 요소는 쓰기 가능한 저장소를 도구로 받아들여야 합니까?이렇게 보입니다.

<!-- Parent.svelte -->
<script>
  import { writable } from 'svelte/store'
  import Child from './Child.svelte'
  let str = writable('init')
  str.subscribe(wowChanged => {
    // is this a callback?
  })
</script>
<div>
  <Child {str} />
</div>

<!-- Child.svelte -->
<script>
  export let str
  setTimeout(() => {
    $str = 'child-changed' //change store
  }, 2000)
</script>

이것도 멋있을 것 같아.
읊다, 읊조리다멋있어 보여요.
읊다, 읊조리다멋있어 보여요.
날씬한 개발자들도 이galaxybrain 다중 페이지 응용 프로그램the Store concept을 개발하고 있으며, 아마도 구성 요소를 둘러싸고 데이터를 보낼 것이다.차갑다
모든 것이 다 좋다.Svelte는 매우 재미있고 유연한 라이브러리입니다.나는 점점 더 많은 사람들이 가입함에 따라 정보를 전달하는 내용이 더욱 명확해지기를 바란다.나는 다시는 그것을 생각하고 싶지 않다.