vue轉(zhuǎn)react useEffect

useEffect用于處理組件中的effect，通常用于請求數(shù)據(jù)，事件處理，訂閱等相關(guān)操作。

useEffect的第二個參數(shù)

1.當useEffect沒有第二個參數(shù)時

通過這個例子可以看到useEffect沒有第二個參數(shù)時不停的在調(diào)用

2.當useEffect第二個參數(shù)為空數(shù)組時

通過這個例子可以看出來useEffect在調(diào)用一次后就不再調(diào)用

3.當useEffect第二個參數(shù)為變量時

通過這個例子可以看出來useEffect在每次count發(fā)生變化時調(diào)用

useEffect的使用

上面的例子可以看出來使用useEffect和和class component使用生命周期函數(shù)時的區(qū)別，使用useEffect將每次count變化的數(shù)據(jù)都打印出來，而使用componentDidUpdate打印了最后一個數(shù)據(jù)很多次，因為class component里面的state隨著render是發(fā)生變化的，而useEffect里面的所有東西都是每次render獨立的。

useEffect清除

useEffect通過return進行一些清除。

例如官方文檔里面的例子，當props.friend.id發(fā)生變化時，可以進行清除工作

vue2轉(zhuǎn)戰(zhàn)React Hooks實踐

從vue2轉(zhuǎn)戰(zhàn)到react16.12, 還是有好多差異的?？偨Y(jié)起來：

開發(fā)思路上

vue是基于data的雙向綁定，數(shù)據(jù)流在model(data)<=>view(template)中是雙向流動關(guān)系。所以修改data, 綁定該data的視圖會隨之修改；修改view，data中的數(shù)據(jù)也會隨之修改（當然，這種情況只針對于可輸入類型的表單元素），然后再配合鉤子函數(shù)created、mount、activated、deactivated、beforeDestroy（還有vue-router提供的beforeRouteLeave等）等在某個時刻自動觸發(fā)一些業(yè)務(wù)邏輯。

react（16.8版本后，官方推薦react hooks開發(fā)方式）則是單向數(shù)據(jù)流動，通過useState聲明變量，視圖綁定state。類似鉤子函數(shù)的工作，react使用useEffect來實現(xiàn)，通過不同的依賴項，實現(xiàn)不同的鉤子函數(shù)作用。react開發(fā)上，就像堆積木，開發(fā)的所有東西都是組件，所以組件化更徹底；vue則是以page劃分的，然后組件是引入到page中的。

代碼組織結(jié)構(gòu)上

vue是以.vue為模塊組織代碼的，一個.vue模塊中包含template、script、style來分別實現(xiàn)視圖、業(yè)務(wù)邏輯、樣式的編寫。

react是以.jsx為模塊組織代碼的，一個.jsx模塊中template都是嵌入在script中的，style另外引入，更像是所有代碼都是在函數(shù)中實現(xiàn)的。 

import React, { useState, useEffect, useCallback } from 'react';
import style from './index.less';
import CardTest from '../components/CardTest/index';
import { getInfo } from '../../../api/api';
const CardTest = () => {
 const [info, setInfo] = useState({});
 useEffect(() => {
   requestData();
 }, []);
 // 請求數(shù)據(jù)
 const requestData = () => {
   const requestParm = "XXX";
   getInfo(requestParm)
     .then(res => {
       const { data = {} } = res;
       setInfo(data);
     })
     .catch(err => {});
 };
 return (
   <div className={style.wrap}>
     <div className="list">
       <CardTest  data={info} />
     </div>
   </div>
 );
};
export default CardTest;

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。 

最新評論