摘要:自年月日首次發布以來,已經占領了互聯網。我和許多其他開發人員將他們的成功歸功于這個了不起的框架,這已經不是什么秘密了。不要驚慌,查看將它注銷掉從版本開始,默認為。彈出項目就像打開正在運行的汽車的引擎蓋,同時動態地更換引擎,使其運行速度提高。
自2013年5月29日首次發布以來,React.js已經占領了互聯網。我和許多其他開發人員將他們的成功歸功于這個了不起的框架,這已經不是什么秘密了。
想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你!
使用箭頭函數時不需要 .bind(this)通常,如果有一個受控組件時,會有如下的結構:
class Foo extends React.Component{ constructor( props ){ super( props ); this.handleClick = this.handleClick.bind(this); } handleClick(event){ // your event handling logic } render(){ return ( ); } }
可以給每個方法加上.bind(this)來解決 this 指向的問題,因為大多數教程都告訴你這樣做。如果你有幾個受控組件,那么constructor(){}中就會有一大堆代碼。
相反,你可以這樣做:class Foo extends React.Component{ handleClick = (event) => { // your event handling logic } render(){ return ( ); } }
ES6 的箭頭函數使用詞法作用域,它允許方法訪問 this 觸發的地方。
當 service worker 與你的代碼沖突時Service workers 非常適合漸進式Web應用程序,它允許離線訪問并優化互聯網連接較差的用戶。
但是當你不知道服務工作者正在緩存靜態文件時,你會反復上傳熱修復程序, 卻發現你的網站一直沒有更新。
不要驚慌,查看 src/index.js:
// 將它注銷掉 serviceWorker.unregister();
從16.8版本開始,默認為 serverWorker.unregister()。
但如果你想改變它的狀態,你就知道在哪里改了。
99% 的情況下你不需要運行 eject 命令Create React APP 提供了一個選項 yarn eject,可以彈出項目來定制構建過程。
我記得曾嘗試自定義構建過程,使SVG圖像自動內聯到代碼中。 我花了幾個小時試圖了解構建過程。最后,我們得到了一個導入文件,該文件注入 SVG 標記,我們將網站的加載速度提高了0.0001毫秒。
彈出 React 項目就像打開正在運行的汽車的引擎蓋,同時動態地更換引擎,使其運行速度提高1%。
當然,如果你已經是一個 Webpack 高手,那么定制構建過程來定制項目的需求是值得的。
當你想按時完成任務時,把精力集中在它能推動你前進的地方。
ESlint Auto 保存自動格式化可節省大量時間你可能已經從某些沒有格式化的地方復制了一些代碼。因為你無法忍受它看起來有多丑,你花時間手動添加空格。
使用 ESLint 和 Visual Studio 代碼插件,它可以在保存時為你格式化它。
要怎么設置1.在你的 package.json 中,添加一些dev依賴項并執行 npm i或yarn:
"devDependencies": { "eslint-config-airbnb": "^17.1.0", "eslint-config-prettier": "^3.1.0", "eslint-plugin-import": "^2.14.0", "eslint-plugin-jsx-a11y": "^6.1.1", "eslint-plugin-prettier": "^3.0.0", "eslint-plugin-react": "^7.11.0" }
2.安裝 ESLint 插件
3.啟動 Auto Fix On Save
你不需要Redux、styled-components 等等每種工具都有其目的。也就是說,了解不同的工具是件好事。
如果你手上只有一把錘子,那么所有的東西看起來都像釘子
你需要考慮使用的一些庫的設置時間,并將其與之進行比較。
我要解決的問題是什么
這個項目能長久地受益于這個庫嗎
React是否已經提供了一些現成的東西
現在可以使用 React 的 Context 和 Hook,你還需要Redux嗎?
當你的用戶處于糟糕的互聯網連接環境時,我強烈建議使用 Redux Offline。
使用事件處理程序如果您不想反復輸入相同的內容,可以選擇重用事件處理程序:
class App extends Component { constructor(props) { super(props); this.state = { foo: "", bar: "", }; } // Reusable for all inputs onChange = e => { const { target: { value, name }, } = e; // name will be the state name this.setState({ [name]: value }); }; render() { return (setState是異步的); } }
天真的我會寫一些像如下的代碼:
constructor(props) { super(props); this.state = { isFiltered: false }; } toggleFilter = () => { this.setState({ isFiltered: !this.state.isFiltered }); this.filterData(); }; filterData = () => { // this.state.isFiltered 應該是 true,但事實并非如此,因為 setState 是異步的 // isFiltered還沒有改變 if (this.state.isFiltered) { // Do some filtering } };正確做法一:將狀態傳遞下去
toggleFilter = () => { const currentFilterState = !this.state.isFiltered; this.setState({ isFiltered: currentFilterState }); this.filterData(currentFilterState); }; filterData = (currentFilterState) => { if (currentFilterState) { // Do some filtering } };正確做法二:使用 setState 回調函數
toggleFilter = () => { this.setState((prevState) => ({ isFiltered: !prevState.isFiltered }), () => { this.filterData(); }); }; filterData = () => { if (this.state.isFiltered) { // Do some filtering } };總結
這些技巧為我節省了很多時間,我相信還有更多。請在評論區與我們分享。
你的點贊是我持續分享好東西的動力,歡迎點贊!
交流干貨系列文章匯總如下,覺得不錯點個Star,歡迎 加群 互相學習。
https://github.com/qq44924588...
我是小智,公眾號「大遷世界」作者,對前端技術保持學習愛好者。我會經常分享自己所學所看的干貨,在進階的路上,共勉!
關注公眾號,后臺回復福利,即可看到福利,你懂的。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/109703.html
摘要:在這篇文章中,分享了他如何克服恐懼并開始使用源代碼來提高他的知識和技能。不久之后,你正在閱讀的源代碼將引導您進入規范。 通過閱讀源碼來提高js知識 原文傳送門:《Improve Your JavaScript Knowledge By Reading Source Code》 showImg(https://segmentfault.com/img/remote/14600000197...
摘要:接下來,我會檢查每個頁面以確保它使用有用的標簽,包括標題標簽。這個問題讓面試官有機會了解潛在員工對工作難以勝任的部分。面試官可能需要考慮這種弱點對團隊的影響。面試官可能會發現自己公司的計劃與未來員工的職業目標是否保持一致。 翻譯:瘋狂的技術宅原文:https://www.indeed.com/hire/i... 本文首發微信公眾號:jingchengyideng歡迎關注,每天都給你...
摘要:昨天在我在國外網站上看到一篇文章,作者分享了他自學編程個月后找到工作的經歷。而本文中,我主要針對想要通過學習編程找工作的角度來談。我在年月犯了一個錯誤我認為首要任務是找到一份前端開發的工作。 昨天在我在國外網站 reddit 上看到一篇文章,作者分享了他 自學編程 9 個月后找到工作 的經歷。文章不到一天就得到3千多贊,2百條回復。我看了下內容,非常中肯,其中有不少建議也是我在編程教室...
閱讀 3035·2023-04-26 03:01
閱讀 3538·2023-04-25 19:54
閱讀 1592·2021-11-24 09:39
閱讀 1374·2021-11-19 09:40
閱讀 4250·2021-10-14 09:43
閱讀 2062·2019-08-30 15:56
閱讀 1490·2019-08-30 13:52
閱讀 1660·2019-08-29 13:05