十二、高阶组件、refs、hooks等

高阶组件

参考
官网
https://segmentfault.com/a/1190000010371752

与父组件区别

• 高阶组件作为一个函数，它可以更加纯粹地关注业务逻辑层面的代码，比如数据处理，数据校验，发送请求等，可以改善目前代码里业务逻辑和UI逻辑混杂在一起的现状。父组件则是UI层的东西，我们先前经常把一些业务逻辑处理放在父组件里，这样会造成父组件混乱的情况。为了代码进一步解耦，可以考虑使用高阶组件这种模式。

高阶组件就是一个没有副作用的纯函数。
1、例子

import React, { Component } from 'react';
import simpleHoc from './simple-hoc';

class Usual extends Component {
  render() {
    console.log(this.props, 'props');
    return (
      <div>
        Usual
      </div>
    )
  }
}
export default simpleHoc(Usual);
import React, { Component } from 'react';

const simpleHoc = WrappedComponent => {
  console.log('simpleHoc');
  return class extends Component {
    render() {
      return <WrappedComponent {...this.props}/>
    }
  }
}
export default simpleHoc;

可以用装饰器

import React, { Component } from 'react';
import simpleHoc from './simple-hoc';

@simpleHoc
export default class Usual extends Component {
  render() {
    return (
      <div>
        Usual
      </div>
    )
  }
}

ref获取原始图片尺寸，滚轮放大缩小

import React from 'react';

class Test extends React.PureComponent {

  state = {
    ratio : 1,
    originWidth: 'auto',
    originHeight: 'auto',
  }

  componentDidMount() {
    this.getImgSize();
  }

  getImgSize = () => {
    console.log(this.imgEl)
    this.setState({
      originWidth: this.imgEl.width,
      originHeight: this.imgEl.height
    })
  }

  wheelScale = (e) => {
    let {ratio} = this.state
    e.preventDefault()
    if (e.deltaY < 0) {
      ratio += 0.15
    } else {
      ratio -= 0.15
    }
    this.setState({
      ratio,
    })
  }

  render() {
    const url ='http://img5.imgtn.bdimg.com/it/u=3300305952,1328708913&fm=26&gp=0.jpg';
    const {ratio} = this.state;
    const {originWidth, originHeight} = this.state;
    return (
      <div style={{height:'500px',width:'500px', overflow:'hidden'}}>
        <img
          src={url}
          width={originWidth*ratio}
          height={originHeight*ratio}
          alt="预览图片"
          onWheel={this.wheelScale}
          ref={(img) => {this.imgEl = img}}
        />
      </div>
    )
  }
}
export default Test;

理解

1、高阶函数传入一个函数或者return一个函数
2、高阶组件，解决mixin问题
3、属性代理模式，常用，修改或增加props

image.png
4、反向继承
image.png
5、静态方法丢失，用hoist-non-react-statics处理
6、refs不能传递，<Enhancer getRef={ref => this.wrappedC = ref} />