react怎么让组件强制刷新--函数式高阶组件

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;

实现效果:  点击[强制刷新组件]按钮, 即使组件数据没有变化也可以强制刷新