學和使用react有一年多了，最近想在梳理一下react基礎知識,夯實基礎，激流勇進~
關于reacr-router,redux,redux-saga后續(xù)都會慢慢輸出，希望各位看官老爺持續(xù)關注~~要是能給個贊鼓勵一下就更贊了~

提醒一下：

看完之后抓緊時間趁熱打鐵，redux,react-redux,redux-saga

react基礎知識速覽

1、什么是JSX？

一個JSX語法的示例，如下所示

const element = <h1>Hello, world!</h1>;

這種語法形式，既不是HTML，也不是字符串，而是稱之為JSX，是React里用來描述UI和樣式的語法，JSX最終會被編譯為合法的JS語句調用（編譯器在遇到{時采用JS語法進行解析，遇到<就采用HTML規(guī)則進行解析）

2、嵌入表達式

JSX中，可以使用花括號{}嵌入任意的JavaScript合法表達式，如：2 + 2、user.firstName、formatName(user)都是合法的。示例如：

const user = { firstName: 'Zhang', lastName : 'Busong'};const elem = ( <h1>Hello, {formatName(user)}</h1>);/*這里的()，實際上是可選的，但是React推薦加入()，這樣子就會被視為一個表達式，而不會導致自動插入分號的問題*/ReactDOM.render( element, document.getElementById('app'))

3、JSX也是一種表達式

JSX本身也是一種表達式，所以它可以像其他表達式一樣，用于給一個變量賦值、作為函數(shù)實參、作為函數(shù)返回值，等等。如：

function getGreeting(user) { if (user) {  return <h1>Hello, {formatName(user)}</h1> } return <h1>Hello, Guest!</h1>;}

注意：

1、在JSX中，聲明屬性時不要使用引號，如果聲明屬性的時候使用引號，那么將被作為字符串解析，而不會被作為一個表達式解析，如：

<div firstName="{user.firstName}" lastName={user.lastName}></div>

解析后，可以得到：

<div firstName="{user.firstName}" lastName="Lau"></div>

因此，當我們需要使用一個字符串字面量的時候，可以使用引號，但是如果要作為表達式解析的時候，則不應當使用引號

2、在JSX中，有些屬性名稱需要進行特殊處理。如class應該用className代替，tabindex則用tabIndex代替。這是因為JSX本質上更接近于JavaScript，而class是JavaScript中的保留字。同時，應該使用camelCase來命名一個屬性，而不是使用HTML的屬性命名方式

3、JSX本身已經(jīng)做了防注入處理，對于那些不是明確編寫的HTML代碼，是不會被解析為HTML DOM的，ReactDOM會將他們一律視為字符串，在渲染完成前就轉化為字符串，所以可以防止XSS攻擊