18.React学习笔记.高阶组件

##一. 高阶组件##

1.1 认识高阶组件###

高阶函数####

维基百科定义，至少满足以下条件之一：

  • 接受一个或多个函数作为输入；
  • 输出一个函数。
    JS中常见的filter，map，reduce都是高阶函数。

那什么是高阶组件呢？

  • 全名为Higher-Order Components，简称HOC。
  • 官方定义，HOC是参数为组件，返回值为新组件的函数

也就是说：

  • 高阶函数，本身，不是组件，是函数。
  • 其参数是，组件，返回值也是组件。
const EnhancedComponent = higherOrderComponent(WrappedComponent);

注意：给高阶组件传递属性时，需要在高阶组件内部进行相应接收。

import React, { PureComponent } from 'react'
class App extends PureComponent {
  render() {
    return (
      <div>
        App:{this.props.name}
      </div>
    )
  }
}
function enhanceComponent(WrappedComponent) {
  return class extends PureComponent {
    render() {
      return <WrappedComponent {...this.props}/>
    }
  }
}
const EnhanceComponent = enhanceComponent(App);
// 导出的为自定义的高阶组件
export default EnhanceComponent;

// index.js中的DOM渲染
ReactDOM.render(<App name="why"/>,document.getElementById('root'));

**补充：

  • 高阶组件并不是React API的一部分，它是基于React的组合特性而形成的设计模式；
  • 在一些第三方库中很常见：如redux中的connect；react-router中的withRouter；
    **

1.2 高阶组件的使用###

1.2.1 props的增强####

  1. 不修改原有代码的情况，添加新的props
    ``
    import React, { PureComponent } from 'react'
    // 定义一个高阶组件
    function enhanceRegionProps(WrappedComponent) {
    return props => {
    return <WrappedComponent {...props} region="中国" />
    }
    }
    class Home extends PureComponent {
    render() {
    return <h2>Home:{昵称：${this.props.nickname} 等级：${this.props.level} 区域：${this.props.region}}</h2>
    }
    }
    class About extends PureComponent {
    render() {
    return <h2>About:{昵称：${this.props.nickname} 等级：${this.props.level} 区域：${this.props.region}}</h2>
    }
    }
    const EnhanceHome = enhanceRegionProps(Home);
    const EnhanceAbout = enhanceRegionProps(About);

class App extends PureComponent {
render() {
return (
<div>
App:
<EnhanceHome nickname="coderwwq" level={90}/>
<EnhanceAbout nickname="kobe" level={99}/>
</div>
)
}
}
export default App;


2. 利用高阶组件来共享Context
利用withUser，**劫持props**

import React, { PureComponent, createContext } from 'react'

// 定义一个高阶组件
function withUser(WrappedComponent) {
return props => {
return (
<UserContext.Consumer>
{
user => {
return <WrappedComponent {...props} {...user} />
}
}
</UserContext.Consumer>
)
}
}

// 创建Context
const UserContext = createContext({
nickname: "默认",
level: -1,
region: "中国"
})

class Home extends PureComponent {
render() {
return <h2>Home:{昵称：${this.props.nickname} 等级：${this.props.level} 区域：${this.props.region}}</h2>
}
}
class About extends PureComponent {
render() {
return <h2>About:{昵称：${this.props.nickname} 等级：${this.props.level} 区域：${this.props.region}}</h2>
}
}

const UserHome = withUser(Home);
const UserAbout = withUser(About);

class App extends PureComponent {
render() {
return (
<div>
App:
<UserContext.Provider value={{ nickname: "wwq", level: 18, region: "中国" }}>
<UserHome />
<UserAbout />
</UserContext.Provider>
</div>
)
}
}
export default App;



####**1.2.2 渲染判断鉴权**####
- 某些页面必须用户登陆成功才能进入；
- 如果用户没有登陆成功，那么直接跳转到登陆页面；
- **劫持jsx**

import React, { PureComponent } from 'react'

class LoginPage extends PureComponent{
render() {
return <h2>LoginPage</h2>
}
}
function withAuth(WrappedComponent) {
const NewCpn = props => {
const {isLogin} = props;
if (isLogin) {
return <WrappedComponent {...props}/>
} else {
return <LoginPage/>
}
}
NewCpn.displayName = "AuthCpn"
return NewCpn;
}
// 购物车组件
class CartPage extends PureComponent {
render() {
return <h2>CartPage</h2>
}
}
const AuthCartPage = withAuth(CartPage);

export default class App extends PureComponent {
render() {
return (
<div>
<AuthCartPage isLogin={false}/>
</div>
)
}
}


####**1.2.3 生命周期劫持**####

import React, { PureComponent } from 'react'

class Home extends PureComponent {
// 即将渲染获取一个时间
// 该API即将废弃
componentWillMount(){
this.beginTime = Date.now();
}

render() {
return <h2>Home:</h2>
}
// 渲染完成再获取一个时间
componentDidMount(){
this.endTime = Date.now();
const interval = this.endTime - this.beginTime;
console.log(Home渲染时间：${interval});

}
}
class About extends PureComponent {
render() {
return <h2>About:</h2>
}
}

export default class App extends PureComponent {
render() {
return (
<div>
<Home/>
<About/>
</div>
)
}
}


- 上面代码进行高阶组件封装

import React, { PureComponent } from 'react'
function withRenderTime(WrappedComponent) {
return class extends PureComponent {
componentWillMount(){
this.beginTime = Date.now();
}
componentDidMount(){
this.endTime = Date.now();
const interval = this.endTime - this.beginTime;
console.log(${WrappedComponent.name}渲染时间：${interval});
}
render() {
return <WrappedComponent {...this.props}/>
}
}
}
class Home extends PureComponent {
render() {
return <h2>Home:</h2>
}
}
class About extends PureComponent {
render() {
return <h2>About:</h2>
}
}
const TimeHome = withRenderTime(Home);
const TimeAbout = withRenderTime(About);

export default class App extends PureComponent {
render() {
return (
<div>
<TimeHome/>
<TimeAbout/>
</div>
)
}
}


**注意：不要创建自己的组件基类，代码重用的主要方式是组合而不是继承。**
###**1.3 高阶函数的意义**###
- 针对某些代码进行优雅的处理。
- 不修改原有代码的情况下，添加新的props

**缺陷**：
- HOC需要在原组件上包裹或者嵌套，如果大量适用HOC，将会产生非常多的嵌套，调试困难。
- HOC可以劫持props，在不遵守约定的情况下可能造成冲突。

**##二. 组件补充##**
- 函数组件不能用ref。
- ref不是属性，交由React内部管理。 

- 获取函数组件元素，用forwardRef高阶组件。

###**2.1 ref转发**###
- forwardRef给原函数组件进行增强，加入一个ref属性。
- 在hooks中会更简单，后话。

import React, { PureComponent, createRef, forwardRef } from 'react'

class Home extends PureComponent {
render() {
return <h2>Home</h2>
}
}
// 已经封装好的高阶组件
const Profile = forwardRef(function(props, ref){
console.log(props.name);

return <h2 ref={ref}>Profile</h2>
})
export default class App extends PureComponent {
constructor(props){
super(props);
this.titleRef = createRef();
this.homeRef = createRef();
this.profileRef = createRef();
}
render() {
return (
<div>
<h2 ref={this.titleRef}>Hello World</h2>

    <Home ref={this.homeRef}/>

    <Profile ref={this.profileRef}/>
    
    <button onClick={e=>this.printRef()}>打印ref</button>
  </div>
)

}
printRef(){
console.log(this.titleRef.current);
console.log(this.homeRef.current);
console.log(this.profileRef.current);
}
}

###**2.2 Portals**###
- 某些情况下，我们希望渲染的内容独立于父组件，甚至是独立于当前挂载到的DOM元素中（默认都是挂载到id为root的DOM元素上的）。
- 希望渲染的组件完全独立，例如，弹窗。

- 弹窗直接放到body中。
- css完全居中。

Protal提供了一种将子节点渲染到存在于父组件以外的DOM节点的优秀方案：
- 第一个参数child是任何可渲染的React子1元素；
- 第二个参数container是一个DOM元素。

####Modal组件案例：将子组件渲染到屏幕的中间位置####

import React, { PureComponent } from 'react'
import ReactDOM from 'react-dom'
class Modal extends PureComponent {
render() {
return ReactDOM.createPortal(
this.props.children,
document.getElementById("modal")
)
}
}
class Home extends PureComponent {
render() {
return (
<div>
<h2>Home</h2>
<Modal>
<h2>Title</h2>
</Modal>
</div>
)
}
}
export default class App extends PureComponent {
render() {
return (
<div>
<Home/>
</div>
)
}
}

###**2.3 Fragment**###

###**2.4 StrictMode严格模式**###
检测：
- 不安全的生命周期
- 使用过时的ref API
- 使用废弃的findDOMNode方法
- 以外的副作用
- 过时的context API

####
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,386评论 6赞 479
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,939评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,851评论 0赞 341
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,953评论 1赞 278
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,971评论 5赞 369
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,784评论 1赞 283
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,126评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,765评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,148评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,744评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,858评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,479评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,080评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,053评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,278评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,245评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,590评论 2赞 343