学习React[五]

最新推荐文章于 2024-10-14 12:37:39 发布

又菜又爱玩__QAQ

最新推荐文章于 2024-10-14 12:37:39 发布

阅读量531

点赞数 1

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_60505953/article/details/122133828

版权

高阶组件的使用

2.高阶组件增强props

3.高阶组件-context

4.高阶组件生命周期劫持

1.高阶组件的定义方式

import React, { PureComponent } from 'react'

// 高阶组件是参数为组件，返回值为新组件的函数


// 我们给index.js传数据
class App extends PureComponent {
  render() {
    return (
       <div>
        <h2>app: {this.props.name}</h2>
      </div>
    )
  }
}

// 定义高阶组件enhanceComponent

function enhanceComponent(WrappedComponent) {
  class NewComponent extends PureComponent {
    render() {
      return <WrappedComponent {...this.props}/>
    }
  }

  // 改变组件的名称 组件名.displayName = 新的组件名
  NewComponent.displayName = 'czm';
  return NewComponent;
}

const EnhanceComponent = enhanceComponent(App);

export default EnhanceComponent;

ReactDOM.render(
    <EnhanceComponent name='czm' />
  document.getElementById('root')
);

2.高阶组件增强props

import React, { PureComponent } from 'react'

// 定义一个高阶组件
function enhanceProps(WrappedComponent) {
  return props => {
    return <WrappedComponent {...props} region='中国'/>
  }
}

export default class App extends PureComponent {
  render() {
    return (
        <div>
        <EnhanceHome nickname='czm' age={22}/>
        <EnhanceAbout nickname='ez' age={18}/>
      </div>
    )
  }
}

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

const EnhanceHome = enhanceProps(Home);

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

const EnhanceAbout = enhanceProps(About);

3.高阶组件-context

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

// 创建一个共享数据

const UserContext = createContext({

  nickname: '默认值',

  age: 0,

  region: ''

});



// 创建另一个共享数据

const ThemeContext = createContext({

  nickname: '默认值',

  age: 0,

  region: ''

});



// 创建一个高阶组件
function enhanceUser(WrappedComponent) {
  return props => {
    return (
      <UserContext.Consumer>
        {
          value => {
            return (
              <WrappedComponent {...props} {...value} />
            )
          }
        }
      </UserContext.Consumer>
    )
  }
}


// 创建一个高阶组件
function enhanceTheme(WrappedComponent) {
  return props => {
    return (
      <ThemeContext.Consumer>
        {
          value => {
            return (
              <WrappedComponent {...props} {...value} />
            )
          }
        }
      </ThemeContext.Consumer>
    )
  }
}

export default class App extends PureComponent {
  render() {
    return (
      <div>
        <UserContext.Provider value={{ nickname: 'czm', age: 21, region: '中国' }}>
          <ThemeContext.Provider value={{ nickname: 'ez', age: 18, region: '中国' }}>
            <EnhanceHome />
            <EnhanceAbout />
          </ThemeContext.Provider>
        </UserContext.Provider>
      </div>
    )
  }
}

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

const EnhanceHome = enhanceUser(Home);
class About extends PureComponent {
  render() {
    return (
      <h2>
		About: {
			`昵称：${this.props.nickname} 
             等级：${this.props.age} 
             区域：${this.props.region}
            `}
      </h2>
    )
  }
}

const EnhanceAbout = enhanceTheme(About);

4.高阶组件生命周期劫持

import React, { PureComponent } from 'react'

export default class App extends PureComponent {
  render() {
    return (
       <div>
        <TimeHome name='Home'/>
        <TimeAbout name='About'/>
      </div>
    )
  }
}

// 定义一个高阶组件
function withRenderTime(WrappedComponent) 
  return class NewComponent extends PureComponent {

    // 即将渲染获取一个时间 beginTime
    componentWillMount() {
      this.beginTime = Date.now();
    }

    // 渲染完成再获取一个时间 endTime
    componentDidMount() {
      this.endTime = Date.now();
      const interval = this.endTime - this.beginTime;
      // console.log(`${WrappedComponent.name}渲染时间：${interval}`);
      console.log(`${this.props.name}渲染时间：${interval}`);
    }

    render() {
      return (
        <WrappedComponent {...this.props} />
      )
    }
  }
}
// 创建Home组件
class Home extends PureComponent {
  render() {
    return <h2>Home</h2>
  }
}

// 创建About组件
class About extends PureComponent {
  render() {
    return <h2>About</h2>
  }
}

const TimeHome = withRenderTime(Home);
const TimeAbout = withRenderTime(About);