做前端的一定都知道現在是三大框架－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, "前端桃园");
}為什麼要用className 而不用class
1.React 一開始的概念是想與瀏覽器的DOM API 保持一致而不是HTML，因為JSX 是JS的擴展，而不是用來代替HTML 的，這樣會和元素的創建更為接近。在元素上設定class需要使用className這個 API：const element = document.createElement("p")
element.className = "hello"const element = {
attributes: {
class: "hello"
}
}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?
其實這不是React 的限制，這是JavaScript 的限制，在建構函式裡如果要呼叫this，那麼提前就要調用super。在 React 裡，我們常常會在建構函式裡初始化 state，this.state = xxx ，所以需要呼叫 super。為什麼要傳遞props?
你可能以為必須給super 傳入props，否則React.Component 就無法初始化this.props：class Component {
constructor(props) {
this.props = props;
// ...
}
}const instance = new YourComponent(props); instance.props = props;
以上是React入門知識點整理的詳細內容。更多資訊請關注PHP中文網其他相關文章！
