Question

因此，直到今天，我一直认为箭头函数是一种更好的新版本，并且是普通js函数的版本。当我遇到一个使两者变得不同并且以一种怪异的方式工作的问题时，我正在遵循tutorial上关于如何使用Firestore存储数据的问题。他的代码如下：

//component
function Todos() {
    const [ todo, setTodo ] = useState('');
    const ref = firestore().collection('todos');
    // ...
    async function addTodo() {
        await ref.add({ title: todo, complete: false});
        setTodo('');
    }
    // ...
}

我的代码如下：

//component

const Todos = () => {
    const ref = firestore().collection('todos');
    const [todo, setTodo] = useState('');

    const addTodo = async () => {
        const res = await ref.add({ title: todos, complete: false   });
        setTodo('');
    };
};

现在他的版本有效，而我的版本无效。将我的代码更改为类似于他的代码后，它成功了。但是我意识到这很奇怪：在第一次（使用他的函数）单击调用该函数的按钮之后，我将代码改回了我的代码，并且第二次起作用了。我对这两个函数进行了一些阅读，但我无法推理为什么会发生这种情况。

Answer 1

箭头功能和普通功能不相同。

这是区别：

箭头函数没有对此的绑定，因此您的this.setState引用YourClass.setState。

使用常规功能，您需要将其绑定到类上以获得Class的此引用。因此，当您实际调用this.setState时，它指的是YourFunction.setState（）。

示例代码

$ sudo yum update
........
$ sudo yum install docker-ce docker-ce-cli containerd.io
........
-------->  Finished Dependency Resolution
Error: Package: 3:docker-ce-19.03.8-3.el7.x86_64 (docker-ce-stable)
           Requires: systemd
Error: Package: 3:docker-ce-19.03.8-3.el7.x86_64 (docker-ce-stable)
           Requires: libsystemd.so.0(LIBSYSTEMD_209)(64bit)
Error: Package: 3:docker-ce-19.03.8-3.el7.x86_64 (docker-ce-stable)
           Requires: container-selinux >= 2:2.74
Error: Package: containerd.io-1.2.13-3.1.el7.x86_64 (docker-ce-stable)
           Requires: systemd
Error: Package: 3:docker-ce-19.03.8-3.el7.x86_64 (docker-ce-stable)
           Requires: libsystemd.so.0()(64bit)
Error: Package: containerd.io-1.2.13-3.1.el7.x86_64 (docker-ce-stable)
           Requires: container-selinux >= 2:2.74

React Native中箭头功能和普通功能之间的区别

1 个答案: