React入門隨筆

React不是一個框架，是一個用於構建用戶界面的JS庫，實現單頁面應用。React用於在前端構建用戶界面（UI）。React是MVC應用程序的視圖層（模型視圖控制器）。

多頁面應用：頁面跳轉時跳轉的都是完整的html頁面
單頁面應用：只有一個html頁面，全部內容都在這個頁面中展現，經過'路由'來加載不一樣內容。所有是經過js來控制顯示的。優勢：用戶體驗比較好，加載比較流暢。缺點：不利於seo(網站優化，影響搜索排名)，解決辦法ssr(服務端渲染)。

起步安裝

先決條件 ：全局安裝了Node.js和npm。
 npm i -g yarn(yarn下載速度比npm快)
 方法1 ：npx create-react-app my-app(項目初始化)

1. npx : npm中的一個功能，npx的執行分3步，第一步：下載腳手架。第二步：使用腳手架安裝項目。第三步：下載好項目以後刪除腳手架
2. 腳手架：已經寫好的配置至關於一個集合
3. 另一種安裝方法：npm i -g create-react-app create-react-app my-app 先下載好腳手架，再經過腳手架下載項目，缺點：版本不自動更新

   Create React App解讀 ：該環境預先配置了構建React應用所需的一切。它將建立一個實時開發服務器，使用Webpack自動編譯React，JSX和ES6，自動前綴CSS文件，並使用ESLint測試和警告代碼中的錯誤。

初始化項目目錄結構解讀

node_modules : 項目依賴包
    public : 靜態文件   （模板-index.html）
    src : 編寫前臺代碼文件夾
           index.js ： 入口文件
           App.js ： 入口文件中渲染的頁面
           .test.js ： 測試文件，通常不須要管
           serviceWorker.js : PWA的配置文件
           .gitignore文件 ： git上傳時的忽略配置文件
           package.json ：記錄安裝信息
         "scripts": {
                   "start": "react-scripts start",  //啓動開發階段服務器
                   "build": "react-scripts build",  //打包
                   "test": "react-scripts test",  //運行測試
                   "eject": "react-scripts eject" //顯示隱藏的配置
          }
           運行npm run eject時，提示這個命令是不可逆的，
           運行後會多出config文件夾和scripts文件夾，
           config裏邊是webpack的配置；scripts裏邊是啓動命令的配置，
           通常不執行這個命令

JSX語法：

1.在js中能夠直接寫html
                  HTML部分：直接寫html標籤
                  JS部分 : 寫在 { } 內
               ·babel會把jsx轉成React.createElement()
               ·React.createElement()方法是建立react元素(虛擬DOM)的方法
               ·ReactDom.render()的第一個參數，須要的就是react元素
             2.JSX的特色
       { }大括號中寫的是js表達式，【注】大括號中不能直接渲染對象，能渲染數組(不能有普通對象)
        1. 類名 ： className
        <div className='' ></div>
        <label htmlfor='' ></label>
        2.添加行內樣式：
                 <div id={uid} style={{color:'red',fontsize:'14px'}} ></div>
             3. react元素時不可變的，若是須要更新頁面顯示，就須要建立新的react元素
             4.JSX是一個表達式,能夠在map循環的代碼塊中使用JSX，將 JSX 賦值給變量，
             把 JSX 看成參數傳入，以及從函數中返回 JSX。
             在JSX當中，是不能使用if else 的，不過可使用三元運算表達式
                 .map(function(ele,index){
                      return 返回值
                    })
         數組的一個遍歷方法,ele是數組元素項，index是下標，return後是返回值
             5. JSX屬性
        1.使用引號來定義以字符串爲值的屬性
            const element = <div tabIndex="0"></div>;
         2.使用大括號來定義以 JavaScript 表達式爲值的屬性
            const element = <img src={user.avatarUrl}></img>;
         3.style樣式使用JSX，寫法以下：
            <div style={{ color:"red" ,fontSize:"30px"}}></div>

元素渲染

React DOM 會負責更新 DOM 來與 React 元素保持一致

語法：ReactDom.render(element,parentNode)
    說明：

1.參數1：element爲要顯示的元素。能夠是雙標籤形式的，也能夠是單標籤形式的，若是是單標籤必須有結束符號

2.參數2：parentNode爲元素要顯示在頁面的哪一個標籤中。
3.渲染方法通常一個項目中只有一個。其餘頁面經過組件引入或者路由訪問。 
4.更新已渲染的元素:React 元素是不可變對象。一旦被建立，你就沒法更改它的子元素或者屬性。
react元素寫法：
      1.直接使用jsx語法： `<div>{變量名}</div>`
      2.使用React.createElement()
      3.使用組件`<App/>`

組件

1. 概念：從概念上相似於 JavaScript 函數。它接受任意的入參（即 「props」），並返回用於描述頁面展現內容的 React 元素。組件容許你將 UI 拆分爲獨立可複用的代碼片斷，並對每一個片斷進行獨立構思。

2. 建立方式有兩種：

   1. 函數式組件:函數式組件在不使用hook語法時，功能特別弱，有hook語法後，要替換類型式組件

function App(props){
          return (<div>{props.name}</div>)
        }

2. 類型式組件 ：前期使用類組件，會學習類組件中的state,生命週期函數
   類組件中想要獲取props須要用 this.props 來獲取

class App extends React.Component{
           render(){
               return (
            <div></div>
               )
          }
    }

【注意】無論函數式組件仍是類型式組件，必須先引入React，不然報錯；return返回的jsx只能有一個頂層標籤

類型式組件

1. 建立類型式組件

import React,{Component} from 'react'
          
           class Home extends React.Compoent{
            return (<div></div>)
        }

說明： 1：組件名稱首字母要求大寫

2：須要繼承React.Component這個類
   3：必須有一個render函數，render必須return,return後寫的是jsx語法

1. 導出組件

export {Home}
        export default Home

1. 導入組件

import {Home} from 'path'---->Home名字是自定義
import Home from 'path'

1. 使用組件
   當成標籤使用，單/雙標籤均可以
   <Home/> || <Home></Home>

組件複用

把頁面中的某一塊UI拆分出去，作成一個組件，在使用的位置直接屢次調用組件便可

props ： 只讀屬性，不能改(父傳子)

1. 當React元素爲用戶自定義組件時，他會將JSX所接收的屬性轉換爲單個對象傳遞給組件，這個對象被稱之爲'props'
2. 調用組件時能夠經過定義屬性的形式來傳遞數據 <Item data='data' arr={[1,2,3]} />
3. 組件使用傳遞的數據時，經過props對象獲取調用數組時傳入的數據【注】傳遞數據時，多個組件第哦啊用定義的屬性名要一致
4. 可使用 ... 擴展運算符來展開數據(數組)，也能夠遍歷時傳遞數據

class Item extends Component{
         console.log(this.props) // {data:'string',arr:[1,2,3,4]}
     }

JSX中的循環

1. 不能使用for循環
2. 可使用 map 方法遍歷對象或數組

arr/obj.map(function(item,index){
               return item
        })

state ： 定義組件內部本身使用的數據

1. 在類組件中有兩種定義方式
   第一種：在constructor方法中定義

constructor(){
           super();
            this.state = {
                count : 1
             }
        }

第二種：直接在組件中定義

state = {
             count : 1
        }

1. 使用state數據 : this.state.xx
2. 修改state數據 :
   方法1對象形式的 :

this.setState({
            count : this.state.count + 1 
    })

方法2函數形式的 ：

this.setState((state)=>{
        return {
                   count : state.count + 1
                }
    })

1. this.setState()方法有批量更新功能(意思就是執行最後一次的)

this.setState({count : this.state.count + 1})

1. this.setState()方法多是異步的。當setState直接放在事件的宏任務中執行時是異步的；當setState又被放在別的宏任務中或者其餘微任務中時又是同步的(此時被兩個以上宏任務包裹 || 被微任務包裹)

this.setState({ },( )=>{ })
setState的函數形式 ：參數state指的永遠是最新的數據，是上一次操做完state的結果

this.setState((state)=>{
             return {
                   count : state.count + 1
              }
        })

生命週期函數

生命週期函數也被稱爲鉤子函數，在組建運行過程當中在某些特定條件下自動執行的函數。重點：componentDidMount , componentDidUpdate , shouldComponentUpdate , componentWillUnmount
··· componentWillMount 組件即將渲染(可能會網絡請求，可是不建議)
··· componentDIdMount 組件渲染完成(網絡請求，全局事件綁定)
··· shouldComponentUpdate 是否容許組件更新(優化使用)
··· componentWillUpdate 組件即將更新(通常不作任何處理)
··· componentDidUpdate 組件更新完成(新的網絡請求)
··· compoentWiiReceiveProps 組件接收新的props(通常不作任何處理)
··· componentWillUnmount 組件即將卸載(把全局綁定的事件，網絡請求等有反作用的所有清除)

事件系統

react中本身從新定義了事件系統，react綁定事件不須要獲取到DOM元素，而是把事件綁定定義再虛擬DOM上

語法：<div on事件名 = {函數}>《/div>事件名要求採用駝峯命名法

函數編寫形式：

1.直接定義一個箭頭函數
       2.能夠定義函數
    若是是類型式組件，須要使用this.clickme,clickme函數定義在類中
    class App extends React.Component{
             clickme()
             render(){
             return <div onClick={this.clickme}></div>
        }
    }
        3. this指向問題
    在react中，自定義事件中this默認是指向undefined的
    若是想讓this指向當前組件有如下幾種方法：
          1.在constructor構造方法中經過bind綁定this
          2.使用bind,改變this指向(能夠傳參)
          3.使用箭頭函數(內存開銷最大)
    若是當函數調用時沒有傳參，建議在constructor方法中綁定，若是函數調用時須要傳參，直接使用bind綁定更多一些

事件對象

事件對象不須要傳遞，直接調用就行，在事件對象方法函數形參的最後一個位置

獲取座標信息
   阻止默認事件
   阻止冒泡
   獲取事件觸發者

表單

form標籤 <form action='http://xxx' method='get | post'></form>
ajax:不刷新頁面，實現局部刷新，form不多用

表單：收集用戶輸入信息

第一種 : 受控組件(表單數據的顯示和更改都是由react的state控制的，使react的state成爲'惟一數據源')
  第二種 ： 非受控組件(容許用戶獲取到原生DOM，本身來操做數據)

。。。reart--》es6函數擴展