Solid-js 기초 튜 토리 얼

Solid-js
사용자 인터페이스 구축 에 사용 되 는 성명 식,효율 적 이 고 유연 한 자 바스 크 립 트 라 이브 러 리공식 강좌에서 아래 에서 언급 한 일부 예 를 시도 할 수 있 습 니 다.본 고 는 공식 튜 토리 얼 의 일부 예 를 인용 하고 간소화 하 였 습 니 다.
본 고 는 일부 solid 의 주요 내용,더 많은 상세 한 내용,이동Solid API 문서을 서술 한다.
Solid 는 React 와 비슷 한 문법 과 Svelte 와 유사 한 사전 컴 파일 Solid 를 사 용 했 습 니 다.Solid 는 React 와 유사 하지만 React 와 달리 구성 요 소 는 한 번 만 초기 화 됩 니 다.state 가 바 뀌 면 전체 구성 요 소 를 렌 더 링 하 는 것 이 아 닙 니 다.이것 은 Vue 3 의 setup 과 유사 합 니 다.
솔 리드 를 선택 한 이유
솔 리드 홈 페이지다음 과 같은 이 유 를 제시 했다.

고성능-언제나 공 인 된 UI 속도 와 메모리 이 용 률 기준 테스트 에서 상위 권

강력-조합 가능 한 반응 식 원 어 와 JSX 의 유연성 결합

실 용적-합 리 적 이 고 맞 춤 형 API 로 개발 이 재 미 있 고 간단 해 짐

생산력-인체 공학 과 익숙 도 는 간단 하거나 복잡 한 것 을 쉽게 구축 할 수 있다

주요 우세
고성능-원생 에 가 까 운 성능,js-framework-benchmark순위 에서 상위 권 에 있 는 아주 작은 포장 부피-직접 DOM 작업 으로 컴 파일 되 며,가상 DOM 이 없 으 며,아주 작은 운행 시(Svelte 와 유사)독립 된 웹 Component 로 다른 응용 프로그램 에 삽입 하여 사용 하기 쉽 습 니 다-React 와 가 까 운 사용 체험 으로 빠 른 속도 로 시작 할 수 있 습 니 다.
빠 른 시작
새 항목

npx degit solidjs/templates/js my-app
cd my-app
npm i
npm run dev

기본 예시
여기에 App 구성 요 소 를 body 용기 에 렌 더 링 합 니 다.
여기 서 기본 예제 를 수정 하고 0 부터 시도 합 니 다.

// App.JSX
import { render } from "solid-js/web";

function App() {
  return (
    
Solid My App
  );
}
//               
/*
const App = ()=> (
Solid My App
);
*/

render(() => , document.querySelector("body"));

너무 익숙해 보이 지 않 아 요?React 처럼 편 해 요.
구성 요소 가 져 오기,전달 구성 요소,props
React 와 유사 한 사용 방법 이지 만 props 를 해체 할 수 없습니다.그렇지 않 으 면 반응 성 을 잃 게 됩 니 다.

// App.JSX
import { render } from "solid-js/web";

import Component1 from "./Component1.jsx";

function App() {
  return (
    

      Solid My App
      
        
children
      
    
  );
}

render(() => , document.querySelector("body"));

// Component1.jsx
export default function Component1(props) {
  return (
    

      {props.text}
      {props.children}
    
  )
}

반응 성
createSignal
signal 은 Solid 에서 가장 기본 적 인 반응 유닛 입 니 다.이 함 수 는 React 의 useState 와 유사 하지만,반환 함 수 는 React 처럼 직접 값 을 얻 는 것 이 아니 라 호출 값 을 얻 는 데 사 용 됩 니 다.다음은 기본 적 인 Counter 예제 입 니 다.

import { createSignal } from "solid-js";

export default function Counter() {
  const [count, setCount] = createSignal(0);
  return (
     setCount(count() + 1)}>
      {count()}
    
  )
}

createMemo
createMemo 는 읽 기 전용 파생 값 을 만 드 는 데 사 용 됩 니 다.Vue 의 coptute 와 유사 합 니 다.위의 것 과 마찬가지 로 호출 을 통 해 값 을 가 져 와 야 합 니 다.

import { createSignal, createMemo } from "solid-js";

export default function Counter() {
  const [count, setCount] = createSignal(0);
  // count        count，            
  const countPow2 = createMemo(()=> count() ** 2);
  return (
     setCount(count() + 1)}>
      {count()} | {countPow2()}
    
  )
}

createEffect
createEffect 는 일반적으로 부작용 에 사 용 됩 니 다.상태 가 바 뀔 때 부작용 을 실행 합 니 다.React 의 useEffect 와 유사 하지만 자동 으로 의존 을 수집 합 니 다.명시 적 으로 의존 하지 않 아 도 됩 니 다.이것 은 Vue 의 watchEffect 역할 과 같 습 니 다.

import { createSignal, createEffect } from "solid-js";

export default function Counter() {
  const [count, setCount] = createSignal(0);
  //                 
  createEffect(()=> console.log(count()));
  return (
     setCount(count() + 1)}>
      {count()}
    
  )
}

명시 적 성명 의존 이 필요 하 다 면 참고Solid createEffect 명시 적 성명 의존
batch
Solid 의 반응 성 은 동기 화 되 어 있 습 니 다.이 는 변 경 된 다음 줄 의 DOM 이 업데이트 된다 는 것 을 의미 합 니 다.솔 리드 의 입도 렌 더 링 은 반응 식 시스템 에서 업 데 이 트 된 전파 일 뿐 이 므 로 대다수 상황 에 서 는 전혀 문제 가 없다.'두 번 의 무관 한 변경 은 사실상 일 을 낭비 하 는 것 을 의미 하지 않 는 다.변경 이 관련 이 있다 면 어떻게 합 니까?Solid 의 batch 조 수 는 여러 개의 줄 을 바 꾸 고 관찰자 에 게 알 리 기 전에 동시에 사용 할 수 있 습 니 다.일괄 처리 에서 업 데 이 트 된 신호 값 은 완 료 될 때 까지 제출 합 니 다.아래 batch 를 사용 하지 않 는 예 를 참고 하 십시오.

import { render } from "solid-js/web";
import { createSignal, batch } from "solid-js";

const App = () => {
  const [firstName, setFirstName] = createSignal("John");
  const [lastName, setLastName] = createSignal("Smith");
  const fullName = () => {
    console.log("Running FullName");
    return `${firstName()} ${lastName()}`
  } 
  const updateNames = () => {
    console.log("Button Clicked");
    setFirstName(firstName() + "n");
    setLastName(lastName() + "!");
  }
  
  return My name is {fullName()}
};

render(App, document.getElementById("app"));

이 예 에서 우 리 는 단 추 를 눌 렀 을 때 두 개의 상 태 를 업 데 이 트 했 습 니 다.두 번 의 업 데 이 트 를 실 행 했 습 니 다.콘 솔 에서 로 그 를 볼 수 있 습 니 다.따라서 updateNames 를 수정 하여 set 호출 을 일괄 처리 합 니 다.

 const updateNames = () => {
    console.log("Button Clicked");
    batch(() => {
      setFirstName(firstName() + "n");
      setLastName(lastName() + "!");
    })
  }

현재 같은 요소 에 대해 서 는 업데이트 가 한 번 만 실 행 됩 니 다.
양식
아래 에서 사용 할 수 있 도록 스타일 파일 을 만 듭 니 다.

/* main.css */
.container {
  width: 100px;
  height: 100px;
  background-color: green;
}
.text {
  font-size: 20px;
  color: red;
}

기본 사용
스타일 사용 도 React 와 매우 유사 합 니 다.className 대신 class 만 사용 합 니 다.

import style from "./main.css";

export default function Container() {
  return (
    

      text
    
  )
}

classList
주어진 class 가 존재 하 는 지 설정 하 는 데 사 용 됩 니 다.응답 식 을 바 꿀 수도 있 습 니 다.다음은 class 전환 을 누 르 는 예제 입 니 다.

import style from "./main.css";
import { createSignal } from "solid-js";

export default function Container() {
  const [hasTextClassName, setHasTextClassName] = createSignal(false);
  return (
    
 setHasTextClassName(!hasTextClassName())
      }
    >
    text
    
  )
}

기본 제어 흐름
제어 흐름 은 대부분 JSX 로 같은 기능 을 실현 할 수 있 지만 이 를 사용 하면 JSX 보다 높 은 성능 을 가지 기 때문에 Solid 는 이 를 더욱 최적화 할 수 있다.
fallback 은 실패 후 표 시 됩 니 다.
For
간단 한 인용 키 제어 순환 제어 프로 세 스.

export default function Container() {
  return (
    

      Failed
}
      >
        {(item) => 
{item}
}
      
    

)
}
Show
Show 제어 흐름 은 보기 의 일부분 을 조건 부 로 렌 더 링 하 는 데 사 용 됩 니 다.그것 은 3 원 연산 자(a?b:c)하지만 템 플 릿 화 JSX 에 아주 적합 합 니 다.

import { createSignal } from "solid-js";

export default function Container() {
  const [count, setCount] = createSignal(10);
  return (
    

      {/*   count    5      */}
       5} 
        fallback={
Failed
}
      >
        
content
      
    
  )
}

Switch
Switch 는 2 개 이상 의 상호 배척 조건 이 있 을 때 유용 하 다.간단 한 경로 같은 일 을 할 수 있다.

import { createSignal } from "solid-js";

export default function Container() {
  const [count, setCount] = createSignal(10);
  return (
    

      Failed
}>
         5}>
          
count > 5
        
        
          
count < 5
        
      
    

)
}
Index
색인 교체 순환 제어 프로 세 스 가 아 닌 배열 이 아 닌 유사 한 대상 을 교체 하려 면 Index 를 사용 하 십시오.

export default function Container() {
  return (
    

      Failed
}
      >
        {(item) => 
{item}
}