javascript - Facebook 的 React JS 框架中的上下文

Question

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

在将规范传递给 React.createClass 时，某些方法（尤其是事件处理程序）似乎需要使用 React.autoBind 来“将回调绑定到组件”。其他方法（特别是render()）没有这个要求，但仍然很乐意参考this.propsor 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

在任何组件框架中（不仅仅是 react），事件处理程序都需要手动管理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>
        );
    }