React材料清单

antd的快捷引用

antd官方引用方法需要分别引入js和css，import Button from 'antd/lib/button'; import 'antd/dist/antd.css' 对于大量组件引用来说未免繁琐。这里可以通过安装react-app-rewired取代react-scripts，在项目根目录下创建config-overrides.js（类似Vue里的vue.config.js）对Webpack进行扩展。配合babel-plugin-import插件进行模块导入。具体版本如下：npm install react-app-rewired@2.0.2-next.0 babel-plugin-import --save这里的奇怪版本号适用于npm。

const {injectBabelPlugin} = require('react-app-rewired')
module.exports = function override(config,env){
    //对导入配置进行格式化后再返回
    config = injectBabelPlugin([
        'import',{libraryName:'antd',libraryDirectory:'es',style:'css'}
    ],config)
    return config
}

config-overrides.js里配置完成后需要在package.json里对react-scripts进行修改

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
  }
//修改完后再使用指令会以react-app-rewired方式执行

然后导入import { Button } from "antd"
Can't be too easy

模板字符串和组件的扩展嵌套

模板字符串由反单引号包围{border:`2px solid ${props.clor||"blue"}`}使用类似PHP语法的${}嵌套

import React, { Component } from "react";
import { Button } from "antd";

function Dialog(props) {
  return (
    <div style={{ border: `4px solid ${props.color || "blue"}` }}>
      {props.children}
      <div className="footer">{props.footer}</div>
    </div>
  );
}

function WelcomeDialog() {
  const confirmBtn = (
    <Button type="primary" onClick={() => alert("react")}>
      确认
    </Button>
  );
  return (
    <Dialog color="green" footer={confirmBtn}>
      <h1>欢迎光临</h1>
      <p>感谢使用</p>
    </Dialog>
  );
}

export default class Composition extends Component {
  render() {
    return (
      <div>
        <WelcomeDialog />
      </div>
    );
  }
}

例子中使用WelcomeDialog对Dialog组件进行扩展，使Dialog组件成为一个比较干净的展示组件，增大组件的可复用性。

高阶组件装饰器

装饰器的作用是在高阶组件链式调用时显示为更清爽的界面，首先安装，
npm install --save-dev babel-plugin-transform-decorators-legacy，然后在config-overrides.js中添加相关配置

  //添加装饰器
  config = injectBabelPlugin(
    ["@babel/plugin-proposal-decorators", { legacy: true }],
    config
  );