React入門知識點清單
做前端的一定都知道現在是三大框架——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'
刪掉,還會報下面這樣的錯誤:
那麼究竟是哪裡用到了這個 React,導致我們引入 React 會報錯呢,不懂這個原因,那麼就是 JSX 沒有搞得太明白。
你可以講上面的程式碼(忽略匯入語句)放到 線上 babel 裡進行轉化一下,發現 babel 會把上面的程式碼轉化成:
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("div")
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 屬性名稱的命名約定。
參考:JSX 簡介
為什麼 constructor 裡要呼叫 super 和傳遞 props
class Clock extends React.Component {
constructor(props) {
super(props);
this.state = {date: new Date()};
}
render() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {this.state.date.toLocaleTimeString()}.</h2>
</div>
);
}
}
而且有這麼一段話,不僅讓我們呼叫 super 還要把 props 傳遞進去,但是沒有告訴我們為什麼要這麼做。
為什麼要呼叫 super?
其實這不是 React 的限制,這是 JavaScript 的限制,在建構函式裡如果要呼叫 this,那麼提前就要呼叫 super。在 React 裡,我們常常會在建構函式裡初始化 state,this.state = xxx ,所以需要呼叫 super。詳情見:Class 的繼承 - ECMAScript 6入門
為什麼要傳遞 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(); //