React高阶组件及CRA的定制

}

}

export default withCopy

About组件：

import React, { Component } from ‘react’

//引入高阶组件withCopy

import withCopy from “./withCopy”

class About extends Component {

render() {

return (

About {this.props.info}

)

}

}

export default withCopy(About)

App组件：

import React, { Component } from ‘react’

import About from “./About”

export default class App extends Component {

render() {

return (

<About info={“这是app给他传过去的”}/>

)

}

}

对于CRA的定制

===================================================================

因为我们发现，调用高阶组件的时候采用withCopy(About)代码，但是不够简洁优雅。

那么我们可以采用装饰器的写法实现调用高阶组件

@withCopy

class About extends Component {

render() {

return (

About {this.props.info}

)

}

}

export default About

很不幸，目前的cra是不支持这种写法，我们需要单独进行定制，让其支持这种写法。

1.yarn add react-app-rewired

可以在npm网站中搜索react-app-rewired进行使用

在进行文档的阅读后可以继续以下步骤

2. 对脚手架进行轻微的调整

将package.json文件中的react-scripts更改为react-app-rewired

“scripts”: {

- “start”: “react-scripts start”,

+ “start”: “react-app-rewired start”,

- “build”: “react-scripts build”,

+ “build”: “react-app-rewired build”,

- “test”: “react-scripts test --env=jsdom”,

+ “test”: “react-app-rewired test --env=jsdom”,

“eject”: “react-scripts eject”

}

3. yarn start启动项目发现报错了，原因是因为根路径下面缺少 config-overrides.js文件

在项目根目录下创建文件并进行配置

.

module.exports = function override(config, env) {

return config;

}

但是启动的时候，发现还是报错，原因是缺少对于decorators-legacy的支持。

5. 如果想配置的更加方便的话，需要安装 customize-cra ,

在项目根目录下创建config-overrides文件

算法刷题

大厂面试还是很注重算法题的，尤其是字节跳动，算法是问的比较多的，关于算法，推荐《LeetCode》和《算法的乐趣》，这两本我也有电子版，字节跳动、阿里、美团等大厂面试题（含答案+解析）、学习笔记、Xmind思维导图均可以分享给大家学习。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

写在最后

最后，对所以做Java的朋友提几点建议，也是我的个人心得：

1. 疯狂编程

2. 学习效果可视化

3. 写博客

4. 阅读优秀代码

5. 心态调整