React 開發記錄

2021-09-24 06:39:38 字數 1498 閱讀 5540

學習使用 react 要注意點地方有哪些呢?

jsx class 是關鍵字要用classname替代, for也是關鍵字要用 htmlfor 代替

jsx 表示式返回null就是什麼都不顯示,可以做隱藏某些元素

自定義的元件必須是大寫字母開頭,普通的html都是小寫開頭

jsx事件名需使用小駝峰法(onclick)

jsx 事件監聽中若要使用當前例項需繫結this

事件監聽時多引數,應將 event 物件放最後乙個引數

修改元件狀態應該使用this.setstatesetstate由父類提供,切並不是實時,是乙個佇列修改的形式,所以如果要實時操作可以用在引數使用函式返回上乙個setstate狀態進行下一次修改,多次setstate並不會造成頁面的渲染問題,因為只有佇列中的最後一次setstate才會對元件狀態進行改變並渲染到頁面中

props不能在內部元件進行狀態的修改,只能通過父元件修改props的傳入引發元件重渲染

state和props的區別在於,state是控制項本身的狀態,props是讓外部配置元件的狀態

沒有state是無狀態元件,反之則是有狀態元件,因為狀態會帶來管理的複雜性,所以推薦多寫無狀態元件,少使用有狀態元件,提高元件的復用性

jsx渲染列表的時候要為每乙個渲染元素帶上key值,一般是後台返回的每乙個元素的id,具有唯一性,key的作用主要在於高速渲染dom

state 不可直接修改, 這會讓react的狀態變得難以追蹤

狀態提公升:當某個狀態被多個元件所依賴或影響的時候,應該把這個狀態提公升到父元件上,子元件通過props接受狀態

shouldcomponentupdate在做元件效能優化的時候很重要,用於控制項是否何從渲染,帶兩個引數prepropsprestate,返回值是 boolean

元件在登出的時候必須處理未釋放的狀態值,例如定時器

ref可以獲取操作dom,但是盡量不這麼做,除非react本身做不到

通過依賴prop-types來做 props 型別檢查

重點

元件復用的時候,當同個頁面元件復用超過1次,元件內部清除定時器必須寫在 class 內,以static timer = null定義,否則當同頁面元件復用超過一次的時候登出元件的時候還是會發生記憶體洩漏問題,再強調一下,登出元件的時候應在componentwillunmounthook 中手動釋放 gc 無法自動釋放的狀態。例如:定時器

**規範

元件內部私有方法用_開頭,事件監聽用handle處理,把事件監聽的方法傳給元件的時候用on開頭元件的內容編寫順序如下:

react開發簡單記錄

定義函式元件 export default function props 定義類元件 export default class title extends react.component 匯入元件 import title from title 使用該元件 在另乙個元件中 export defaul...

react 搭建react開發環境

搭建react開發環境有兩種 1 必須要安裝nodejs 注意 安裝nodejs穩定版本 2.安裝腳手架工具 單檔案元件專案生成工具 只需要安裝一次 3.建立專案 可能建立多次 找到專案要建立的目錄 4.cd 到專案裡面 cd reactdemo npm start yarn start執行專案 n...

react 開發入門

三子棋遊戲 安裝react 建立本地伺服器 啟動執行 直接通過命令安裝 修改測試初始化 刪除src目錄下所有檔案 複製中的index.css和index.js檔案 啟動檢視npm start 增加互動 使用陣列將歷史資料儲存在最上層的game中,可以訪問歷史步驟,如下 import react fr...