從 React 架構開始講解 useState、useEffect 編程設計_網頁設計公司

※綠能、環保無空污,成為電動車最新代名詞,目前市場使用率逐漸普及化

台中景泰電動車行只是一個單純的理由,將來台灣的環境,出門可以自由放心的深呼吸,讓空氣回歸自然的乾淨,減少污染,留給我們下一代有好品質無空污的優質環境

隨着前端開發複雜度增加,原生開發模式顯得越來越笨重,前端框架也層出不窮。

MVC 和 MVVM

MVC

MVC是模型(model)-視圖(view)-控制器(controller)的縮寫,一種軟件設計典範,用一種業務邏輯、數據、界面显示分離的方法組織代碼,將業務邏輯聚集到一個部件裏面,在改進和個性化定製界面及用戶交互的同時,不需要重新編寫業務邏輯。MVC被獨特的發展起來用於映射傳統的輸入、處理和輸出功能在一個邏輯的圖形化用戶界面的結構中。

  • Model(模型):數據。
  • View(視圖):用戶界面。
  • Controller(控制器):業務邏輯。

MVVM

MVVM是Model-View-ViewModel的簡寫。它本質上就是MVC 的改進版。MVVM 就是將其中的View 的狀態和行為抽象化,讓我們將視圖 UI 和業務邏輯分開。

採用雙向綁定(data-binding):View的變動,自動反映在 ViewModel,反之亦然。

React Component class編程

React 是一個 用於構建用戶界面的 JavaScript 庫,注重於 View 層。

React Component 並沒有嚴格的M,V區分,只是模糊的定義了幾塊內容:

  • state: 數據存放
  • render: 用戶界面
  • setState | forceUpdate: 渲染用戶界面

所以我們的代碼邏輯是這樣的:

  1. 定義state
  2. 根據state編寫render
  3. render中加入事件,修改state,且渲染用戶界面

以上1,2兩步完成后,我們就不再需要關心render,因為render依賴state,我們只需要關心如何修改state,然後需渲染時,setState | forceUpdate就可以了。

生命周期 componentDidMount 也是很重要的,它再組件完成后只執行一次, 可以用於請求數據,然後設置state。

渲染頁面(setState):state -> view。

書寫思路清晰的代碼,要清晰的知道數據的流向,我們這樣設計。

  • 初始化階段:框架自動渲染一次 -> componentDidMount -> 手動渲染
  • 用戶操作:操作 -> 修改state -> 手動渲染

總結:寫好render和state對應的規則后,只需要專心與如何修改state,然後執行渲染即可。

例子:列表請求

請求與請求參數的分離也是代碼清晰程度的重要一部分。

setState最重要的還有第二個參數,是設置成功后的回調函數。React的state可以讓我們專心開發某一塊,例如我們寫一個列表

state = {
  page: 1,
  dataList: null,
}

// 請求列表
fetchDataList = () => {
  const { page } = this.state;
  let data = '通過page參數請求得到的數據';  // 通過請求得到數據
  this.setState({ dataList: data });
}

// 翻頁
handlePageChange = (page) => {
  this.setState({ page }, this.fetchDataList);
}

寫一個請求方法,請求得到的參數完全從state中獲取,得到數據後會setState渲染頁面,所以我們只需要專心致志於設置state,在回調中發送請求。這樣,一切都看起來那麼清晰。

特殊使用

由於 state 是引用類型,所以我們可以使用 this.state.xx = xx 來修改數據,React 官方並不推薦此種修改方式,因為此方法並沒有渲染頁面,並不能直接的感受到數據的變化。

了解了 React 渲染機制后,只要清晰我們再做什麼,也可以使用此種方法修改數據,並且大量能減少代碼量。

例如:頁面上有兩個按鈕,一個按鈕記錄此按鈕點擊次數,另一個按鈕點擊后,才會显示第一個按鈕的點擊次數。

使用常規setState方式,需要兩個變量計數。

state = {
  clickCount: 0;
  viewCount: 0;
}

btn1Click = () => {
  this.setState({clickCount: this.state.clickCount +1 });
}

btn2Click = () => {
  this.setState({viewCount: this.state.clickCount });
}

render() {
  return <div>{this.state.viewCount}</div>
}

如果使用隱士賦值,只需要一個變量,並且再需要渲染的時候手動渲染。

state = {
  count: 0;
}

btn1Click: () => {
  this.state.count++;
}

btn2Click: () => {
  this.forceUpdate(); // 強制渲染 相當於 this.setState({})
}

render() {
  return <div>{this.state.viewCount}</div>
}

當然,這種方式要在對 React 渲染機制清晰后再使用。

※如何讓商品強力曝光呢? 網頁設計公司幫您建置最吸引人的網站,提高曝光率!

以設計的實用美學觀點,規劃出舒適、美觀的視覺畫面,有效提昇使用者的心理期待,營造出輕鬆、愉悅的網站瀏覽體驗。

這就體現了React的靈活性,按需渲染。

React Hooks 函數式編程

React 16.7推出了 React Hooks 函數式編程。不用傳統的類方式,寫法大有不同。

首先看渲染機制,Component方式,渲染后,只執行了render方法,類裏面的其他方法不會執行。而 React Hooks 函數式編程 每次渲染,都會把整個函數執行一遍,並提供了一個數據存放地 useState。

useState

// 聲明一個叫 "count" 的 state 變量
const [count, setCount] = useState(0);

setCount 用來設置 count 並且渲染頁面,且只有這一種渲染方式,這就意味着,我們不能像 Component 那樣靈活的按需渲染了。

useEffect

useEffect(function () {
  // do sth..
}, [])

useEffect 第一個參數是一個函數,滿足條件後會觸發。第二個參數是個數組,如果是個空數組則只執行一次第一個參數函數(相當於componentDidMount),如果裏面放變量,執行一次后,以後每次渲染后就監聽變量有沒有改變,如果改變就執行第一個函數。

與 class 方式的對比

對比 React.Component 和 React Hooks,它們都有存放數據的state,通過state渲染頁面的render,和手動渲染的方法setState或者setXXX。

不同的是,React.Component有setState成功后的回調,React Hooks沒有。

例如使用 React Hooks 執行下面代碼

setCount(2);
console.log(count);

count拿到的總是設置前的值。

useState、useEffect代碼設計

看到知乎上一句話:先做什麼再做什麼這種callback的寫法是傾向於命令式,而使用hooks編寫代碼則更傾向於聲明式.你不需要去指定你要的動作發生的時機, 而是聲明一個條件或者依賴來讓React來決定正確的執行時間點。

所以我們要轉變思路,不要去控制何時渲染頁面,因為每一次set都會渲染頁面,需要的是在useEffect里寫條件,讓React自己決定渲染。

如請求改造如下

const [page, setPage] = useEffect(1);          // 請求參數 page
const [pageSize, setPageSize] = useEffect(20); // 請求參數 pageSize
const [type, setType] = useEffect(1);          // 請求參數 type
const [dataList, setDataList] = useEffect(1);  // 請求得到的數據

useEffect(function () {
  fetchDataList();
}, [page, pageSize, type]);

const fetchDataList = function () {
  let data = '通過page pageSize type請求到的數據';
  setDataList(data);
}

組件第一次執行或者page,pageSize,type改變,就會請求數據,然後set新數據渲染頁面。

上面代碼基本上滿足了我們需要,然後在極端情況下,即使請求參數改變,也不需要發請求。對此我們需要另外設置一個變量控制是否發請求。

const [sendRequest, setSendRequest] = useEffect(0);  // 控制發請求

useEffect(function () {
  fetchDataList();
}, [sendRequest]);

const handlePageChange = (page) => {
  setPage(page);
  setSendRequest(Math.random());
}

但是這種寫法還是運用了命令式,違背了React Hooks本意,不推薦。推薦規則寫在useEffect中。

渲染優化

不管是 class 方式還是函數式編程,都需要關心一個問題:合理渲染。

class 方式在每次 setState 或者 forceUpdate 都會執行render函數渲染。

函數式編程方式 在useState中每次set新數據后,就會重新執行整個函數並渲染。

React 重要特徵是,一般情況下,父組件渲染,子組件也會渲染。所以在頂層容器中,要合理渲染,盡可能的抽成更小的組件,防止不必要的渲染。

class 方式中,state只放與rander有關的變量,無關的可以放在class外,減少setState的使用。函數式編程一樣,和return無關的變量可以放在函數外。

whosmeya.com

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

※自行創業缺乏曝光? 網頁設計幫您第一時間規劃公司的形象門面

網站的第一印象網頁設計,決定了客戶是否繼續瀏覽的意願。台北網動廣告製作的RWD網頁設計,採用精簡與質感的CSS語法,提升企業的專業形象與簡約舒適的瀏覽體驗,讓瀏覽者第一眼就愛上它。