组件在渲染时甚至没有使用useEffect和useState

Question

发生的事情是我没有使用useEffect&当我从购物车中删除项目时，useState仍然呈现更新的状态，这是因为Redux吗

我是react的初学者，到目前为止，我学到的是，当发生任何变化时，我们都会使用useEffect或useState来更新状态。但在这里我很困惑

const CartScreen = ({ history, match, location }) => {
const qty = location.search ? Number(location.search.split('=')[1]) : 1
console.log(qty)
const cart = useSelector((state) => state.cart)
const { cartItems } = cart
console.log(cart)
console.log("Render again")
const dispatch = useDispatch()

这是我的removeItem处理程序

const removeItemHandler = (id) => {
dispatch(cartRemoveItem(id))
}

return (
<div className="CartScreen">
<div className="CartItem_Container">
{cartItems.length === 0 ? (
<p>No item</p>
) : (
cartItems.map((product) => {
return (
<>
<div className="Cart_Card">
<div>
<img src={product.image} width="70px" height="70px"></img>
</div>
<div className="Cart_Breif">
<p className="CartProduct_Name">
{product.name}{' '}
<span className="qty">
<select
value={product.qty}
onChange={(e) => {
dispatch(
cartAddItem(
product.product,
Number(e.target.value)
)
)
}}
>
{[...Array(product.countInStock).keys()].map((x) => (
<option key={x + 1} value={x + 1}>
{x + 1}
</option>
))}
</select>
</span>
</p>
<p className="About_Product">{product.description} </p>
<p className="price">
${product.price}{' '}
<span className="removeItem" onClick={()=> removeItemHandler(product.product)}>Remove</span>
</p>
</div>
</div>
</>
)
})
)}
</div>
<div className="ProceedTo_Checkout"
onClick={() => {
history.push('/address')
}}
>
<p>Proceed To CheckOut</p>
</div>
</div>
)
}
export default CartScreen

Answer 1

由于useSelector，您的组件将重新渲染。您很可能通过调度cartRemoveItem来更新存储。useSelector钩子将redux存储中的最新选择器值和以前的选择器值进行比较，如果它们不同，则强制组件重新渲染。

Answer 2

无论何时状态或道具发生更改，组件都会重新发送，如果您使用useSelector挂钩，则在特定状态下，组件将跟踪该状态的任何更改，并在更改时重新发送