做网站网站,中国设计网络首选品牌,安装wordpress 脚本,庆阳做网站公司react-18.1.0#xff0c;rc-easyui-1.2.9#xff0c;babel-7.17.11
SPA还要处理的问题#xff1a;
#xff08;一#xff09;tabs切换事件通知
tabs切换时#xff0c;自己的框架需要处理组件的生命周期#xff0c;要有active/deactive#xff0c;让组件能知道何时创…react-18.1.0rc-easyui-1.2.9babel-7.17.11
SPA还要处理的问题
一tabs切换事件通知
tabs切换时自己的框架需要处理组件的生命周期要有active/deactive让组件能知道何时创建或清除一些资源的使用比如setInterval/clearInterval。
赋予active/deactive事件通知在tabs元件的onTabSelect/onTabUnselect事件处理就行了。如何通知分两种情况
1类式组件让它定义一个function foil_onStateChanged(state)函数来接收。
page.likeButton.jsxclass Com_LikeButton extends React.Component {constructor(props) {console.log(likebutton constructor);super(props);this.state { liked: false };}foil_onStateChanged(state){console.log(likebutton foil_onStateChanged,state);}render() {console.log(likeButton render,this.props);if (this.state.liked) {console.log(acroML.browserEngine.LCID);return t(File);}return (button onClick{() this.setState({ liked: true })}{t(Edit)}/button);}
}
export default Com_LikeButton;
2函数式组件通过props参数传递。
page.timer.jsxexport default function COM_timer(props){console.log(page timer function:,props.foil.state);let [time,setTime]React.useState(0);function getNow(){return time;}//timerID不参与渲染用useReflet timerIDReact.useRef(null);console.log(timerID:,timerID.current);if (props.foil.statecreate || props.foil.stateactive){if (timerID.currentnull){console.log(start timer)timerID.currentsetInterval(function(){console.log(timer:,time);time;setTime(time);},1000);}}else if (props.foil.statedeactive||props.foil.statedestroy){if (timerID.current!null){console.log(clear timerID:,timerID.current);clearInterval(timerID.current);timerID.currentnull;}}return(divspan{t(File)}/spanspan{getNow()}/span/div)
}
虽然类组件有componentDidMount/componentWillUnmount两个事件来判断组件创建和销毁但是函数式组件没有。如果框架要统一事件最好把create/destroy事件也加进去。create可以在异步组件的componentDidMount处理destroy就不能在动态元件的componentWillUnmount处理了甚至不能在tabs的onTabClose事件处理来不及了虽然类组件可以但函数式组件不会触发渲染重调用。
com.bizCom.jsximport { Suspense,Component } from react;
class Com_bizCom extends React.Component {constructor(props) {console.log(Com_bizCom constructor);super(props);props.foil.onStateChangedthis.foil_onStateChanged.bind(this);this.state{foil:{state:create}}}shouldComponentUpdate(nextProps, nextState) {//console.log(nextProps);//文件相同时不要再渲染LCID改变后必须重渲染//if (nextProps.file (nextProps.file this.props.file)) return false;return true;}foil_onStateChanged(state){console.log(bizCom foil_onStateChanged,state);console.log(this.com);if (this.com.ref){//React.Component类组件可以通过函数通知状态if (this.com.ref.current.foil_onStateChanged){this.com.ref.current.foil_onStateChanged(state);}}else{//函数式组件只能通过proprs传递状态然后bizCOM重渲染if (this.state.foil.state!state){this.state.foil.statestate;this.com.props.foil.statestate;this.setState(this.state);}}}componentDidMount(){if (this.com.ref){//只需要组件元件通知一下create状态函数元件第一渲染已经把create带到props.foil.statethis.com.ref.current.foil_onStateChanged(create);}}componentWillUnmount(){let selfthis;console.log(bizCom componentWillUnmount,this.com.ref);//不在这里处理子函数式组件的销毁通知来不及了子函数式组件不会调用渲染//在easyui tab关闭前处理}render() {let selfthis;console.log(Com_bizCom render,this.props);let filethis.props.file;if (!file) return null;/*let ComReact.lazy(function(){import函数不能加载jsxreturn import(file);});return(SuspenseCom/Com/Suspense)*/let objwindow.require(file);//console.log(obj);if (obj.__esModuletrue) obj obj.default;// console.log(typeof obj);// console.log(obj.prototype);console.log(self.com);let opsnull;if (self.com){opsself.com.props;}else{ops{foil:{state:create}};if (obj.prototype obj.prototype.isReactComponent){//类组件才有ref,函数式组件不能有refops.refReact.createRef();}}let comReact.createElement(obj,ops);self.comcom;return com;}
}
export default Com_bizCom;
要在tabs的panel关闭前处理查找easyui tabs源码找到handleTabClose函数hook一下
com.right.jsx
............componentDidMount(){let selfthis;console.log(right componentDidMount);console.log(this.ref_tabs.current.handleTabClose);//hook handleTabClose这个函数在关闭panel前通知到bizCom里面的原件要销毁了做一些清理工作比如清除timerlet fnthis.ref_tabs.current.handleTabClose;this.ref_tabs.current.handleTabClosefunction(panel){console.log(handleTabClose,panel);let bizComself.getBizCom(panel);bizCom.props.foil.onStateChanged(destroy);//必须用异步否则子函数式组件不会被调用刷新setTimeout(function(){fn.call(self.ref_tabs.current,panel);}, 0);}}
二主界面切换显示的语言
只要在根原件把LCID设置为响应式改变时tabs各个组件会刷新。
com.root.jsximport Com_Main from ./com.main.jsx;
// import Com_acroMLStub from ./com.acroML.stub.jsx;
export default function COM_Root(){console.log(root,acroML.browserEngine.LCID);let [LCID,setLCID]React.useState(acroML.browserEngine.LCID);acroML.browserEngine.switchLanguagefunction(){//console.log(acroML.browserEngine.LCID);setLCID(acroML.browserEngine.LCID);//console.log(LCID);}//Com_acroMLStubreturn(Com_Main/Com_Main);
}
