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组件中，在初始状态下设置一个如下所示的布尔值属性。

this.state = {
                show: false
             }

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

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

之后，您可以将Modal设置如下

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

存储更改时如何记住组件？

1 个答案: