1. 函数式高阶组件写法:
原理:
监听父组件传给组件的updateStr, 如果updateStr有变化就改变forceUpdate(布尔值),
如果forceUpdate为false销毁组件, 为true显示刷新组件, 从而使组件有强制刷新的效果
export const wrapper = (innerComp)=>({updateStr, ...props})=>{
const [forceUpdate,setfForceUpdate] = useState(true);
useEffect(()=>{
if(updateStr && xxx) {// xxx为搜索条件,视情况而定
setfForceUpdate(false);
setTimeout(() => {
setfForceUpdate(true);
}, 0);
}
},[updateStr]);
return forceUpdate?<innerComp {...props}/>:null;// 条件?<comp/>:null这样写是会重新渲染页面的
}
如果需要组件强制刷新的,使用这个组件作为函数,将原本的组件作为参数传进去就行了
b文件:
const defaultComp = (props:any) => {
//...略
return <xxxComp/>
}
export const ForceUpdateXXComp:any = wrapper(defaultComp);
最后在主文件引入的是b文件,正确传参就行了
如果觉得不好理解原理? 直接靠父组件传参判断更容易理解:
export const wrapper = (innerComp)=>({forceUpdate, ...props})=>{
return forceUpdate?<innerComp {...props}/>:null;// 条件?<comp/>:null这样写是会重新渲染页面的
}
使用方法:
子组件:
const defaultComp = (props:any) => {
//...略
return <xxxComp/>
}
export const ForceUpdateXXComp:any = wrapper(defaultComp);
父组件:
<ForceUpdateXXComp forceUpdate={布尔值变量} />
2. class式高阶组件(强制刷新组件)
HOCFactory文件:
原理:
监听父组件传给组件的forceUpdate(布尔值), 如果forceUpdate为false销毁组件, 为true显示刷新组件, 从而使组件有强制刷新的效果
import React from "react"
export const HOCFactory = (Component) => {
class HOC extends React.Component {
// 在此定义多个组件的公共逻辑
render() {
return <>
{ this.props.forceUpdate &&
<Component {...this.props} />
}
</>
}
}
return HOC
}
HOCFactory使用方法:
1) 将需要强制刷新的普通组价传入HOCFactory中作为参数, 得到封装后的组件
const Child = HOCFactory(ForceRefreshChild);
2) 在render函数中使用(注意把forceUpdate传给Child组件)
<Child forceUpdate={this.state.forceUpdate} />
3) 改变state.forceUpdate的值, 查看刷新效果, 刷新效果不明显的将setTimeout延时时间调整长一点
Test文件:
// 测试HOCFactory高阶组件
import React from "react";
import { HOCFactory } from "./HOCFactory";
// 普通组件
class ForceRefreshChild extends React.Component {
render() {
return <div>普通组件</div>;
}
}
const Child = HOCFactory(ForceRefreshChild); // 需要强制刷新的组价
// 测试强制刷新效果
class Test1 extends React.Component {
constructor(props) {
super(props);
this.state = {
forceUpdate: true,
};
}
render() {
return (
<>
{/* 需要强制刷新的组件 */}
<Child forceUpdate={this.state.forceUpdate} />
{/* 强制刷新按钮 */}
<button
onClick={() => {
this.setState({
forceUpdate: false,
});
setTimeout(() => {
this.setState({
forceUpdate: true,
});
}, 1);
}}
>
强制刷新组件
</button>
</>
);
}
}
export default Test1;
实现效果: 点击[强制刷新组件]按钮, 即使组件数据没有变化也可以强制刷新