Question

我很难理解Facebook的React JS框架中的上下文如何工作。

当将规范传递给React.createClass时，某些方法（特别是事件处理程序）似乎需要使用React.autoBind来“绑定到组件的回调”。其他方法（特别是render（））没有这个要求，但仍然乐于引用'this.props'或'this.state'。

如果render（）方法不是组件，那么'this'的上下文是什么？

Answer 1

那是因为他们对autoBind等内部方法已经render了。实际上，如果您致电autoBind并传递这些方法，则会收到错误。

对于自定义方法，最初的想法是您可能希望坚持要分配的任何上下文，但这在0.4.x（http://facebook.github.io/react/blog/2013/07/02/react-v0-4-autobind-by-default.html）中已更改。

基本上因为绑定this大部分时间都是你想要的，从现在起createClass中的每个方法现在默认为autoBind。

Answer 2

在任何组件框架中（不仅仅是反应），事件处理程序需要手动管理this引用，因为它们作为回调函数注册到DOM中，而不是方法。在react 0.3中你可以自己绑定this引用，或者你可以使用效率更高的React.autoBind。在React 0.4中，所有事件处理程序在进入DOM的过程中都受到框架的约束，因此您不必再考虑它了。

因此this引用始终是对反应组件实例的引用。

Answer 3

ReactJs中的当前上下文是ReactJs的一个新钩子（自v16.6.3起）。它旨在将属性向下传递到组件树，而无需对父元素中的每个嵌套元素进行硬编码。基本示例：

    // Design context
    const DesignContext = React.createContext({background: 'light'});

    // User context
    const UserContext = React.createContext({
        name: 'NewUser',
    });


    // A component may consume multiple contexts
    function Content() {
        return (
            <DesignContext.Consumer>
                {background => (
                    <UserContext.Consumer>
                        {user => (
                            <ProfilePage user={user} background={background} />
                        )}
                    </UserContext.Consumer>
                )}
            </DesignContext.Consumer>
        );
    }

Facebook的React JS框架中的上下文

3 个答案: