React 總結初稿一

sunseekers發表於2019-03-03
React

18 年轉眼即逝，不同尋常的一樣。這一年我畢業了，入坑前端。工作只用 vue ，自己又學了 react , TypeScript ,小程式，這些在工作中從未用到過。會一個框架沒有用，會幾個框架也沒有用，能夠在不同的業務解決不同的問題才是精華所在。我們最終都是要歸根於公司的，公司用什麼我們學什麼，入職這家公司用這個我們學這個，入職那家公司我們學那個。工作需要什麼我們學什麼，框架說到底都是庫，死磕文件就好了（大佬說的），道理是這樣的。

但是為什麼我還是要去學那麼多呢？我剛剛畢業，學習是最主要的。但缺乏在工作中的使用，有些東西學了很快就忘記了，學我也只是學到了一點皮毛，一些語法，無濟於事，我是不是多此一舉呢？我也曾經這樣懷疑過自己，我也很無奈。腦海裡迴盪起領導說的一句話：我們在這家公司工作是為了下家工作做準備的，學到東西是重點，不要認為沒有用（領導是 java，曾教我Linux系統簡單命令）。技多不壓身，閒著也是閒著，學點東西以後扯皮用，說不準哪天工作需要或者說換家公司換技術棧了，面對各種情況都能夠快速入手，因為曾經學習過，因為隨時準備著，不慌。

JSX

react 推薦使用的是 JSX 語法；通過 react 編譯他會把JSX 解析成 JavaScript 表示式

簡單語法

const name = `Josh Perez`
const element = <h1> Hello {name} </h1>
複製程式碼

把元素標籤拿出來，寫成常量，標籤內還可以接受變數，如上所示例子；既然他是 JavaScript 表示式，那麼就可以在 if 或者 for 迴圈中使用了

function GetGreeting(user) {
  if (user) {
    return <h1> hello world </h1>
  }eles {
    return <h1>hello sunseekers</h1>
  }
}
複製程式碼

JSX 是把元素標籤賦值給一個常量，那麼元素標籤應該有的屬性他都存在，就和我們平時使用元素一樣；

const element = <div tabIndex = `0`></div>
const img = <img src={https://reactjs.org/docs/introducing-jsx.html}/>
複製程式碼

元件名稱總是大寫字母開始，為了區分元件和 DOM 標籤
我自己簡單粗暴的理解 JSX 就是用 js 的形式把 html 搬移過來，擁有 javaScript 和 html 原來所擁有的，然後 react 幫助你去解析
在專案中的使用

React 總結初稿一
React 總結初稿一

react 裡面大量使用 ES6 的語法書寫，如果你 ES6 不太熟悉，我建議你去了解一下。對於 ES6 的相關知識一筆帶過。

既然我們瞭解了 JSX 的簡單語法，那麼在專案中如何使用呢？

元件

首先宣告一點在 react 裡面分為有狀態元件（有 class 的）和無狀態元件或者說函式式元件（有 function ）

無狀態元件 ( 函式式元件 )

function Welcome(props) {//定義資料來自父元件傳遞
  return <h1> Hello {props.name} </h1>
}
複製程式碼

有狀態元件

class Welcome extends React.Component {
  construction(props){//建構函式優於任何函式，會被自動執行的函式，所有class都有的函式
    super(props)//呼叫父類
    this.state = {//定義資料需要把資料放在狀態裡面（this.state就是這個元件的狀態）
      name: `sunseekers`
    }
  }
  render() { //當元件的state或者props（因為props的值來自state）發生改變的時候，render函式就會重新執行
    return <h1>hello, {this.state.name}</h1>
  }
}
複製程式碼

有狀態元件和無狀態元件的區別：

無狀態元件裡面沒有內建 react 的生命週期函式更加純粹，輕便相對而言效能會更好。

有狀態元件繼承 react.Component ，它預設內建了一些生命週期函式（唯獨沒有內建render生命週期函式函式）所以我們要在寫元件的時候一定要寫這個生命週期函式否則會報錯。

具體需求具體使用，一般情況當我們的元件裡面沒有複雜邏輯，資料傳遞我們可以嘗試使用，當一個元件只有 render() 生命週期的時候，我們完全可以用一個無狀態元件來替換。下面是無狀態元件和有狀態元件

React 總結初稿一
React 總結初稿一

生命週期函式是指在某一時刻元件會自動呼叫執行的函式

State

React 很靈活，但是它有一條嚴格的規則 reducer() 生命週期函式( 或者說 react 元件 ) 必須是純函式（純函式，給固定的輸入，就一定會有固定的輸出，而且不會有任何副作用，不允許修改自身的 props ，在案例中我們要修改資料都藉助 state 狀態

React 總結初稿一
React 總結初稿一

state 裡面的資料我們不能直接修改，直接修改並不會重新渲染一個元件，我們需要藉助 setState() ( 狀態更新是非同步的，解決這個問題我們常常在 setState 裡面呼叫函式，函式接受兩個引數，一個是更新前的一個是更新後的；不建議 setState 裡面使用物件的形式,所以我就沒有舉例 )

細心的朋友一定發現了，在案例中我們使用了迴圈渲染。通過使用陣列的 map，在 react 裡面可以使用條件渲染，迴圈渲染。react 中一個 {} 表示是一個 js 表示式，{{}}這種，外層表示 js 表示式，內層是 js 物件；

React 總結初稿一

條件渲染也很簡單，就和我們平常寫js一樣

React 總結初稿一

if 案例

在vue中，表單的繫結實時渲染是作者幫我們封裝好了，我們直接使用就好v-model，但是在react中，需要我們自己去寫。自己寫也是很簡單的，在上面的例子裡面我們已經寫過了，不相信可以翻上去看看，哈哈

父元件給子元件傳遞資料是單項的，通過props ,如果子元件要修改父元件的資料，只能通過子元件觸發父元件的方法在父元件裡面修改，子元件是不能直接修改的，在 vue 和 react裡面都是一樣的，只是語法不一樣。上面有一個例子講到了，還特意解釋了一下想知道翻上去看一看

react 簡單的就到這裡，路由呀，中介軟體呀，等我學到那裡在來說吧。我是初學者請多多指教，有什麼寫的不對或者不好的歡迎評論指出。案例DEMO

相關文章