React-1

課程內容

React 是什麼？

一個用於構建使用者介面的 JavaScript 庫

指令式程式設計 和 宣告式程式設計

• 告訴計算機怎麼做（How） - 過程
• 告訴計算機我們要什麼（What） - 結果

如何使用 React

基於瀏覽器的模式

• 引入React.js-提供 React.js 核心功能程式碼，如：虛擬 dom
  • React.createElement(type,props,children);
• 引入ReactDOM-提供了與瀏覽器互動的 DOM 功能，如：dom 渲染
  • ReactDOM.render(Vnode, container[, callback])
    • Vnode：要渲染的內容
    • container：掛載點
    • callback：渲染後的回撥函式
• 虛擬Dom與真實Dom區別
  • 真實DOM消耗效能，虛擬DOM區域性更新 優化效能

babel

babel-standalone.js：在瀏覽器中處理 JSX
https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js

JSX

JSX是基於 JavaScript + XML 的語法糖，需要引入Babel
- 它可以作為值使用
- 它並不是字串，也不是HTML（- className， - style
- 有且只有一個頂層元素 - React.Fragment
- 列表渲染時，必須有 key 值
- 元件的首字母一定大寫，標籤一定要小寫

基於自動化的整合環境模式 - create-react-app - 腳手架

介紹

Create React App 是一個使用 Node.js 編寫的命令列工具，通過它可以幫助我們快速生成 React.js 專案，並內建了 Babel、Webpack 等工具；還內建 ESLint 語法檢測工具、Jest 單元測試工具。還有一個基於 Node.js 的 WebServer 幫助我們更好的在本地預覽應用。
這些都通過 Create React App（CRA） 幫助我們安裝並配置好了，開箱即用

安裝與使用

npm i -g create-react-app

安裝完成以後，即可使用 create-react-app 命令

create-react-app <專案名稱>

專案目錄結構說明

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/ 
    index.js  專案的入口檔案
  

命令指令碼

npm start

啟動一個內建的本地 WebServer，根目錄對映到 './public' 目錄，預設埠：3000

npm run test

執行測試

npm run build

打包應用（準備上線）

元件

對具有一定獨立功能的資料與方法的封裝，對外暴露介面，有利於程式碼功能的複用

類式元件

• 元件類必須繼承 React.Component
• 元件類必須有 render 方法

函式式元件

• 函式的名稱就是元件的名稱
• 函式的返回值就是元件要渲染的內容

props 和 state

• 子元件通過props接受父元件傳遞的引數
• state 元件自身狀態
  • setState
  • 多個 setState 合併

props 與 state 的區別

state 的主要作用是用於元件儲存、控制、修改自己的可變狀態，可以在元件內部進行修改setState
props 的主要作用是讓使用該元件的父元件可以傳入引數來配置該元件，它是外部傳進來的配置引數，元件內部無法控制也無法修改
通常，props 做為不變資料或者初始化資料傳遞給元件，可變狀態使用 state

React 中的事件

• 大小寫問題，onClick()
• this統一指向undefined-解決：使用箭頭函式=>