40 줄 코드 는 Vue 3 의 응답 식 을 React 에 통합 하여 상태 관 리 를 합 니 다.

머리말
vue-next 는 Vue 3 의 소스 창고 로 Vue 3 는 lerna 를 package 로 구분 하고 응답 식 능력@vue/reactivity 는 하나의 package 로 나 뉜 다.
만약 우리 가 그것 을 React 에 집적 하고 싶다 면 가능 합 니까?한번 해 보 자.
사용 예시
말 이 많 지 않 으 니 우선 어떻게 식욕 을 푸 는 지 보 자.

// store.ts
import { reactive, computed, effect } from '@vue/reactivity';

export const state = reactive({
 count: 0,
});

const plusOne = computed(() => state.count + 1);

effect(() => {
 console.log('plusOne changed: ', plusOne);
});

const add = () => (state.count += 1);

export const mutations = {
 // mutation
 add,
};

export const store = {
 state,
 computed: {
 plusOne,
 },
};

export type Store = typeof store;

// Index.tsx
import { Provider, useStore } from 'rxv'
import { mutations, store, Store } from './store.ts'
function Count() {
 const countState = useStore((store: Store) => {
 const { state, computed } = store;
 const { count } = state;
 const { plusOne } = computed;

 return {
  count,
  plusOne,
 };
 });

 return (
 <Card hoverable style={{ marginBottom: 24 }}>
  <h1>   </h1>
  <div className="chunk">
  <div className="chunk">store  count    {countState.count}</div>
  <div className="chunk">computed   plusOne    {countState.plusOne.value}</div>
   <Button onClick={mutations.add}>add</Button>
  </div>
 </Card>
 );
}

export default () => {
 return (
 <Provider value={store}>
  <Count />
 </Provider>
 );
};

이 를 통 해 알 수 있 듯 이 store 의 정 의 는@vue/reactivity 에 만 사용 되 었 고 rxv 는 구성 요소 에서 브리지 를 만 들 었 을 뿐 Vue 3 와 React 를 연결 한 후에 우 리 는 Vue 3 의 응답 식 능력 을 마음껏 사용 할 수 있 습 니 다.
미리 보기

reactive,computed 의 강력 한 능력 을 완벽 하 게 활용 한 것 을 볼 수 있다.
분석 하 다.
이 가방 에서 제공 하 는 몇 가지 핵심 api 를 분석 합 니 다.
effect(중점)
effect 는 응답 식 라 이브 러 리 에서 통용 되 는 개념 이다.관찰 함 수 는 Vue 2 의 Watcher,mobx 의 autorun,observer 와 같이 수집 의존 하 는 역할 을 한다.
이것 은 함수 입 니 다.이 함 수 를 실행 하고 의존 수집 을 시작 합 니 다.
이 함수 내부 에서 응답 식 데이터 에 대한 접근 은 모두 의존 도 를 수집 할 수 있 습 니 다.그러면 응답 식 데이터 가 수정 되면 업데이트 가 실 행 됩 니 다.
가장 간단 한 용법

const data = reactive({ count: 0 })
effect(() => {
 //          data.count
 //         
 console.log(data.count)
})

data.count = 1
//       1

그럼 이 간단 한 예 에서

() => {
 //          data.count
 //         
 console.log(data.count)
}

이 함 수 는 React 의 구성 요소 렌 더 링 으로 바 꾸 면 응답 식 업데이트 구성 요소 의 목적 을 달성 할 수 있 습 니까?
반응 성(중점)
응답 식 데이터 의 핵심 api 입 니 다.이 api 는 proxy 를 되 돌려 줍 니 다.위의 모든 속성 에 대한 접근 이 납 치 됩 니 다.이 api 는 get 할 때 의존(즉 실행 중인 effect)을 수집 하고 set 할 때 업 데 이 트 를 촉발 합 니 다.
ref
간단 한 데이터 형식,예 를 들 어 number 에 대해 우 리 는 이렇게 할 수 없습니다.

let data = reactive(2)
// 😭oops
data = 5

이것 은 응답 식 차단 규칙 에 부합 되 지 않 습 니 다.data 자체 의 변 화 를 막 을 수 없고 data 의 속성 변 화 를 막 을 수 밖 에 없어 ref 가 생 겼 습 니 다.

const data = ref(2)
// 💕ok
data.value= 5

computed
속성 을 계산 하고 의존 값 이 업데이트 되면 값 도 자동 으로 업 데 이 트 됩 니 다.사실 computed 내부 도 하나의 effect 입 니 다.
coptute d 에서 다른 coptute 데이터,effect 관찰 coptute d 변화 와 같은 고급 기능 을 가지 고 있 습 니 다.
이루어지다
이 몇 개의 핵심 api 를 보면 effect 가 React 시스템 에 접속 할 수 있다 면 다른 api 는 문제 가 없습니다.effect 의 의존 을 수집 하고 effect 에 업 데 이 트 를 촉발 하 는 것 을 알 리 기 때 문 입 니 다.
effect 는 하나의 함 수 를 받 아들 이 고 effect 는 schedule 인 자 를 통 해 업데이트 에 의존 할 때 어떤 함 수 를 실행 해 야 하 는 지 사용자 정의 할 수 있 습 니 다.만약 우리 가 이 schedule 을 해당 구성 요소 의 업데이트 로 교체 한다 면?hook 의 세계 에서 현재 구성 요소 의 강제 업 데 이 트 를 실현 하 는 것 은 매우 간단 하 다 는 것 을 알 아야 합 니 다.
useForceUpdate

export const useForceUpdate = () => {
 const [, forceUpdate] = useReducer(s => s + 1, 0);
 return forceUpdate;
};

이것 은 전형 적 인 사용자 정의 hook 입 니 다.상 태 를+1 로 구성 요 소 를 강제로 렌 더 링 합 니 다.
rxv 의 핵심 api:useStore 는 함수 selector 를 받 아들 여 구성 요소 에 접근 할 데 이 터 를 선택 할 수 있 습 니 다.
그러면 생각 이 뻔 하 다.

selector 를 effect 에 포장 하여 실행 하고 의존 도 를 수집 합 니 다.

업데이트 에 의존 할 때 호출 해 야 할 함 수 는 현재 useStore 를 사용 하고 있 는 이 구성 요소 의 forceUpdate 강제 렌 더 링 함수 입 니 다.

이렇게 하면 데이터 변 화 를 실현 하고 구성 요소 가 자동 으로 업데이트 되 지 않 습 니까?
간단하게 핵심 실현 을 살 펴 보 겠 습 니 다.
useStore 와 Provider

import React, { useContext } from 'react';
import { useForceUpdate, useEffection } from './share';

type Selector<T, S> = (store: T) => S;

const StoreContext = React.createContext<any>(null);

const useStoreContext = () => {
 const contextValue = useContext(StoreContext);
 if (!contextValue) {
 throw new Error(
  'could not find store context value; please ensure the component is wrapped in a <Provider>',
 );
 }
 return contextValue;
};

/**
 *           
 *              
 */
export const useStore = <T, S>(selector: Selector<T, S>): S => {
 const forceUpdate = useForceUpdate();
 const store = useStoreContext();

 const effection = useEffection(() => selector(store), {
 scheduler: forceUpdate,
 lazy: true,
 });

 const value = effection();
 return value;
};

export const Provider = StoreContext.Provider;

이 option 은 Vue 3 에 전 달 된 effectapi 입 니 다.
scheduler 는 응답 식 데이터 업데이트 후 어떤 작업 을 해 야 하 는 지 규정 하고 있 습 니 다.여기 서 는 forceUpdate 를 사용 하여 구성 요 소 를 다시 렌 더 링 합 니 다.
lazy 는 실행 지연 을 표시 합 니 다.나중에 effection 을 수 동 으로 호출 하여 실행 합 니 다.

{
 scheduler: forceUpdate,
 lazy: true,
}

useEffection 과 useForce Update 를 살 펴 보 겠 습 니 다.

import { useEffect, useReducer, useRef } from 'react';
import { effect, stop, ReactiveEffect } from '@vue/reactivity';

export const useEffection = (...effectArgs: Parameters<typeof effect>) => {
 //    ref  effection
 // effect            
 const effectionRef = useRef<ReactiveEffect>();
 if (!effectionRef.current) {
 effectionRef.current = effect(...effectArgs);
 }

 //        effect
 const stopEffect = () => {
 stop(effectionRef.current!);
 };
 useEffect(() => stopEffect, []);

 return effectionRef.current
};

export const useForceUpdate = () => {
 const [, forceUpdate] = useReducer(s => s + 1, 0);
 return forceUpdate;
};

들 어 오 는 함 수 를 effect 에 맡 기 고 구성 요소 가 소 각 될 때 effect 를 멈 추 는 것 도 간단 합 니 다.
흐름

먼저 useForceUpdate 를 통 해 현재 구성 요소 에 강제 업데이트 함 수 를 등록 합 니 다.

useContext 를 통 해 사용자 가 Provider 에서 들 어 오 는 store 를 읽 습 니 다.

Vue 의 effect 를 통 해 selector(store)를 실행 하고 scheduler 를 forceUpdate 로 지정 하면 의존 수집 이 완 료 됩 니 다.

그러면 store 의 값 이 업 데 이 트 된 후에 scheduler 즉 forceUpdate 를 촉발 하면 우리 의 React 구성 요 소 는 자동 으로 업 데 이 트 됩 니 다.

간단 한 몇 줄 코드 로 React 에서@vue/reactivity 를 사용 하 는 모든 능력 을 실현 합 니 다.
장점:

@vue/reacivity 를 직접 도입 하여 Vue 3 의 reactivity 능력 을 완전히 사용 하고 coptute,effect 등 각종 능력 을 가 지 며 Set 과 Map 에 도 응답 식 능력 을 제공 합 니 다.후속 적 으로 도 이 라 이브 러 리 의 업데이트 에 따라 더욱 완선 되 고 강해 질 것 이다.

vue-next 창고 내부 의 완전한 테스트 용례.

완벽 한 TypeScript 형식 지원.

@vue/reacivity 를 완전히 재 활용 하여 강력 한 전체 상태 관리 능력 을 실현 합 니 다.

상태 관리 에서 구성 요소 등급 의 정확 한 업데이트.

Vue 3 는 항상 배 워 야 하 잖 아 요.미리 공부 해서 실업 을 방지 하 세 요!

단점:
정확 한 수집 이 필요 하기 때문에 모두 useStore 에 의존 하기 때문에 selector 함 수 는 반드시 당신 이 관심 을 가 지 는 데 이 터 를 정확하게 방문 해 야 합 니 다.심지어 배열 내부 의 어떤 값 의 업 데 이 트 를 촉발 해 야 한다 면 useStore 에서 이 배열 자체 만 되 돌아 갈 수 없습니다.
예 를 하나 들다.

function Logger() {
 const logs = useStore((store: Store) => {
 return store.state.logs.map((log, idx) => (
  <p className="log" key={idx}>
  {log}
  </p>
 ));
 });

 return (
 <Card hoverable>
  <h1>   </h1>
  <div className="logs">{logs}</div>
 </Card>
 );
}

이 코드 는 useStore 에서 전체 jsx 를 직접 되 돌려 주 었 습 니 다.map 과정 에서 배열 의 모든 항목 을 방문 하여 의존 도 를 수집 하기 때 문 입 니 다.그래 야 응답 식 의 목적 을 달성 할 수 있 습 니 다.
원본 주소:https://github.com/sl1673495/react-composition-api
40 줄 코드 가 Vue 3 의 응답 식 을 React 에 통합 하여 상태 관 리 를 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vue 3 응답 식 통합 React 상태 관리 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많이 지 켜 주세요!