做前端的一定都知道現在是三大框架-Vue、React、Angular三足鼎立的時代。 Vue是公認的最容易入門的,因為它文件結構上有傳統的HTML的影子,讓剛接觸它的前端人員剛到很「親切」。 Angular雖然也有保留HTML,但它卻是最難入門的,究其原因可能和他是由Google的後端程式設計師開發的,又是用的純Typescript,異步使用Rxjs,對於前端新人來說門檻太高。 React入門難度適中,網路上各種言論說React上手比Vue難,可能難就難在不能深刻理解JSX,或者對ES6的一些特性理解得不夠深刻,導致覺得有些點難以理解,然後說React比較難上手。今天就來整理一些React入門需要掌握哪些知識點。
為什麼要引入React
#在寫React 的時候,你可能會寫類似這樣的程式碼:
import React from 'react' function A() { // ...other code return <h1>前端桃园</h1> }
你一定有疑惑過,上面的程式碼都沒有用到React,為什麼要引入React 呢?
如果你把import React from 'react' 刪掉,還會報下面這樣的錯誤:
function A() { // ...other code return React.createElement("h1", null, "前端桃园"); }因為從本質上講,JSX只是React.createElement(component, props, ...children)函式提供的語法糖。
為什麼要用className 而不用class
1.React 一開始的概念是想與瀏覽器的DOM API 保持一致而不是HTML,因為JSX 是JS的擴展,而不是用來代替HTML 的,這樣會和元素的創建更為接近。在元素上設定class需要使用className這個 API:const element = document.createElement("p") element.className = "hello"2.瀏覽器問題,ES5 之前,在物件中不能使用保留字。以下程式碼在IE8 將會拋出錯誤:
const element = { attributes: { class: "hello" } }3.解構問題,當你在解構屬性的時候,如果分配一個class變數會出問題:
const { class } = { class: 'foo' } // Uncaught SyntaxError: Unexpected token } const { className } = { className: 'foo' } const { class: className } = { class: 'foo' }
#為什麼屬性要用小駝峰
因為JSX 語法上更接近JavaScript 而不是HTML,所以React DOM 使用camelCase(小駝峰命名)來定義屬性的名稱,而不是使用HTML 屬性名稱的命名約定。為什麼constructor 裡要呼叫super 和傳遞props
class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } render() { return ( <p> </p><h1>Hello, world!</h1> <h2>It is {this.state.date.toLocaleTimeString()}.</h2> ); } }而且有這麼一段話,不只讓我們呼叫super 還要把props 傳遞進去,但沒有告訴我們為什麼要這麼做。
為什麼要呼叫super?
其實這不是React 的限制,這是JavaScript 的限制,在建構函式裡如果要呼叫this,那麼提前就要調用super。在 React 裡,我們常常會在建構函式裡初始化 state,this.state = xxx ,所以需要呼叫 super。為什麼要傳遞props?
你可能以為必須給super 傳入props,否則React.Component 就無法初始化this.props:class Component { constructor(props) { this.props = props; // ... } }不過,如果你不小心漏傳了props,直接呼叫了super(),你還是可以在render 和其他方法中存取this.props(不信的話可以試試看)。 為啥這樣也行?因為React 會在建構函式被呼叫之後,會把props 賦值給剛剛建立的實例物件:
const instance = new YourComponent(props); instance.props = props;但這表示你在使用React 時,可以用super() 來取代super(props) 了麼? 那還是不行的,不然官網也不會建議你呼叫props 了,雖然React 會在建構函式運行之後,為this.props 賦值,但在super() 呼叫之後與建構函式結束之前, this.props 仍然是沒用的。 // Inside React class Component { constructor(props) { this.props = props; // ... } } // Inside your code class Button extends React.Component { constructor(props) { super(); //
以上是React入門知識點整理的詳細內容。更多資訊請關注PHP中文網其他相關文章!