Question

我做出反应。尝试从这个链接学习react-firebase教程：https://www.robinwieruch.de/complete-firebase-authentication-react-tutorial/并且无法获得某些函数和类的内容。

这是代码：

import React from 'react';
import { connect } from 'react-redux';

import { firebase } from '../firebase';

const withAuthentication = (Component) => {
  class WithAuthentication extends React.Component {
    componentDidMount() {
      const { onSetAuthUser } = this.props;

      firebase.auth.onAuthStateChanged(authUser => {
        authUser
          ? onSetAuthUser(authUser)
          : onSetAuthUser(null);
      });
    }

    render() {
      return (
        <Component />
      );
    }
  }

  const mapDispatchToProps = (dispatch) => ({
    onSetAuthUser: (authUser) => dispatch({ type: 'AUTH_USER_SET', authUser }),
  });

  return connect(null, mapDispatchToProps)(WithAuthentication);
}

export default withAuthentication;

我从这段代码中了解了很多东西，但最初创建了函数，然后创建了具有相同名称的类。这里有什么神奇的魔力。另外一点是在外部函数参数中给出了Component，为什么会这样！？

这是其他代码：

import React from 'react';
import { connect } from 'react-redux';
import { compose } from 'recompose';
import { withRouter } from 'react-router-dom';

import { firebase } from '../firebase';
import * as routes from '../constants/routes';

const withAuthorization = (condition) => (Component) => {
  class WithAuthorization extends React.Component {
    componentDidMount() {
      firebase.auth.onAuthStateChanged(authUser => {
        if (!condition(authUser)) {
          this.props.history.push(routes.SIGN_IN);
        }
      });
    }

    render() {
      return this.props.authUser ? <Component /> : null;
    }
  }

  const mapStateToProps = (state) => ({
    authUser: state.sessionState.authUser,
  });

  return compose(
    withRouter,
    connect(mapStateToProps),
  )(WithAuthorization);
}

export default withAuthorization;

这里做了2次胖箭头功能，当执行2个胖箭头时执行完全返回。而它的嵌套功能就像是什么？请理解任何解释。

Answer 1

这里有什么神奇的魔力。而其他的事情就是在外面函数参数是作为Component给出的，为什么会这样！？

您遇到了更高级别的组件。

有几种资源可以对您有所帮助。您可以在React中查看更高阶的组件或增强器。它们有时可以互换使用。

请看这里：

在YouTube上搜索主题也很有帮助。

这里做了2次胖箭头功能，当执行2个胖箭头时执行完全返回。而它的嵌套功能就像是什么？请理解任何解释。

这是一个返回另一个功能的函数。

让我们举个例子：

const fn1 = (arg1, arg2) => (arg3, arg4) => {
  return 'Hi' + arg1 + arg2 + arg3 + arg4
}

这是：

的简写

const fn1 = function (arg1, arg2) {
  return function (arg3, arg4) {
    return 'Hi' + arg1 + arg2 + arg3 + arg4
  }
}

另请注意，=>绑定到您当前的范围。请阅读更多here。

以上扩展代码的更正确版本是（它有点难以阅读）：

const fn1 = function (arg1, arg2) {
  return function (arg3, arg4) {
    return 'Hi' + arg1 + arg2 + arg3 + arg4
  }.bind(this)
}.bind(this)

=>（胖箭头）与传统function(){}之间的区别。我不认为考虑到两者之间的差异太重要了，你可能会发现投入时间学习返回函数的函数在React的上下文中更有用。

反应类的功能如何执行？

1 个答案: