什么是状态反应?

状态反应是当应用程序(一组变量)的状态发生变化时，我们做某事(反应)。我们分两步来完成:

1. 创建一个“反应依赖项”(当变量发生变化时，我们会得到通知)
2. 创建“反应状态”(基本上是依赖变量的集合

函数监视更改

要做到这一点，我们首先需要一个在反应性依赖项发生变化时执行的函数。在Vue中，这被称为watchEffect;我们也会调用这个函数。

在我们的例子中，这个函数是这样的:

function watchEffect(fn) {
    activeEffect = fn
    fn()
    activeEffect = null
}

全局变量activeEffect是我们存储函数的临时变量，它被传递给watchEffect。这是必要的，因此我们可以在函数本身读取引用该函数的依赖项时访问该函数。

依赖类

我们可以将反应性依赖看作是一个变量，当它的值发生变化时通知它的订阅者。

它可以用一个初始值创建，因此我们需要一个构造函数

我们需要订阅一个函数来应对依赖项上的更改。我们将其称为depend()

当值改变时，我们需要一个通知订阅函数的依赖关系。我们将调用这个notify()

当值被读写时，我们需要做一些事情，所以我们需要一个getter和一个setter

所以我们的骨架是这样的:

class Dep {
    // Initialize the value of the reactive dependency
    constructor(value) {}

    // Subscribe a new function as observer to the dependency
    depend() {}

    // Notify subscribers of a value change
    notify() {}

    // Getter of the dependency. Executed when a part of the software reads the value of it.
    get value() {}

    // Setter of the dependency. Executed when the value changes
    set value(newValue) {}
}class Dep {
    // Initialize the value of the reactive dependency
    constructor(value) {}

    // Subscribe a new function as observer to the dependency
    depend() {}

    // Notify subscribers of a value change
    notify() {}

    // Getter of the dependency. Executed when a part of the software reads the value of it.
    get value() {}

    // Setter of the dependency. Executed when the value changes
    set value(newValue) {}
}

类有两个字段:value(依赖项的值)和subscribers(订阅函数集)。

我们一步一步地实现这个。

构造

constructor(value) {
    this._value = value // not `value` because we add getter/setter named value
    this.subscribers = new Set()
}

订阅者需要是一个集合，因此我们不会重复订阅相同的函数。

订阅一个函数

这里，我们需要订阅一个新函数作为依赖项的观察者。我们称之为依赖。

depend() {
    if (activeEffect) this.subscribers.add(activeEffect)
}

activeEffect是在watchEffect中设置的一个临时变量，本教程稍后将对此进行解释。

将依赖项更改通知订阅方

当值发生变化时，我们调用这个函数，以便在依赖项值发生变化时通知所有订阅者。

notify() {
    this.subscribers.forEach((subscriber) => subscriber())
}

我们这里所做的是执行每个订阅者。记住:这是一个订户是一个函数。

Getter

在依赖项的getter中，我们需要将activeEffect(当依赖项发生更改时将执行的函数)添加到订阅器列表中。换句话说，使用我们前面定义的depend()方法。

因此，我们返回当前值。

get value() {
    this.depend()
    return this._value
}

Setter

在依赖项的setter中，我们需要执行监视此依赖项的所有函数(订阅者)。换句话说，使用前面定义的notify()方法。

set value(newValue) {
    this._value = newValue
    this.notify()
}

试试

依赖项的实现已经完成。现在是时候试一试了。要做到这一点，我们需要做三件事:

定义一个依赖

添加要在依赖项更改时执行的函数

更改依赖项的值

// Create a reactive dependency with the value of 1
const count = new Dep(1)

// Add a "watcher". This logs every change of the dependency to the console.
watchEffect(() => {
    console.log('? value changed', count.value)
})

// Change value
setTimeout(() => {
    count.value++
}, 1000)
setTimeout(() => {
    count.value++
}, 2000)
setTimeout(() => {
    count.value++
}, 3000)

在控制台日志中，你应该可以看到这样的东西:

? value changed 1
? value changed 2
? value changed 3
? value changed 4

你可以找到完整的代码依赖?Github。

2. 构建反应状态

这只是谜团的第一部分，也是更好地理解接下来会发生什么的主要必要条件。

总结一下:我们有一个反应性依赖项和一个监视函数，它们让我们能够在变量(依赖项)发生变化时执行一个函数。这已经很酷了。但我们想更进一步，创建一个状态。

而不是像这样:

const count = Dep(1)
const name = Dep('Marc')
id.value = 2
name.value = 'Johnny'

我们想这样做:

const state = reactive({
    count: 1,
    name: 'Marc',
})
state.count = 2
state.name = 'Johnny'

为了实现这一点，我们需要对我们的代码做一些改变:

添加反应函数。这样就创建了“state”对象。

将getter和setter移到状态，而不是依赖项(因为这是发生变化的地方)

因此，依赖关系(Dep)将只起到这样的作用。只是依赖部分，不包含任何值。值存储在状态中。

reactive 函数

reactive()函数可以看作是状态的初始化。我们将带有初始值的对象传递给它，然后将其转换为依赖项。

对于每个对象属性，必须完成以下操作:

定义依赖关系(Dep)

定义者getter

定义赋值

function reactive(obj) {
    Object.keys(obj).forEach((key) => {
        const dep = new Dep()
        let value = obj[key]
        Object.defineProperty(obj, key, {
            get() {
                dep.depend()
                return value
            },
            set(newValue) {
                if (newValue !== value) {
                    value = newValue
                    dep.notify()
                }
            },
        })
    })
    return obj
}

依赖项上的更改

此外，我们需要从依赖项中移除getter和setter，因为我们现在是在反应状态下做的:

class Dep {
    subscribers = new Set()
    depend() {
        if (activeEffect) this.subscribers.add(activeEffect)
    }
    notify() {
        this.subscribers.forEach((sub) => sub())
    }
}

watchEffect功能保持不变。

试试代码

我们已经完成了将依赖变量转换为反应状态的工作。现在我们可以尝试代码:

const state = reactive({
    count: 1,
    name: 'Marc',
})

watchEffect(() => {
    console.log('? state changed', state.count, state.name)
})

setTimeout(() => {
    state.count++
    state.name = 'Johnny'
}, 1000)

setTimeout(() => {
    state.count++
}, 2000)
setTimeout(() => {
    state.count++
}, 3000)

打印出来：

? state changed 1 Marc
? state changed 2 Marc
? state changed 2 Johnny
? state changed 3 Johnny
? state changed 4 John