redux

安装项目 安装全局yarn npm i yarn -g // 安装项目 npx create-react-app 你的项目名 --template typescript 进入项目目录 cd 你的项目名 安装需要的支持库(redux,react-router-dom) yarn add redux react-redux@types/react-redux -S yarn add react-router-dom @types/react-router-dom -S 安装需要的第三库(antd,babel-plugin-import,axios,mockjs) yarn add babel-plugin-import -D yarn add antd axios mockjs -S node-sass yarn add node-sass 配置babel文件–antd // .babelrc { "plugins" : [ [ "import" , { "libraryName" : "antd" , "libraryDirectory" : "es" , "style" : "css" // `style: true` 会加载 less 文件 } ] ] } 配置mobx—不需要 yarn add mobx mobx-react -s yarn add @babel/plugin

转自于: https://www.jianshu.com/p/333f390f2e84 写了一段时间的 react 之后，渐渐的喜欢上了使用 react 来写应用。 我们知道， Facebook 在推出 react 时打出的旗号之一就是高性能。 今天我们还一起来聊一聊 react 的性能优化，思考还能通过哪些手段来提升React的性能，使我们的 react 更快，性能更好。 一，react组件的性能优化（渲染角度优化） 1，react性能查看工具 再讲性能优化之前，我们需要先来了解一下如何查看react加载组件时所耗费的时间的工具，在react 16版本之前我们可以使用 React Perf 来查看。 大家可以在chorme中先安装React Perf扩展，然后在入口文件或者 redux 的 store.js 中加入相应的代码即可： React Perf 在最新的React16版本中，我们可以直接在url后加上 ?react_pref ，就可以在chrome浏览器的 performance ，我们可以查看 User Timeing 来查看组件的加载时间。 react16.0_pref 使用此工具的具体操作大家可以看下图： react16.0_pref.gif 2，单个react组件性能优化 2.1， render 里面尽量减少新建变量和 bind 函数