React 앱의 상태 관리는 동적이고 반응성이 뛰어난 사용자 인터페이스를 만드는 데 중요한 부분입니다. 전통적으로 개발자는 필요한 수정 사항을 적용하여 상태의 새 복사본을 생성하는 불변 업데이트에 의존했습니다. 이 방법은 예측 가능성을 제공하고 디버깅을 용이하게 하지만 특히 크거나 복잡한 데이터 구조를 처리할 때 성능이 저하될 수 있습니다.
이 기사에서는 상태 처리를 위한 두 가지 인기 있는 React 프레임워크를 다룹니다. Mutative 및 Immer 반응. 비록 서로 다른 수단을 통해서라도 두 라이브러리 모두 불변성을 장려합니다.
Mutative의 구현은 Immer의 구현과 매우 비슷하지만 더 강력합니다. Mutative는 Immer 및 기본 감속기보다 데이터를 더 효율적으로 처리합니다. Mutative 팀에 따르면 이 상태 관리 솔루션을 사용하면 불변 업데이트가 더 쉬워집니다. 일반 수제 감속기보다 약 2~6배 빠르며 Immer보다 10배 이상 빠릅니다.
Mutative.js의 몇 가지 이점은 다음과 같습니다.
예를 들어 목록이 포함된 상태 개체가 있다고 가정해 보겠습니다. 목록의 마지막 항목을 완료로 표시한 다음 새 항목을 추가하려고 합니다.
const state = {
list: [
{ text: 'Learn JavaScript', done: true },
{ text: 'Learn React', done: true },
{ text: 'Learn Redux', done: false },
],
};
정기적인 불변 데이터 업데이트를 사용한다면 다음과 같이 작성할 수 있습니다.
const nextState = {
...state,
list: [
...state.list.slice(0, 2),
{
...state.list[2],
done: true,
},
{ text: 'Learn Mutative', done: true },
],
};
그러나 Mutative를 사용하는 동안 다음과 같이 작성할 수 있습니다.
import { create } from 'mutative';
const nextState = create(state, (draft) => {
draft.list[2].done = true;
draft.list.push({ text: 'Learn Mutative', done: true });
});
이것이 Mutative의 기본적인 사용 방법으로, 불변 업데이트를 더 쉽게 구현할 수 있게 해줍니다.
독일어로 항상이라는 뜻의 Immer는 불변 상태로 작업하는 것을 더욱 편리하게 만들어주는 작은 패키지입니다. 2019 JavaScript Open Source Award "가장 영향력 있는 기여" 부문 수상.
이러한 이점은 객체, 배열 또는 지도의 속성을 변경하지 않고 항상 객체, 배열 또는 지도의 편집된 복사본을 생성함으로써 얻을 수 있는 경향이 있습니다. 이로 인해 코드 작성이 매우 어려워질 수 있으며 의도치 않게 이러한 제한을 깨기 쉽습니다. 이러한 문제의 해결을 통해 Immer는 불변 데이터 접근 방식을 고수하는 데 도움을 줄 것입니다. React Immer의 장점은 다음과 같습니다.
Immer가 의도하지 않은 돌연변이를 감지하면 오류를 보고합니다.
Immer는 불변 객체에 대한 심층적인 수정을 생성할 때 필요한 관례적인 상용구 코드에 대한 요구 사항을 제거합니다. Immer가 없으면 모든 수준에서 개체 복제를 수동으로 만들어야 합니다. 일반적으로 많은 수의 확산 작업을 수행합니다. Immer를 활용하면 초안 개체에 수정 사항이 적용되어 원본 개체를 변경하지 않고 이를 기록하고 적절한 복제본을 생성합니다.
Immer에서는 패러다임의 이점을 얻기 위해 특정 API나 데이터 구조를 마스터할 필요가 없습니다. Immer를 사용하면 보안을 유지하면서 일반 JavaScript 데이터 구조는 물론 잘 알려진 변경 가능한 JavaScript API에 액세스할 수 있습니다.
아래는 빠른 비교를 위한 간단한 예입니다.
const baseState = [
{
title: "Learn JavaScript",
done: true
},
{
title: "Try Immer",
done: false
}
]
이전 기본 상태가 있고 두 번째 할 일을 업데이트하고 세 번째 할 일을 추가해야 한다고 가정합니다. 그러나 우리는 원래의 baseState를 변경하고 싶지 않으며 (첫 번째 할 일을 유지하기 위해) 깊은 복제를 피하고 싶습니다.
Immer를 사용하지 않고 불변성을 유지하려면 상태 개체의 영향을 받는 모든 수준을 복사해야 합니다.
const nextState = baseState.slice() // shallow clone the array
nextState[1] = {
// replace element 1...
...nextState[1], // with a shallow clone of element 1
done: true // ...combined with the desired update
}
//Since nextState was freshly cloned, using push is safe here,
// but doing the same thing at any arbitrary time in the future would
// violate the immutability principles and introduce a bug!
nextState.push({title: "Tweet about it"})
Immer는 이 과정을 단순화합니다. 우리는 시작하려는 상태를 첫 번째 인수로 사용하는 generate 함수를 사용할 수 있고, 간단한 수정을 적용할 수 있는 초안을 전달하는 recipe라는 함수를 두 번째 매개변수로 사용할 수 있습니다. 레시피가 완료되면 돌연변이가 기록되고 다음 상태를 생성하는 데 사용됩니다. generate는 필요한 모든 복사를 처리하는 동시에 데이터를 동결하여 향후 의도하지 않은 변경으로부터 데이터를 보호합니다.
import {produce} from "immer"
const nextState = produce(baseState, draft => {
draft[1].done = true
draft.push({title: "Tweet about it"})
})
React에 대한 몰입 교육을 찾고 계십니까? React + Immer 홈페이지로 바로 이동하셔도 됩니다.
Mutative와 Immer는 모두 개념적으로 유사한 방식으로 불변 업데이트를 달성하지만 성능에 영향을 미치는 주요 구현 차이점이 있습니다. 분석 내용은 다음과 같습니다.
Secret Sauce: This speed advantage boils down to how each library creates the final immutable state object. Mutative employs a highly optimized algorithm that efficiently builds a new data structure reflecting the changes you made in the draft, prioritizing raw speed.
Immer's Overhead: Immer, on the other hand, utilizes a proxy object to track mutations on the draft state. This approach offers more flexibility but comes with an overhead that can significantly slow things down, particularly when dealing with large datasets. It's like adding an extra step in the process.
Auto-Freeze and the Tradeoff: Immer offers an optional feature called auto-freeze, which helps prevent accidental modifications to the original state. This is great for safety, but it comes at a performance cost. Disabling auto-freeze can bring Immer closer to Mutative's speed, but then you lose the safety net.
Both Mutative and Immer offer an intuitive way to write state updates that appear to mutate the state but ultimately result in immutable updates. However, there are some differences in syntax and potential for errors:
Syntax Mutative: Leverages familiar syntax that resembles traditional mutations. You write code as if you're directly modifying the state object.
Example:
const draft = createDraft(currentState);
draft.todos.push({ text: 'Buy milk' });
const newState = commit(draft);
Immer Syntax: Requires using specific Immer functions like produce to wrap your update logic.
Example:
const newState = produce(currentState, draft => {
draft.todos.push({ text: 'Buy milk' });
});
Draft escapes occur when you unintentionally modify the original state object instead of the draft copy in libraries like Mutative and Immer.
Mutative: While Mutative's syntax might feel familiar, there's a higher risk of accidentally modifying the original state object (draft escapes). This can happen if you forget to use the commit function to finalize the changes and create the new state. It requires stricter discipline to ensure all modifications go through the draft.
Immer: Immer's syntax explicitly forces you to work within the draft state using functions like produce. This reduces the chance of accidentally modifying the original state, making it inherently safer.
Ultimately, the best choice depends on your specific project requirements and team preferences. Consider trying both libraries on a small project to see which one feels more comfortable for your developers.
위 내용은 React Mutative와 React Immer 비교의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
