반응성을 반응에서 제거하다

당신은 React의 무엇을 좋아합니까?
조합성과 JSX, 그럼요.단방향 데이터 흐름, 검사.
반응성...?
전역 상태 변수가 변할 때, 구성 요소를 자동으로 업데이트하는 것이 정말 간소화되었습니까?
react를 실행하는 표준 방법은 데이터를 저장에 저장하고 보기 구성 요소가 기본적으로 데이터의 변경 사항을 감청하도록 하는 것이다.이렇게:

var store = {
    counter: {
        data: 0,
        update: function (){
            store.counter.data++
        }
    }
}

function Counter(){

    //link to state

    return (
        <div>{store.counter.data}</div>
    )

}

언제든지 업데이트 함수를 호출하고 저장합니다.카운터데이터가 증가하면 카운터가 자동으로 다시 시작됩니다.
나는 일부러 여기서state에 연결하는 방법을 생략했다.ContextApi, Redux, MobX 등일 수 있습니다...관건은'//link to state'를 쓰는 곳에 한두 줄의 코드를 넣는 것이다.코드를 다른 곳에 두는 것이 아니라 거기에 두는 것이 정말 그렇게 쉽습니까? 예를 들어:

var store = {
    counter: {
        data: 0,
        update: function (){
            store.counter.data++;
            //link to view
        }
    }
}

function Counter(){

    return (
        <div>{store.counter.data}</div>
    )

}

지출이 거의 비슷하다.(무슨 생각을 하는지 알아요. 지출이 유일한 문제가 아니에요. 하지만 제 의견을 견지해 주세요. 우리는 지출보다 더 많은 문제를 해결할 수 있을 거예요.)사실상 비용은 사실상 지수급이다.'//상태에 연결'방식으로 이를 실현하기 위해 실제적으로 당신이 사용하는 상태 관리 시스템에 따라 상하문, 공급자와/또는 축소기를 설정하고 관찰할 수 있는 대상을 설정해야 한다.React가 상태가 변할 때 자동으로 업데이트될 수 있도록 완전한 상태 관리 시스템을 구축해야 합니다.
그것은 경제적으로 갱신되었습니까?예견할 수 있습니까?어느 정도.React에서 상자를 열면 사용할 수 있는 전역 상태 관리를 사용하면 기본적으로 상태 변수가 바뀌면 모든 구성 요소를 다시 사용합니다.shouldComponentUpdate를 사용하거나 React를 사용해서 일부 구성 요소를 닫을 수 있습니다.비망록, 하지만 이것은 보증이 아니다.
파일에서 다음을 수행합니다.
구성 요소를 업데이트해야 합니다.
이 방법은 성능 최적화로만 존재합니다.오류가 발생할 수 있으므로 렌더링을 "차단"하기 위해 렌더링에 의존하지 마십시오.
반응을 보이다.의사록:
이 방법은 성능 최적화로만 존재합니다.오류가 발생할 수 있으므로 렌더링을 "차단"하기 위해 렌더링에 의존하지 마십시오.
Redux와 MobX는 불필요하고 예측할 수 없는 재방송을 줄이는 데 모두 잘했지만 상태 관리 비용을 가져왔다.
만약 상태 관리에서 완전히 벗어날 수 있는 방법이 있다면, React only Reender가 당신의 요구에 따라 구성 요소가 될 수 있습니까?
구성 요소 자체만 다시 불러오는 것이 Thunk을 작성하거나 전설에 들어가거나 생명 주기에 대해 생각하는 것보다 훨씬 쉽다고 알려줍니다.만약 당신이 퇴출 반응성을 선택한다면, 당신의 코드는 스파게티가 되지 않을 것입니다. 왜냐하면 당신은 여전히 조합성과 단방향 데이터 흐름을 가지고 있기 때문입니다.너는 어떻게 생각하느냐?얘도 더 빨라질 거야!가상 돔의 확산과 교란이 우회될 것이기 때문이다.
우리는 위의 또 다른 예로 돌아가서, 그것을 어떻게 실제 응용에서 사용하는지 충실하게 봅시다.

var store = {
    counter: {
        data: 0,
        update: function (){
            store.counter.data++;
            //link to view
        }
    }
}

function Counter(){

    return (
        <div>{store.counter.data}</div>
    )

}

우선 주의해야 할 것은'//link to view'줄을 제외하고 여기에서 store를 정의하는 방식은 전체enchilada이다.이것은 상하문/공급자와 연결되지 않고 도구를 통해 전달되지 않으며, 라이브러리를 설치해서 사용할 필요가 없습니다.그것은 일반적인 자바스크립트 대상의 모습이다.구성 요소는 그대로 접근할 수 있습니다.
store를 호출할 동작을 계속 추가합니다.카운터업데이트

var store = {
    counter: {
        data: 0,
        update: function (){
            store.counter.data++;
            //link to view
        }
    }
}

function Counter(){

    return (
        <div onClick={store.counter.update}>{store.counter.data}</div>
    )

}

단지 한 가지 물건이 없어졌다. 계수기를 어떻게 실제적으로 업데이트해야 합니까?
코드에 업데이트 갈고리를 추가해서 수동으로 구성 요소를 다시 불러올 수 있도록 합니다.

function useUpdate(){
    const [value, setValue] = useState(0);
    return () => setValue(value => ++value); 
}

var store = {
    counter: {
        data: 0,
        update: function (){
            store.counter.data++;
            //link to view
        }
    }
}

function Counter(){

    return (
        <div onClick={store.counter.update}>{store.counter.data}</div>
    )

}

다음 중 하나를 만듭니다.

function useUpdate(){
    const [value, setValue] = useState(0);
    return () => setValue(value => ++value); 
}

var store = {
    counter: {
        data: 0,
        update: function (){
            store.counter.data++;
            //link to view
        }
    }
}

function Counter(){

    Counter.update = useUpdate();

    return (
        <div onClick={store.counter.update}>{store.counter.data}</div>
    )

}

React, 심지어 갈고리가 있는 React는 여전히 간단한 자바스크립트 코드일 뿐입니다.이런 방식으로 함수를 분배하면 함수 구성 요소의 함수를 호출할 수 있다.
마지막으로, "/"로 "실제 코드"를 바꾸자.

function useUpdate(){
    const [value, setValue] = useState(0);
    return () => setValue(value => ++value); 
}

var store = {
    counter: {
        data: 0,
        update: function (){
            store.counter.data++;
            Counter.update();
        }
    }
}

function Counter(){

    Counter.update = useUpdate();

    return (
        <div onClick={store.counter.update}>{store.counter.data}</div>
    )

}

이렇게설치할 필요도, 관리할 필요도, 구성 요소가 언제 업데이트될지 추측할 필요도, 불필요할 때 구성 요소를 다시 제출할 필요도 없다.
현실 세계의 응용 프로그램에서 나는 상점에서 물건을 더욱 깨끗하게 유지하기 위해 단독 조작 부분을 원하기 때문에 현실에서 코드는 이렇게 보인다.

function useUpdate(){
    const [value, setValue] = useState(0);
    return () => setValue(value => ++value); 
}

var store = {
    actions: {
        onCounterClick: function (){
            store.counter.update();
            Counter.update();
        }
    },
    counter: {
        data: 0,
        update: function (){
            store.counter.data++;
        }
    }
}

function Counter(){

    Counter.update = useUpdate();

    return (
        <div onClick={store.actions.onCounterClick}>{store.counter.data}</div>
    )

}

작업에는 단일 어셈블리만 포함할 필요가 없습니다.예를 들면 다음과 같습니다.

onCounterClick: function (){
    store.counter.update();
    store.someOtherDomain.doSomething();
    store.someOtherDomain.doSomethingElse();
    Counter.update();
    SomeOtherComponent.update();
}

다음과 같이 하십시오.

onCounterClick: function (){
    store.someOtherPartOfTheStore.doSomethingComponentsDependOnLikeAjaxCalls();
    store.counter.update();     
    Counter.update();
    //obviously contrived, let's just pretend the counter needs to hit an api first
}

이 모드는 애니메이션이 많은 응용 프로그램, 전체 업데이트가 아닌 일부 보기를 순서대로 업데이트해야 하는 응용 프로그램, API와 상호작용하는 응용 프로그램에 특히 적합하다.
해커의 침입이 즐겁길 바랍니다.