javascript - 存储变化时如何记住组件？

Question

我的应用程序组件中有一个模态，但每次 redux 存储发生更改时，模态都会自行更新。

模态框需要大量计算，当模态框不可见时无需更新。

我必须尝试 React.memo，但当 Modal 组件具有类似 useSelector 的内容时，它不起作用

<App>
  <Modal visible={visible} onClose={onClose} />//it cause perform issue
</App>

在我的真实应用程序中，模态组件

const arr = useSelector(reselectFn);//it's also expensive calc
const result1 = expensiveCalc(arr);//hard to memorize it's value because reselectFn returns a new array
const result2 = anotherExpensiveCalc(result1);
const result3 = yetAnotherExpensiveCalc(result2);

我想要的只是在模式组件不可见时更新它。

一些简化的代码

app.jsx

function counter(state = 0, action) {
  switch (action.type) {
    case "random":
      return Math.random();
    default:
      return state;
  }
}

const store = createStore(counter);

function App() {
  const num = useSelector(s => s);
  const dispatch = useDispatch();
  const callback = useCallback(() => {
    dispatch({ type: "random" });
  }, [dispatch]);
  return (
    <div className="App">
      <button onClick={callback}>dispatch</button>
      <h2>{num}</h2>
      <Memo />
    </div>
  );
}

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById("root")
);

memo.jsx

let count = 0;

const Memo = () => {
  const s = useSelector(s => s); // it blocks memorize
  return <h2>I am render {count++} times</h2>;
};

export default React.memo(Memo, () => true);//not working when using useSelector

我做了一个简单的例子codesandbox

Answer 1

在您的 App.js 组件中，设置一个初始状态下为 bool 值的属性，如下所示。

this.state = {
                show: false
             }

然后您可以编写一个函数，在调用该函数时更改“show”的值。

function showModal(){
   this.setState({
     ...state,
     show : !this.state.show
})
}

之后您可以按如下方式设置 Modal

<Modal show={this.state.show} onHide={this.showModal} />