全貌:
//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("该组件要销毁了")
}
})