React进阶篇（一）高阶组件

高阶组件 高阶组件（Higher Order Component,HOC）是React的一种设计模式，用于增强现有组件的功能。 一个高阶组件就是一个函数，这个函数的输入为组件，输出为另一新组件。 根据输入组件和输出组件参数的关系，可以分为： 代理方式的高阶组件 继承方式的高阶组件 函数式子组件 Mixin（不要使用） 1. 代理式高阶组件（推荐） 例子如下： // 为原组件WrappedComponent增加新的属性newProps function addNewProps(WrappedComponent, newProps) { return class WrappingComponent extends React.Component { render(){ return } } } 特点： 高阶组件和被包裹组件有各自的生命周期； 可对原组件的props进行增强或者删减 渲染方式为 - return 2.继承式高阶组件 继承式高阶组件常用于渲染劫持，例如，当用户处于登陆状态时，允许组件渲染；否则渲染一个空组件。 function withAuth(WrappedComponent, newProps) { return class WrappingComponent extends WrappedComponent { render(){ if (this.props.loggedIn) { this.props = {...this.props, ...newProps} return super.render(); } else { return null; } } } } 特点： 只有一个生命周期 可以对原组件的props进行增强或者删减 渲染方式为 - return super.render(); 3. 函数式子组件 前面两种高阶组件都会操作props，通过增减props而改变原组件功能。 函数式子组件不会操作组件的props，但是，它的要求是： 父组件必须有子组件 子组件必须为函数 如下面的例子： // 定义组件 class AddUserProp extends React.Component { render(){ const user = 'mock user'; return this.props.children(user); } } // 使用该组件 {(user)=>

user

} 因为子组件是函数，所以这种模式非常灵活。 顺着这个方式往下扩展，我们可以发现，这种父组件并没有创建出新的组件，而是将props属性向注入到原组件内。 这种设计模式就是“依赖注入”。当A依赖B时，并不要将A直接依赖B，而是将B以接口的形式传递给A（通过函数）。 所以，我们也可以让父组件不包含子组件，直接将通过props函数来渲染组件。 const Auth(props) { const user = getUser(); if (user.login){ const allProps = {...user, ...props}; return ( {props.login(allProps)} ) } else { return ( {props.nologin(props)} ) } } // usage }> nologin={props=>} /> 4. MixIn 应用场景：只能在React.createClass方式创建的组件类中使用，不能通过ES6 Class创建的组件中使用。 MixIn是一种反模式的设计，它可以继承多个组件，包括其内部状态state。所以，很容易造成state混乱，官方不建议使用。 5. 注意事项 不要在组件的render中使用高阶组件。因为调用高阶组件，每次都会返回一个新组件，所以，每次render，前一次高阶组件创建的组件都会被卸载，然后重新挂载，既影响效率，有丢失了组件及其子组件的状态。高阶组件适合在组件外部使用。 // 不好的应用场景 render(){ // 每次render，enhance都会创建一个新组件，尽管被包装组件没有变化 const EnhancedComponent = enhance(MyComponent); // 因为是新组件，所以会经历旧组件的卸载和新组件的重新挂载 return } 高阶组件和父组件很类似。区别在于：高阶组件是一个函数，关注逻辑；父组件是一个组件，关注UI/DOM。如果逻辑和DOM不相关（如数据校验，请求发送等），那么这部分逻辑适合放在高阶组件里。 微信公众号：

本文章由javascript技术分享原创和收集