1.資源文件位置 圖片一般放在src/assets目錄下
2.如何引入文件路徑
1.可以使用create-react-app提供的yarn run eject 將所有內(nèi)建的配置暴露出來(lái)，然后配置
2.Create React App 3可以使用絕對(duì)路徑，參考官網(wǎng)或者網(wǎng)上一些文章胳搞，例如https://medium.com/@ktruong008/absolute-imports-with-create-react-app-4338fbca7e3d
3.我們需要對(duì) create-react-app 的默認(rèn)配置進(jìn)行自定義软能，這里我們使用 react-app-rewired （一個(gè)對(duì) create-react-app 進(jìn)行自定義配置的社區(qū)解決方案）驶社。
引入 react-app-rewired 并修改 package.json 里的啟動(dòng)配置堵腹。由于新的 react-app-rewired@2.x 版本的關(guān)系，你還需要安裝
customize-cra俄周。
const {
override,
fixBabelImports,
addWebpackAlias
} = require('customize-cra')
const path = require('path')
function resolve(dir) {
return path.join(__dirname, '.', dir)
}
module.exports = override(
// 配置路徑別名
addWebpackAlias({
views: resolve('src/views'),
service: resolve('src/service'),
store: resolve('src/store'),
utils: resolve('src/utils')
}),
// antd按需加載
fixBabelImports('import', {
libraryName: 'antd',
libraryDirectory: 'es',
style: 'css'
})
)
3 react中css解決方案
1 原生CSS結(jié)合CSS處理器（Sass和PostCSS/less）：該方式樣式易于全局污染吁讨，多人協(xié)作易于發(fā)生沖突
引入less或sass ,css文件以.less或.scss結(jié)尾，然后引入
2 React中編寫CSS常見(jiàn)的方式
Inline CSS
CSS In JS
Styled Components
CSS Modules 使用CSS Modules編寫CSS峦朗，相比原生CSS是舒服多了建丧，但引用組件庫(kù)（獨(dú)立庫(kù)）就有點(diǎn)頭疼，組件庫(kù)樣式覆蓋令人頭疼
可參考這篇文章https://juejin.im/post/5b39e63ae51d4562aa017c81#heading-9
使用css module方式
css文件結(jié)尾 [name].module.scss
import header from './index.module.less';
jsx 文件 如果css命名為短橫線形式的需要使用[]
function Header() {
return (
<header className={header['App-header']}>
<div className={header['headerWrap']}>
<img src={logo} className={header['App-logo']} alt="logo" />
<div>
<Link to="/home" className={header['App-link']}>首頁(yè)</Link>
<Link to="/about" className={header['App-link']}>關(guān)于</Link>
<Link to="/login" className={header['App-link']} >登錄 </Link>
</div>
</div>
</header>
);
}
4 國(guó)際化
react-18next
5 打包 在package.json 加入"homepage": "."
6 跨域
在src/目錄下新建setupProxy.js
先安裝npm install --save-dev http-proxy-middleware
const proxy = require('http-proxy-middleware')
module.exports = function (app) {
app.use(proxy('/api/v1', {
target: 'https://cnodejs.org',
changeOrigin: true
}));
}
要寫changeOrigin: true
參考 https://github.com/chimurai/http-proxy-middleware
7 可以搭配metiara ui
8 grid 布局
這個(gè)挺好用的波势，但是兼容還是有待考慮翎朱，目前flex用的比較多
9 react中使用svg icon
1或許可以自己封裝成一個(gè)組件
2creat-react-app中有提供功能
直接導(dǎo)入svg作為React組件
import { ReactComponent as Logo } from './logo.svg';
const App = () => (
<div>
{/* Logo 是一個(gè)實(shí)際的 React 組件 */}
<Logo />
</div>
);
>3直接改變
.App-logo g{
fill:salmon;
}
.App-logo path{
stroke:palegoldenrod;
stroke-width:10px;
fill:none;
stroke-dasharray;35px 15px;
animation:orbit 1s infinite linear;
}
@keyframes orbit {to {stroke-dashoffset:50px;}}
https://www.html.cn/create-react-app/docs/adding-images-fonts-and-files/
可能涉及到的名詞 svgr react-svg-loader
可參考文章https://medium.com/@rossbulat/working-with-svgs-in-react-d09d1602a219
https://www.robinwieruch.de/react-svg-icon-components
https://medium.com/itsoktomakemistakes/react-create-react-app-svg-icons-styled-component-570b4e9f07b
webpack加載程序是SVGR提供的三個(gè)主要解決方案之一橄维，具體取決于您是希望在命令行上，在自動(dòng)腳本中操作SVG拴曲，還是在將它們導(dǎo)入模塊時(shí)：
@svgr/cli：CLI工具争舞，為我們提供了簡(jiǎn)單的命令，可以將單個(gè)文件或整個(gè)SVG文件目錄轉(zhuǎn)換為React組件.js文件
@svgr/core：此核心SVGR包旨在嵌入NodeJS程序中澈灼，以構(gòu)建用于將SVG處理為組件的自動(dòng)化工具
@svgr/webpack：最廣泛采用的解決方案竞川，以及將SVG作為React組件導(dǎo)入的優(yōu)雅方法
作為Rollup或Parcel插件：另外兩個(gè)Javascript模塊捆綁包，它們不太了解蕉汪，但支持SVGR流译。
使用前三個(gè)包裝的優(yōu)點(diǎn)是相輔相成的; 如果需要逞怨，可以在React項(xiàng)目的SVG管理工作流程中采用CLI者疤，Node API和Webpack包。
然而叠赦，我們?cè)谶@里專注于Webpack加載器驹马，我們將在本文的后面進(jìn)一步使用它來(lái)演示現(xiàn)代SVG集成的實(shí)際用例。
10 代碼分割
使用之前：
import { add } from './math';
console.log(add(16, 26));
使用之后：
import("./math").then(math => {
console.log(math.add(16, 26));
});
動(dòng)態(tài) import() 語(yǔ)法目前只是一個(gè) ECMAScript (JavaScript) 提案除秀， 而不是正式的語(yǔ)法標(biāo)準(zhǔn)糯累。預(yù)計(jì)在不遠(yuǎn)的將來(lái)就會(huì)被正式接受。
當(dāng) Webpack 解析到該語(yǔ)法時(shí)册踩，它會(huì)自動(dòng)地開(kāi)始進(jìn)行代碼分割泳姐。如果你使用 Create React App，該功能已配置好暂吉，你能立刻使用這個(gè)特性胖秒。Next.js 也已支持該特性而無(wú)需再配置。
11懶加載
React.lazy
注意:
React.lazy 和 Suspense 技術(shù)還不支持服務(wù)端渲染慕的。如果你想要在使用服務(wù)端渲染的應(yīng)用中使用阎肝，我們推薦 Loadable Components 這個(gè)庫(kù)。它有一個(gè)很棒的服務(wù)端渲染打包指南肮街。
React.lazy 函數(shù)能讓你像渲染常規(guī)組件一樣處理動(dòng)態(tài)引入（的組件）风题。
使用之前：
import OtherComponent from './OtherComponent';
function MyComponent() {
return (
<div>
<OtherComponent />
</div>
);
}
使用之后：
const OtherComponent = React.lazy(() => import('./OtherComponent'));
function MyComponent() {
return (
<div>
<OtherComponent />
</div>
);
}
這個(gè)代碼將會(huì)在渲染組件時(shí)，自動(dòng)導(dǎo)入包含 OtherComponent 組件的包嫉父。
React.lazy 接受一個(gè)函數(shù)沛硅，這個(gè)函數(shù)需要?jiǎng)討B(tài)調(diào)用 import()。它必須返回一個(gè) Promise绕辖，該 Promise 需要 resolve 一個(gè) defalut export 的 React 組件摇肌。
12命名導(dǎo)出（Named Exports）
React.lazy 目前只支持默認(rèn)導(dǎo)出（default exports）。如果你想被引入的模塊使用命名導(dǎo)出（named exports）引镊，
你可以創(chuàng)建一個(gè)中間模塊朦蕴，來(lái)重新導(dǎo)出為默認(rèn)模塊篮条。這能保證 tree shaking 不會(huì)出錯(cuò)，并且不必引入不需要的組件吩抓。
// ManyComponents.js
export const MyComponent = /* ... */;
export const MyUnusedComponent = /* ... */;
// MyComponent.js
export { MyComponent as default } from "./ManyComponents.js";
// MyApp.js
import React, { lazy } from 'react';
const MyComponent = lazy(() => import("./MyComponent.js"));
mage-webapck-loader涉茧，safari和firefox和ie都無(wú)法顯示圖片，之前不知道是插件的原因疹娶，所有各種找問(wèn)題
13Gatsby
用 React 創(chuàng)建靜態(tài)網(wǎng)站的最佳方式伴栓。它讓你能使用 React 組件，但輸出預(yù)渲染的 HTML 和 CSS 以保證最快的加載速度雨饺。
https://zh-hans.reactjs.org/docs/create-a-new-react-app.html#gatsby
14useEffect 頻繁請(qǐng)求接口
https://juejin.im/post/5c98fb35518825157172acc6#heading-0
=======================useReducer========================
1.使用useReducer 和useContext 可以替代redux和react-redux 的功能（使用useReducer和useContext Hooks構(gòu)建自己的React-Redux钳垮，性能優(yōu)化有待考慮），但這并不意味著你放棄使用redux额港，因?yàn)閞edux還有很強(qiáng)大的功能饺窿，或許你
可以根據(jù)情況選擇性的使用
2.react-redux 也提供了hook API，可以替代connect方法 移斩，useActions() 這個(gè)在alpha版本中被刪除肚医。該建議基于“binding action creators”在基于鉤子的用例中沒(méi)有用處，并且導(dǎo)致過(guò)多的概念開(kāi)銷和語(yǔ)法復(fù)雜性向瓷。
當(dāng)然你可以手動(dòng)實(shí)現(xiàn)一個(gè)肠套。
// function FriendStatusWithCounter(props) {
// const [count, setCount] = useState(0)
// useEffect(() => {
// document.title = `You clicked ${count} times`
// })
// const [isOnline, setisOnline] = useState(null)
// useEffect(() => {
// function handleStatusChange(status) {
// setisOnline(status.isOnline)
// }
// ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
// return () => {
// ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
// };
// })
// }
