React 高级组件快速入门

当您将组件转移到函数并返回一个新的组件时,它被称为高级组件(HOC)。

在本文中,您将看到高级组件抽象如何使您的作品更易于阅读,可重复使用和可复制。

一些术语

在我们前进之前,让我们定义我们正在创建一个更高级别的版本,虽然您可能会看到这些定义互换使用,但重要的是要知道它们的差异:

节点:已安装在 DOM 上的一种 HTML 元素。您的浏览器正在渲染它,并且 JavaScript 可以操纵它
实例:组件类的运行时实例. 这些是记忆中的 JavaScript 对象
元素:描述节点或会出现实例的一些标记。在 React 中,这些被转载到 JavaScript 对象中,它们反过来在运行时变成实例
组件:对一个元素的抽象。它们可能具有某种内部状态,并且可能根据他们所接收的专业行为有所不同。当被要求渲染时,组件会返回元素
高级组件(HOC):对一个组件的抽

潜水在

假设我们即将开始在我们的应用程序的用户页面上工作,我们知道我们的用户对象是什么样子,但我们还没有完全决定我们想要使用什么样的授权。

我们可以从一个简单的HOC函数开始,名为与用户,我们希望这个函数包围我们传递给它的任何组件,并为我们的用户对象提供一个支持。

 1const withUser = WrappedComponent => {
 2  class WithUser extends React.Component {
 3    constructor(props) {
 4      super(props);
 5      this.state = {
 6        user: sessionStorage.getItem("user")
 7      };
 8    }
 9    render() {
10      return {...this.props} />;
11    }
12  }
13
14  return WithUser;
15};

解释了:

我们的函数与用户将任何组件作为参数
内部,我们创建一个与用户组件类,该类从sessionStorage读取用户对象,并将其添加到声明中
渲染函数将WrappedComponent作为一个新的元素返回,从状态添加用户代理
我们将外部的this.props传递到内部的WrappedComponent

或者,如果状态不必要,建议使用功能性HOC:

1const withUser = WrappedComponent => {
2  const user = sessionStorage.getItem("user");
3  return props => ;
4};

让HOCs使用

当我们想要访问我们页面上的用户对象时,我们可以拨打与用户来包装页面的组件:

1const UserPage = props => (
2  <div class="user-container">
3    <p>My name is {props.user}!</p>
4  </div>
5);
6
7export default withUser(UserPage);

我们的与用户函数将一个组件作为一个论点,并返回一个更高的订单组件。从现在开始,如果我们决定改变事物,我们只需要编辑我们的HOC。

在野外

如果你以前不熟悉HOC,你可能会遇到他们而没有意识到它!一些值得注意的例子:

react-redux: connect(mapStateToProps, mapDispatchToProps)(UserPage)
react-router: withRouter(UserPage) *材料-ui: with Styles(styles)(UserPage)

奖金

Redux 的组成函数允许多个 HOC 组成一个,例如:

1import { compose } from 'redux';
2// ... other imports
3
4export default compose(
5  withStyles(styles),
6  withRouter,
7  withUser
8)(UserPage);

在这种情况下,我们的风格、路由器和用户都将被传送到我们的用户页面组件中。