React(7.2)--React ES6 处理 mixin
来源:互联网 发布:小美工作室淘宝真假 编辑:程序博客网 时间:2024/06/01 21:22
前言:
由于 mixin 有悖 JavaScript 语义化,React ES6 使用高阶组件替代 Mixins。
这一节,我们将主要讨论如何使用 高阶组件 的方式取代传统的 React Mixins。
那个我们怎么使用 ES6 处理 mixin?
什么是 高阶组件 ?
通过函数向现有组件类添加逻辑,就是高阶组件。
高阶组件实际上只是一个方法,这个方法利用一个现有组件去返回另一个包装它的组件。
我们看一下 React ES6 是如何实现 mixin 的
import React from 'react';//1、引入 HighterComponet 方法import {HighterComponet} from './HighterComponet';class Example extends React.Component { //...略...}//2、export 高阶组件包装增强后的Exampleexport default HighterComponet(Example);
解析:我们把一些通用的逻辑处理放到 HighterComponet 方法中,而 Example 组件需要用到其中的逻辑处理。经过上面的处理后,export 出来的 Example 组件就包含了 HighterComponet 的逻辑处理,Example 就变成了一个高阶组件(高阶函数-回调函数)。
然后我们再来看一下 HighterComponet 的内容:
import { Component } from "React" ;export const HighterComponet = (ComposedComponent) => class extends Component { constructor() { this.state = { data: null }; } componentDidMount() { this.setState({ data: 'Hello' }); } render() { return <ComposedComponent {...this.props} data={this.state.data} />; }};
HighterComponet 就是一个方法,他的参数的一个组件。当传入一个 Component 的时候,它将自动为该 Component 进行扩展并返回新的类定义。
上例中,就返回了一个扩展的 Component 类,为构造函数中添加了 state,也在 React 生命周期函数 componentDidMount中添加了处理逻辑,而 render 方法则使用了传入的参数,完成了渲染。
我们再回头看一下 Example 组件:
import { Component } from "React";import { HighterComponet } from "./HighterComponet ";class Example = class extends Component { render() { if (!this.props.data) return <div>Waiting...</div>; return <div>{this.data}</div>; }}export default HighterComponet (Example );
Example 仅仅知道别人会把数据通过 this.prop.data 传进来,其他就都不关心了。可以看到,和 Mixins 的扩展方式相比,Example 的工作要轻松很多。
0 0
- React(7.2)--React ES6 处理 mixin
- ES6+REACT+MIXIN
- React(7.1)--mixin
- React与ES6(四)ES6如何处理React mixins
- React Mixin 的介绍
- React之Mixin
- react 学习--使用Mixin
- React Mixin HelloWorld
- React双向绑定Mixin
- 16、react之 MIxin
- React中的Mixin
- React+ES6
- React中Mixin的使用
- ReactJS学习系列课程(React mixin的使用)
- react学习笔记 item9 ---双向绑定(mixin)
- React-基于React & Reflux 的评论框组件 (ES6)
- React Native es6继承(Component例子)
- React与ES6(一)开篇介绍
- 75.Find Peak Element-寻找峰值(中等题)
- java--servlet相关类(1)
- 多进程和多线程之间的通信方式及通信实现步骤小结
- selinux 基础知识
- [LeetCode-389]Find the Difference
- React(7.2)--React ES6 处理 mixin
- Plus One
- android EventBus
- 网络编程中客户端和服务端通信过程、原理及代码示例
- 图像处理之积分图应用一(半径无关的快速模糊算法)
- RxJava详细解析
- Python 学习第三天
- JAVA基础再回首(二十七)——JAVA中的图形化界面、GUI概述、简单的窗体创建、事件监听机制、动作事件、GUI布局、鼠标事件
- Glide详细解析