react 高阶组件

react

高阶函数对大家可能有点陌生，我们把高阶和函数分开来看，先看什么是高阶然后再看什么是组件。

高阶函数

• 可以有效降低复杂性和组件的体积
• 便于阅读和理解
• 减少bug 产生机会

在函数式编程中，就是有高阶函数概念，所谓高阶就是函数可以作为函数的参数和函数返回值

const arr = [1,2,3,4,5];
for (let i = 0; i < arr.length; i++) {
  const element = arr[i];
  console.log(element)
}

下面代码就是函数式编程，好处是没有产生中间变脸element 和 i，更容易阅读和理解，其实大家认为上面的代码更容易阅读和了解，之所以你这样认为那是因为你更熟悉这种方式 coding，并不能说明这样 coding 更便于阅读。

const arr1 = [1,2,3,4,5];
arr1.forEach(element=>console.log(element))

react 组件
组件实际上就是函数
使用组件可以提供高复用
易于维护

高阶组件

import React, { Component } from 'react';

 const RandomPosition = (WrappdComponent) =>{
    return class extends React.Component{
        constructor(props){
            super(props);
            this.state = {
                position:{
                    top:`${Math.floor(Math.random() * 100)}vh`,
                    left:`${Math.floor(Math.random() * 100)}vw`
                }
            };
        }

        render(){
            return <WrappdComponent {...this.props} position={this.state.position}/>
        }
    }
}

export default RandomPosition;

定义组件 RandomPosition 函数接收一个 WrappdComponent 组件作为参数，然后返回一个扩展（继承）了 Component 的匿名类（组件）做为返回值。典型的高阶组件呀。这个对传入组件进行定位。

import React, { Component } from 'react';
import RandomPosition from './RandomPosition';

const ReactLogo = (props) =>{
  return(
    <img
      style={props.position}
      onClick={props.jump}
      onMouseOver={props.flip}
      src="../public/react-logo.png"
    />
  )
}

const ExtendedReactLogo= RandomPosition(ReactLogo);

export default class Greeting extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            count:0
        }
        this.incrementCount = this.incrementCount.bind(this);
        this.resetCount = this.resetCount.bind(this);
    }

    incrementCount(){
        this.setState({
            count:this.state.count + 1
        });
    }

    resetCount(){
        this.setState({
            count:0
        })
    }

    render(){
        const children = [];
        for(let i  =0; i < this.state.count; i++){
            children.push(<ExtendedReactLogo key={i}/>);
        }

        return (
            <div className="container">
                {children}
                <br/>
                <button className="btn btn-blue count" 
                    onClick={this.incrementCount}
                    >
                    <h1>添加</h1>
                    </button>
            </div>
        )
    }
}

const ExtendedReactLogo= RandomPosition(ReactLogo);

上面的代码中定义 ReactLogo 这个图片组件，然后作为参数传入给 RandomPosition 生成 ExtendedReactLogo 组件。

javascript-illustration.png