函數式組件useState中state更新問題和useEffect模擬生命周期

全貌：

//1.引入useEffect, useState
import React, { useEffect, useState } from 'react';
import HeaderScreening from 'components/IDBHeaderScreening';

import {
  SetLCollect
} from '../../newServices';

import Chart from '../Chart';

import './index.less';
import { func } from 'prop-types';


const PageView = ({

  filterReady,
  filterChange,
  save,
  onFilterChange,
  onFilterReady,
  ...props
}) => {
//2.
  const [lineData, setLineData] = React.useState(undefined);
  
  const fetchDatas = () => {
    fetchLineChartData();
    fetchCommentChartData();
  };

  //
  const fetchLineChartData = () => {
//3.
    SetLCollect().then(res => setLineData(res.data.result));
  };
  useEffect(() => {
    fetchDatas();
  }, []);

  return (
    <div className="yt_productAnalysis_aspectAnalysis_wrapper">
      <HeaderScreening
        onReady={onFilterReady}
        onChange={onFilterChange}
        pageType="ASPECT_TREND" // SOCIAL_OVERVIEW
        // noSavingFilterList={true}
        advanceAuthority={false}
        valueConf={['fullInfo']}
        showList={['fullDate', 'screening', 'save']}
        hasHour={true}
      >
        <div className="content">
        //4.
          <Chart data={lineData} />
         
        </div>
      </HeaderScreening>
    </div>
  );
};

export default PageView;

 

一。1..基本使用：[state,setState]=useState(0);    eg：

const [lineData, setLineData] = React.useState(undefined);

   2. 通過setState更新state，eg：

 setLineData(res.data.result)
3.因為

etLineData(res.data.result)是在異步中進行處理的，所以

lineData在初次渲染的時候還是undefined；
只用在子組件

 <Chart data={lineData} />

渲染的時候才能獲取到更新之后的數據
<Chart/>組件詳情

import React from 'react';

//，測試mock數據的state獲取
export default props => {
  //   console.log(props, '1232142445');
  return <div>123</div>;
};

 

 

二.生命周期的模擬（以下轉載自：https://www.cnblogs.com/lovevin/p/13231718.html）

4. 函數組件模擬生命周期

函數組件同樣地沒有生命周期，但是 React Hooks API 提供了 React.useEffect 來解決此問題。

React.useEffect(fn, ??) 第一個參數是在特定時機到的時候執行的回調函數，第二個參數是指明什么時機。

4.1 模擬 componentDidMount 第一次渲染

在第二個參數為 [] 時只會在第一次渲染時執行

useEffect(()=>{ console.log("第一次渲染"); },[]) 

4.2 模擬 componentDidUpdate （不完全模擬）

在第二個參數的數組里加上要監聽變化的數據就行，若不加數組，不傳第二個參數，則會在 state 的任意一個屬性改變時都會觸發該函數回調

useEffect(()=>{ console.log("n 變了"); },[n]) 

useEffect(()=>{ console.log("任意屬性變了"); }) 

但是這樣的模擬並不完全等同，因為該函數回調會在一開始在數據由未定義　undefined 到被賦值后會執行該回調函數。而 componentDidUpdate 不會再第一次渲染時執行。

因此可以 自定義 Hook 進行計數，正確模擬 componentDidUpdate 鈎子，自定義 useUpdate.js 如下：

const useUpdate = (fn, dep)=>{ const [count,setCount] = useState(0) useEffect(()=>{ setCount(x => x + 1); },[dep]) useEffect(()=>{ if(count > 1){ fn() } },[count,fn]) } 

4.3 模擬 componentWillUnmount

模擬銷毀前執行時期，是用函數里返回函數的方式。

useEffect(()=>{ console.log("任意屬性變了"); return ()=>{ console.log("該組件要銷毀了") } })