Solid JavaScript 라이브러리 소개-CSS 튜토리얼-php.cn

solidjs : 고성능 반응 형 JavaScript UI 라이브러리

Solid JavaScript 라이브러리 소개

Solid는 가상 DOM이 필요하지 않은 사용자 인터페이스를 작성하기위한 반응 형 JavaScript 라이브러리입니다. 템플릿을 실제 DOM 노드로 컴파일하고 세분화 된 반응으로 업데이트를 랩핑하므로 상태가 업데이트되면 관련 코드 만 실행됩니다.

이 방법을 사용하면 컴파일러가 초기 렌더링 및 런타임 업데이트를 최적화 할 수 있습니다. 성능에 초점을 맞추면 가장 유명한 JavaScript 프레임 워크 중 하나입니다.

나는 이것에 대해 호기심이 많았고 시도해보고 싶었 기 때문에이 프레임 워크가 구성 요소, 상태 업데이트, 스토리지 설정 등을 처리하는 방법을 탐색하기 위해 소규모 할 세계 애플리케이션을 만드는 데 시간을 보냈습니다.

최종 코드와 결과를 기다릴 수 없다면 최종 데모를 확인하십시오. [최종 데모 링크는 여기에 삽입되어야합니다.

빠른 시작

대부분의 프레임 워크와 마찬가지로 NPM 패키지를 설치하여 시작할 수 있습니다. JSX와 함께 프레임 워크를 사용하려면 실행하십시오.

1	`NPM Solid-JS Babel-Preset-Solid 설치`

로그인 후 복사

그런 다음 Babel, Webpack 또는 Rollup 구성 파일에 Babel-Preset-Solid를 추가해야합니다.

1	`"사전 설정": [` `"Solid"]`

로그인 후 복사

또는 작은 응용 프로그램을 설정하려면 템플릿 중 하나를 사용할 수도 있습니다.

# 솔리드 템플릿에서 작은 응용 프로그램 생성 NPX DEGIT SOLIDJS/TEMPLATES/JS MY-APP
 
# 생성 된 프로젝트 디렉토리 CD MY-APP으로 변경합니다
 
# 종속성 설치 NPM I # 또는 원사 또는 PNPM
 
# 개발 서버 시작 NPM RUN DEV

로그인 후 복사

TypeScript가 지원되며 TypeScript 프로젝트를 시작하려면 첫 번째 명령을 npx degit solidjs/templates/ts my-app 으로 변경하십시오.

구성 요소를 작성하고 렌더링합니다

렌더링 구성 요소의 구문은 React.js와 유사하므로 익숙해 보일 수 있습니다.

"solid-js/web"에서 {render} 가져 오기;
 
const hellomessage = props =><div> 안녕하세요 {props.name}</div> ;
 
세우다(
  () =><hellomessage name="Taylor"></hellomessage> ,,,
  document.getElementById ( "Hello-Axample")
);

로그인 후 복사

먼저 렌더링 함수를 가져온 다음 텍스트와 소품으로 div를 만들고 구성 요소와 컨테이너 요소를 전달하는 렌더링을 호출해야합니다.

그런 다음이 코드는 실제 DOM 표현식으로 컴파일됩니다. 예를 들어, 위의 코드 예제는 한 번 Solid로 컴파일되면 다음과 같습니다.

"solid-js/web"에서 가져 오기 {render, 템플릿, 삽입, createComponent};
 
const _tmpl $ = 템플릿 (`<div> 안녕하세요</div> `);
 
const hellomessage = props => {
  const _el $ = _tmpl $ .clonenode (true);
  삽입 (_el $, () => props.name);
  _el $를 반환합니다.
};
 
세우다(
  () => createComponent (Hellomessage, {이름 : "Taylor"}),
  document.getElementById ( "Hello-Axample")
);

로그인 후 복사

Solid Playground는 매우 시원하며 Solid는 수화 된 클라이언트, 서버 및 클라이언트를 포함하여 다른 렌더링 방법을 가지고 있음을 보여줍니다.

신호를 사용하여 변화하는 값을 추적하십시오

Solid는 createSignal 이라는 후크를 사용하여 Getter와 Setter의 두 가지 기능을 반환합니다. React.js와 같은 프레임 워크를 사용하는 데 익숙해지면 조금 이상하게 보일 수 있습니다. 당신은 일반적으로 첫 번째 요소가 값 자체가 될 것으로 예상하지만, 우리는 getters를 명시 적으로 호출하여 읽기 값이있는 위치를 가로 채어야합니다.

예를 들어 다음 코드를 작성하는 경우 다음과 같습니다.

1	`const` `[todos, addtodos] = createSignal ([]);`

로그인 후 복사

todos 녹음하는 것은 값을 반환하지 않고 함수를 반환합니다. 값을 사용하려면 todos() 와 같은 함수를 호출해야합니다.

작은 할 일 목록의 경우 다음과 같습니다.

"solid-js"에서 {createSignal} import;
 
const todolist = () => {
  입력하자;
  const [todos, addtodos] = createSignal ([]);
 
  const addtodo = value => {
    let
  };
 
  반품 (
    <h1>목록 :</h1>
    <input type="text" ref="{el"> 입력 = el} />
    <button onclick="{()"> addTodo (input.value)}> 항목 추가</button>

로그인 후 복사

{목}

); };

위의 코드 예제에는 텍스트 필드가 표시되며 "프로젝트 추가"버튼을 클릭하면 Todos가 새 프로젝트로 업데이트되며 목록에 표시됩니다.

이것은 useState 사용과 매우 유사 해 보일 수 있으므로 Getter 사용의 차이점은 무엇입니까? 다음 코드 예제를 고려하십시오.

Console.log ( "신호 만들기");
const [firstName, setFirstName] = CreateSignal ( "Whitney");
const [lastName, setLastName] = CreateSignal ( "Houston");
const [displayFullName, setDisplayFullName] = createSignal (true);
 
const displayName = creatememo (() => {
  if (! displayFullName ()) return firstName ();
  `$ {firstName ()} $ {lastName ()}`;
});
 
CreateEffect (() => console.log ( "my name is", displayName ()));
 
console.log ( "showfullname : false");
setDisplayFullName (false);
 
Console.log ( "마지막 이름 변경");
setLastName ( "boop");
 
console.log ( "showfullname : true");
setDisplayFullName (true);

로그인 후 복사

위의 코드를 실행하면 다음이됩니다.

1	`<code>Create Signals My name is Whitney Houston Set showFullName: false My name is Whitney Change lastName Set showFullName: true My name is Whitney Boop</code>`

로그인 후 복사

주목할만한 점은 새로운 마지막 이름을 설정 한 후 "내 이름은 ..."를 기록하지 않았다는 것입니다. 이 시점에서 lastName() 에 대한 변경 사항을 듣지 않는 것이 없기 때문입니다. displayFullName() 의 새 값은 displayName() 의 값이 변경 될 때만 설정되므로 setShowFullName true로 설정된 경우 새 마지막 이름이 표시되는 것을 알 수 있습니다.

이것은 우리에게 값의 업데이트를 추적하는보다 안전한 방법을 제공합니다.

반응 형 프리미티브

마지막 코드 예제에서 createSignal 소개했으며 createEffect 및 createMemo 다른 원시가 있습니다.

Createefect

createEffect 종속성을 추적하고 종속성 변경의 각 렌더링 후에 실행됩니다.

// 'solid-js "에서'import {createefect}를 사용하여 먼저 가져 오는 것을 잊지 마십시오.
 
createeeffect (() => {
  console.log ( "count is at", count ());
});

로그인 후 복사

count() 의 값이 변경 될 때마다 "Count is at ..."가 기록됩니다.

Creatememo

createMemo 실행 된 코드의 종속성이 업데이트 될 때마다 값을 다시 계산하는 읽기 전용 신호를 만듭니다. 일부 값을 캐시하고 재평가하지 않고 (종속성이 변경 될 때까지) 액세스 할 때 사용할 수 있습니다.

예를 들어, 카운터를 100 번 표시하고 버튼을 클릭 할 때 값을 업데이트하려면 createMemo 사용하여 클릭당 한 번만 재 계산이 발생할 수 있습니다.

기능 카운터 () {
  const [count, setCount] = CreateSignal (0);
  // Memo 래핑 카운터를 만들지 않고 100 번으로 호출됩니다. // const counter = () => {
  // return count ();
  //}
 
  // Creatememo로 카운터를 랩핑합니다. 업데이트 당 한 번만 호출하십시오. // 'solid-JS "에서'import {creatememo}; ';
 
  반품 (
    <div>
      <button onclick="{()"> setCount (count () 1)}> count : {count ()}</button>
      <div>1. {counter ()}</div>
      <div>2. {Counter ()}</div>
      <div>3. {counter ()}</div>
      <div>4. {Counter ()}</div>
    </div>
  );
}

로그인 후 복사

수명주기 방법

Solid는 onMount , onCleanup 및 onError 와 같은 몇 가지 수명주기 방법을 노출시킵니다. 초기 렌더링 후 일부 코드가 실행 되려면 onMount 사용해야합니다.

// 'solid-js "에서'import {onmount}를 사용하여 가져 오는 것을 잊지 마십시오 (() => {
  Console.log ( "I Mounted!");
});

로그인 후 복사

onCleanup React의 componentDidUnmount 와 유사합니다. 반응 형 스코프 재 계산시 실행됩니다.

onError 가장 최근의 하위 스코프에서 오류가 발생하면 실행됩니다. 예를 들어, 데이터 수집이 실패하면 사용할 수 있습니다.

저장

데이터를위한 스토어를 만들려면 Solid는 Return 값이 읽기 전용 프록시 객체 및 세터 기능 인 createStore 노출시킵니다.

예를 들어, 상태 대신 스토리지를 사용하도록 할 일 예제를 변경하면 다음과 같습니다.

const [todos, addtodos] = createstore ({list : []});
 
createeeffect (() => {
  Console.log (Todos.list);
});
 
onmount (() => {
  addTodos ( 'list', (list) => [... list, {item : "새 Todo 항목", 완성 : false}]);
});

로그인 후 복사

위의 코드 예제는 먼저 빈 배열이있는 프록시 객체를 녹음 한 다음 객체 {item: "a new todo item", completed: false} 포함 된 배열이있는 프록시 객체를 기록합니다.

속성에 액세스하지 않으면 최상위 상태 객체를 추적 할 수 없으므로 todos 대신 todos.list 기록하는 이유입니다.

createEffect 에서 todos 만 기록하면 목록의 초기 값이 표시되지만 onMount 에서 업데이트 된 값은 표시되지 않습니다.

스토어의 값을 변경하려면 createStore 사용할 때 정의 된 설정 기능을 사용하여 업데이트 할 수 있습니다. 예를 들어, 할 일 목록 항목을 "완료"로 업데이트하려면 스토리지를 다음과 같이 업데이트 할 수 있습니다.

const [todos, settodos] = Createstore ({{
  목록 : [{항목 : "새 항목", 완료 : False}]
});
 
const markascomplete = text => {
  anstodos (
    "목록",
    (i) => i.item === 텍스트,
    "완전한",
    (c) =>! c
  );
};
 
반품 (
  <button onclick="{()"> markascomplete ( "새 항목")}> 마크를 완료합니다</button>
);

로그인 후 복사

제어 흐름

.map() 와 같은 메소드를 사용할 때마다 모든 DOM 노드 낭비가 업데이트 될 때마다 재현되면 Solid를 사용하면 템플릿 어시스턴트를 사용할 수 있습니다.

이 중 일부는 프로젝트를 통한 반복, 요소를 조건부 표시 및 숨겨지기 For Show , 특정 조건과 일치하는 요소를 표시하기위한 Switch 및 Match 등을 사용할 수 있습니다!

다음은 사용 방법을 보여주는 몇 가지 예입니다.

<for each="{todos.list}" fallback="{<div"> 로딩 ... }>
  {(항목) =><div> {목}</div> }
</for>
<show when="{todos.list[0]?.completed}" fallback="{<div"> 로딩 ... }>
  <div>첫 번째 항목이 완료되었습니다</div>
</show>
<switch fallback="{<div"> 항목이 없습니다 }>
  <match when="{todos.list[0]?.completed}"><completedlist></completedlist></match>
  <match when="{!todos.list[0]?.completed}"><todolist></todolist></match>
</switch>