摘要:我們常常會收到一些有趣的問題,但大多數問題都是常見問題。我創建這個資源為了幫助學習者遇到這些常見的問題時提供一定幫助。這些是表示沒有任何子節點的元素的標記。不綁定處理程序方法我把這個留到最后,因為這是一個大問題,一個很常見的問題。
在 jsComplete,我們管理一個專門用于幫助編程學習者 slack 帳戶。我們常常會收到一些有趣的問題,但大多數問題都是常見問題。 我創建這個資源為了幫助 React.js學習者遇到這些常見的問題時提供一定幫助。在這里可以快速找到一些常見問題的解決方案,而不是一,遍又一遍去找解決方法,我會持續更新這些常見的問題。
想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你!
1. 組件的名稱開頭要大寫React 組件名稱必須具有以大寫字母開頭。
如果組件名稱不以大寫字母開頭,則組件使用將被視為內置元素,例如 div 或 span。
例如:
</>復制代碼
class greeting extends React.Component {
// ...
}
如果嘗試渲染
</>復制代碼
Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
這里更大的問題是把組件命名為 button 或 img。 React 會忽略你的組件,只是渲染一個普通 HTML button 或 img 標簽。
注意上面沒有渲染 “My Awesome Button” 和 React 剛剛呈現的空 HTML 按鈕元素。 在這種情況下,React 不會警告你。
2.使用單引號而不是反引號用反引號(`…`)創建的字符串與用單引號("…")創建的字符串不同。
在大多數鍵盤上,可以使用 tab 鍵上方的鍵來輸入用反引號( ` )字符。
當需要在字符串中包含動態表達式時,使用反引號創建一個字符串(不需要使用字符串連接)。
</>復制代碼
`This is a string template literal that can include expressions`
"This is just a string, you cannot include expressions here"
假設你想要一個始終報告當前時間的字符串:
“Time is ...”
</>復制代碼
// Current time string
const time = new Date().toLocaleTimeString();
// 使用普通字符串(單引號或雙引號)時,需要使用字符串連接:
"Time is " + time
// 在使用反引號時,可以使用 ${} 在字符串中注入時間
`Time is ${time}`
此外,反引號還聲明一個字符串時,可以創建一個跨多行的字符串:
</>復制代碼
const template = `I
CAN
SPAN
Multiple Lines`;
常規字符串不能這樣做。
3. 使用 React.PropTypesPropTypes 對象已從 React 中刪除。 其過去是以 React.PropTypes 的形式被使用,但不能再使用它了。
相應的,你需要:
npm install prop-types
import PropTypes from "prop-types"
然后就可以使用它啦,如: PropTypes.string 。
如果你錯誤地使用了 React.PropTypes,會得到這樣的錯誤提示:
</>復制代碼
TypeError: Cannot read property "string" of undefined
4. 沒有使用指南里指定的版本
在看或閱讀有關代碼的內容以及使用指南里的例子時,確保你使用的庫版本與例子的里的版本是一致的。一般使用最新版本是沒有問題,但是如果內容過時,你可能會遇到一些棄用問題。
為了安全起見,請使用主干版本。 例如,如果教程里使用的是 React 16,自己就不要使用 React 15 進行開發了。
這對 Node.js 也很重要。如果使用舊版本的 Node,會遇到一系列問題。 例如,如果你正在看一些教程,這些教程使用了 Object.values,而你現在用 Node 6.x,那個版本此方法是不存在的。 你需要 Node 7.x 或更高版本。
5. 令人困惑的函數與類你能看出下面的代碼有什么問題嗎?
</>復制代碼
class Numbers extends React.Component {
const arrayOfNumbers = _.range(1, 10);
// ...
}
上面的代碼是無效的,因為在 JavaScript 類的內部,不能隨意定義變量,只能使用規定的語法定義方法和屬性。
這有點令人困惑,因為類語法中使用的{}看起來像塊級作用域,但它并不是。
在一個由函數構成的組件里,你就可以想怎么搞就怎么搞:
</>復制代碼
// Totally Okay:
const Number = (props) => {
const arrayOfNumbers = _.range(1, 10);
// ...
};
6. 將數字作為字符串傳遞
你可以通過 prop 屬性傳遞一個字符串:
</>復制代碼
如果需要傳遞一個數值,不要使用字符串:
</>復制代碼
// 不要這樣做
相反,使用花括號傳遞一個實際的數值:
</>復制代碼
在 Greeting 組件中使用 {7},this.props.counter 就被賦值為數字 7 ,并且可以對其進行數學運算。 如果將其作為“7”傳遞,然后將其視為數字,則可能會遇到意外結果。
7. 忘記了另外一個 app 在用同樣的端口要運行 web 服務器,需要使用主機(如 127.0.0.1 )和端口(如 8080)使服務器偵聽有效 http 地址上的請求。
一旦成功運行,web 服務器就占據了那個端口,你就不能讓這個端口它用,端口會被占用。
如果你嘗試在另一個終端上運行相同的服務器,將會得到端口被占用的錯誤提示,如下:
</>復制代碼
Error: listen EADDRINUSE 127.0.0.1:8080
請注意,有時 Web 服務器可能在后臺運行或在分離的屏幕/tmux 會話中運行。你看不到,但它仍然占據了端口。 要重新啟動服務器,需要“殺死”仍在運行的服務器。
要識別使用某個端口的進程,可以使用 ps 之類的命令(以及關于應用程序的grep),或者如果你知道端口號,則可以使用 lsof 命令:
</>復制代碼
lsof -i :8080
8. 忘記創建環境變量
有些項目依賴于 shell 環境變量的存在才能啟動。 如果在沒有所需環境變量的情況下運行這些項目,它們將嘗試為它們使用未定義的值,并可能會給你一些神秘的錯誤。
例如,如果項目連接到像 MongoDB 這樣的數據庫,則可能會使用像 process.env.MONGO_URI這樣的環境變量來連接它。 這允許項目與不同環境中的不同MongoDB 實例一起使用。
要在本地運行連接到 MongoDB 的項目,首先必須導出 MONGO_URI 環境變量。 例如,如果你在端口 27017 上運行本地 MongoDB,則需要在運行項目之前執行此操作:
</>復制代碼
export MONGO_URI="mongodb://localhost:27017/mydb"
你可以 grep 項目源代碼,找到 process.env 來查清楚其運行正常所需要的環境變量。
9. 把花括號{}和圓括號()搞混不要用:
</>復制代碼
return {
something();
};
這樣用:
</>復制代碼
return (
something();
);
第一個將嘗試(并且會失敗)返回一個對象,而第二個將正確調用 something() 函數并返回該函數返回的內容。
因為 JSX 中的任何
這個問題在箭頭函數的縮寫語法中也很常見。
不要用:
</>復制代碼
const Greeting = () => {
Hello World
};
這樣用:
</>復制代碼
const Greeting = () => (
Hello World
);
當你使用帶有箭頭函數的中括號時,你就新起了一個函數的作用域。箭頭函數的縮寫語法不用中括號。
10. 不使用圓括號包裝對象當你想要創建一個返回普通對象的箭頭函數時,上面的花括號和圓括號問題也會讓你感到困惑。
不要用:
</>復制代碼
const myAction = () => { type: "DO_THIS" };
這樣用:
</>復制代碼
const myAction = () => ({ type: "DO_THIS"});
如果沒有把對象包裹在圓括號里,你就不能使用縮寫語法。實際上你會給字符串定義一個標簽。
這在 setState 方法的 updater 函數中很常見,因為它需要返回一個對象。 如果要使用箭頭函數語法,則需要用括號包裝該對象。
不要用:
</>復制代碼
this.setState(prevState => { answer: 42 });
這樣用:
</>復制代碼
this.setState(prevState => ({ answer: 42 }));
11. 沒有正確使用API元素和屬性的大小寫
使用 React.Component,而不是 React.component。 使用 componentDidMount,而不是 ComponentDidMount。使用 ReactDOM,而不是ReactDom。
請注意需要的 API 大小寫。 如果使用不正確的大小寫,得到的錯誤信息可能不會很明確。
從 react 和 react-dom 導入時,確保引入正確的名稱,并且使用的內容與引入完全相同,ESLint 可以幫助你指出未使用的內容。
在處理組件屬性時也會遇到這種問題:
</>復制代碼
// 在組件內部,你需要使用 props.userName 來獲取傳入的值
如果你沒有使用 props.userName,而是 props.username 或 props.UserName,你會相當于用了一個 undefined 的值。需要特別留意下這點,當然更好的是配置 ESLint,它也能指出這些問題。
12. 將 state 對象與實例屬性搞混在類組件中,可以定義本地 state 對象,然后使用 this 訪問它:
</>復制代碼
class Greeting extends React.Component {
state = {
name: "World",
};
render() {
return `Hello ${this.state.name}`;
}
}
以上代碼會輸出 “Hello World”。
除 state 之外,你還可以定義其它本地實例屬性。
</>復制代碼
class Greeting extends React.Component {
user = {
name: "World",
};
render() {
return `Hello ${this.user.name}`;
}
}
以上代碼也會輸出 “Hello World”。
state 實例屬性是一個特殊屬性,因為 React 會管理它。 你只能通過 setState 更改它,當你這樣做時 React 會做出響應。
然而,定義的所有其他實例屬性對渲染算法沒有影響。 你可以根據需要在上面的示例中更改this.user,并且 React 不會在React中觸發渲染機制。
13. 將在閉合標簽里放錯 / 字符。不可否認,有時你可以使用
在 HTML 中,有一種稱為“自閉合標簽”(AKA void tag)。這些是表示沒有任何子節點的元素的標記。例如,img 標簽是一個自閉合標簽:
</>復制代碼
// 不必使用
以下方式是非法的:
</>復制代碼
// 錯誤
如果放錯放了 / 字符的位置,將收到如下錯誤:
</>復制代碼
Syntax error: Unterminated JSX contents
14. 假設 import/export 起作用
import/export 特性是 JavaScript 中的官方功能(自2015年起)。 其只是 ES2015 的特性,并且還沒有在流行瀏覽器和最新版 Node 里面被完整支持。
React 項目的流行配置使用 Webpack 和 Babel。 兩者都允許使用此特性并將其編譯為所有瀏覽器都能理解的內容。 只有工作流中有 Webpack 或 Babel 之類的轉譯工具,才能使用 import/export。
但是,在 React 打包應用程序中 import/export 不意味著可以隨意使用它們! 例如,如果你還通過最新的 Node 進行服務器端渲染,會行不通,你很可能會收到“unexpected token” 錯誤。
要讓 Node 理解 import/export(如果你在前端使用它們就是你需要了解它們,并且也想要做 SSR 渲染的話),你需要有可以編譯其的 Babel preset(像是_env_ preset),才能在Node 端運行。 你可以在開發時使用像 pm2_、 _nodemon 和 _babel-watch_的工具做到這點,,并在每次更改內容時重新啟動 Node。
15. 不綁定處理程序方法我把這個留到最后,因為這是一個大問題,一個很常見的問題。
你可以在 React 組件中定義類方法,然后在組件的 render 方法中使用它們。 例如:
</>復制代碼
class Greeting extends React.Component {
whoIsThis() {
console.dir(this); // "this" is the caller of whoIsThis
return "World";
}
render() {
return `Hello ${this.whoIsThis()}`;
}
}
ReactDOM.render(, mountNode);
我在 render 里以 this.whoIsThis 的方式調用 whoIsThis 方法,因為在 render中,this 關鍵字指的是與表示組件的 DOM 元素關聯的組件實例。
內部 React 確保其類方法中的 “this” 指向實例。 但是,當你使用 whoIsThis 方法的引用時,JavaScript 不會自動綁定實例。
whoIsThis 方法中的 console.dir 可以正確告訴我們當前組件實例,因為該方法是使用顯式調用方(this)直接從 render 方法調用的。 執行上面的代碼時,在控制臺中看到Greeting 對象:
然而,當在延遲執行通道,例如事件處理里執行同樣方法時,調用對象將不再是顯性的,console.dir 也不會打印當前組件實例。
在上面的代碼中,當單擊字符串時,React 會調用 whoIsThis 方法,但它不會讓你訪問組件實例。 這就是我們點擊字符串時得到 undefined 的原因。 如果類方法需要訪問像this.props 和 this.state 這樣的屬性,這會是一個問題,因為它根本行不通。
對于這個問題有很多解決方案。可以將方法包裝在內聯函數中,或使用 .bind 來改變 this 指向。 對于不經常更新的組件,兩者都可以。
還可以通過在類的構造函數中而不是在 render 方法中執行來優化 bind 方法。 但是,此方法的最佳解決方案是通過 Babel 來使用 ECMAScript 類字段我(目前還是stage-3),這樣對于處理程序只需使用箭頭函數就可以了:
</>復制代碼
class Greeting extends React.Component {
whoIsThis = () => {
console.dir(this);
}
render() {
return (
Hello World
);
}
}
這樣會和預期一樣執行:
代碼部署后可能存在的BUG沒法實時知道,事后為了解決這些BUG,花了大量的時間進行log 調試,這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。
原文:
https://edgecoders.com/react-...
你的點贊是我持續分享好東西的動力,歡迎點贊!
歡迎加入前端大家庭,里面會經常分享一些技術資源。文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/101659.html
摘要:因為工作中一直在使用,也一直以來想總結一下自己關于的一些知識經驗。于是把一些想法慢慢整理書寫下來,做成一本開源免費專業簡單的入門級別的小書,提供給社區。本書的后續可能會做成視頻版本,敬請期待。本作品采用署名禁止演繹國際許可協議進行許可 React.js 小書 本文作者:胡子大哈本文原文:React.js 小書 轉載請注明出處,保留原文鏈接以及作者信息 在線閱讀:http://huzi...
摘要:零基礎學了快兩個月的了,所謂的基礎是指完全不懂,,還有任何相關概念,等等。這里說服務器渲染,是誤打誤撞了,我剛只是想把換掉而已。由負責將翻譯成對應的文件順帶解決了語法問題。 零基礎學了快兩個月的React了(React-native + React.js),所謂的000基礎是指完全不懂JS,CSS,HTML5還有任何相關概念Dom,Server rendering等等。PS:這里說服務...
摘要:在不需要手動調用瀏覽器原生的進行事件監聽。沒有經過特殊處理的話,這些的事件監聽只能用在普通的的標簽上,而不能用在組件標簽上。的事件監聽方法需要手動到當前實例,這種模式在中非常常用。下一節中我們將介紹小書組件的和。 React.js 小書 Lesson9 - 事件監聽 本文作者:胡子大哈本文原文:http://huziketang.com/books/react/lesson9 轉載請...
摘要:譯者按最近依舊如火如荼相信大家都躍躍欲試我們團隊也開始在領域有所嘗試年應該是逐漸走向成熟的一年讓我們一起來看看國外的開發者們都總結了哪些最佳實踐年在全世界都有很多關于新的更新和開發者大會的討論關于去年的重要事件請參考那么年最有趣的問題來了我 譯者按:最近React(web/native)依舊如火如荼,相信大家都躍躍欲試,我們團隊也開始在React領域有所嘗試. 2016年應該是Reac...
摘要:,谷歌給的一份性能指南和最佳實踐。目前而言,前端社區有三大框架和。隨后重點講述了和兩大前端框架,給出了大量的文章教程和相關資源列表。我認為,使用函數式編程方式,更加符合后端程序員的思路,而是更符合前端工程師習慣的框架。 showImg(https://segmentfault.com/img/bVbjQAM?w=1142&h=640); 這個是我訂閱 陳皓老師在極客上的專欄《左耳聽風》...
摘要:,谷歌給的一份性能指南和最佳實踐。目前而言,前端社區有三大框架和。隨后重點講述了和兩大前端框架,給出了大量的文章教程和相關資源列表。我認為,使用函數式編程方式,更加符合后端程序員的思路,而是更符合前端工程師習慣的框架。 showImg(https://segmentfault.com/img/bVbjQAM?w=1142&h=640); 這個是我訂閱 陳皓老師在極客上的專欄《左耳聽風》...
閱讀 545·2021-08-31 09:45
閱讀 1652·2021-08-11 11:19
閱讀 889·2019-08-30 15:55
閱讀 828·2019-08-30 10:52
閱讀 2852·2019-08-29 13:11
閱讀 2932·2019-08-23 17:08
閱讀 2840·2019-08-23 15:11
閱讀 3071·2019-08-23 14:33
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要