高阶组件即接受组件返回组件,形式如下:

export default class UserList extends Component {
  state = {
    list: [],
  };
  componentDidMount() {
    fetch('')
      .then((response) => response.json())
      .then((list) => this.setState({ list }));
  }
  render() {
    return (
      <>
        <ul>
          {this.state.list.map((user) => (
            <li key={user.id}>{user['name']}</li>
          ))}
        </ul>
      </>
    );
  }
}

const widthData: IWidthData = url => Component => {
    return class extends React.Component {
        constructor(props: any) {
            super(props);
            this.state = { list: [{name:'cc',id:'1'}] }
        }
        componentDidMount() {
            fetch(url)
                .then(response => response.json())
                .then(list => this.setState({ list }))
        }
        render() {
            return <Component {...this.props} {...this.state} />
        }
    }
}
type IList = Readonly<{
    list: any[]
}>;

const List = ({ list }: IList) => (
    <ul>
        {
            list.map(user => (
                <li key={user.id}>{user['name']}</li>
            ))
        }
    </ul>
);

export default widthData('url')(List)
//这里也可以使用props动态修改url,修改方案如下
componentDidMount(){
    const _url=typeof url ==='function'?url(this.props):url;
    // ...
}
export default widthData(props=>`url/${props.username}`)(List)

const style = {
  color: 'blue',
};
const Button = () => <button style={style}>click me</button>;

import radium from 'radium';
const styles = {
  backgroundColor: '#ff0000',
  width: 320,
  padding: 20,
  borderRadius: 5,
  border: 'none',
  outline: 'none',
  ':hover': {
    color: '#fff',
    backgroundColor: 'blue',
  },
  '@media (max-width:480)': {
    width: 160,
  },
};
const Button = () => <button style={styles}>click me </button>;
export default radium(Button);

import styles from './btn.module.css'
const Button=()=><button className={styles.btn} >click me </button>

//btn.module.css
.btn{
    background-color:'#ff0000';
    width:320;
    padding:20;
    border-radius:5;
    border:'none';
    outline:'none';
}

import cssModules from 'react-css-modules';
const Button = () => <button styleName="button">Click me!</button>;
export default cssModules(Button, styles);

import styled from 'styled-components';
const Button = styled.button`
  background: #ff0000;
  width: 320px;
  padding: 20px;
  border-radius: 5px;
  border: none;
  outline: none;
`;
export default Button;

const toLowerCase = (input) => {
  const output = [];
  for (let i = 0; i < input.length; i++) {
    output.push(input[i].toLowerCase());
  }
  return output;
};

const toLowerCase = (input) => input.map((v) => v.toLowerCase());

它是函数编程的常用技巧，过程是将多参数函数转换成单参数函数，这些单参数函数返回值也是函数。