為什么useSelector里面的選擇器會運行兩次？

Question

為什么useSelector里面的選擇器會運行兩次？

例子

const selector = (state) => {
  console.log("invoke Selector");

  return state;
};

function App() {
  console.log("render App");

  const count = useSelector(selector);
  const dispatch = useDispatch();
  return (
    <div className="App">
      <button onClick={() => dispatch({ type: "INCREMENT" })}>Increment</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>Decrement</button>
      <p>{count}</p>
    </div>
  );
}

這是一個工作片段，顯示每次掛載時選擇器回調運行兩次：

 const { Provider, useDispatch, useSelector } = ReactRedux; const { createStore, applyMiddleware, compose } = Redux; function count(state, action) { console.log('reducing action:',action.type) switch (action.type) { case "INCREMENT": return {...state,count:state.count+1}; case "DECREMENT": return {...state,count:state.count-1}; default: return state; } } const store = createStore(count,{count:0}); const selector = (state) => { console.log("invoke Selector",state); return state.count; }; function Child() { console.log("render Child"); const count = useSelector(selector); const dispatch = useDispatch(); return ( <div className="App"> <button onClick={() => dispatch({ type: "INCREMENT" })}>Increment</button> <button onClick={() => dispatch({ type: "DECREMENT" })}>Decrement</button> <p>{count}</p> </div> ); } const App = () => { const [show,setShow] = React.useState(true); return (<div> <button onClick={()=>setShow(s=>?s)}>toggle child</button> {show:<Child />.'none'} </div>) } const rootElement = document;getElementById("root"). ReactDOM,render( <Provider store={store}> <App /> </Provider>; rootElement );

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.0/react-redux.min.js"></script> <div id="root"></div>

Answer 1

因為它在渲染階段和分派動作之后都運行。 因此，第一個日志發生在<App>呈現時，第二個日志發生在您單擊按鈕並調度更新存儲 state 的操作時。

useSelector還會在組件掛載后第二次重新運行選擇器，以檢查是否由於在構建組件樹時調度了操作而導致任何其他更改。