组件重置，还原组件，react

组件重置，还原组件，react

利用虚拟DOM更新原理

// 高阶组件，props 传入 _factor参数，参数改变时会重新渲染组件，不保存任何状态，相当于重置
function resetCom(Com, val) {
  return function (props) {
    let [num, setNum] = useState(val);
    if (!Object.is(props._factor, num)) {
      Promise.resolve().then(() => {
        setNum(props._factor);
      });
      return <div></div>;
    }
    return <Com {...props} />;
  };
}

// 使用

// 包装需要重置的组件
const Box = resetCom(function () {
  let [num, setNum] = useState(0);
  return (
    <div>
      <h3>这里是 App的子组件 , Box 组件</h3>
      <p>点击改变Box 的 状态数据</p>
      <button onClick={() => setNum(num + 1)}>Box {num}</button>
    </div>
  );
});

// 使用需要重置组件的组件
function App() {
  // 当数据改变时会重置Box组件，清除状态（重置组件）
  let [num, setNum] = useState(0);
  return (
    <div>
      <h3>这里是 App 组件</h3>
      <p>点击改变App状态数据，从而重置 Box组件的状态</p>
      <button onClick={() => setNum(num + 1)}>App {num}</button>
      <p style={{ height: "30px" }}></p>
      <Box _factor={num} />
    </div>
  );
}