React中子组件向父组件传值是否影响性能？附购物车代码咨询

嘿，我来帮你拆解下当前实现的问题，以及对应的优化方案，顺便聊聊性能的事儿～

• 重复状态引发的同步bug：你在Child组件里自己维护了一份cart状态，但父组件也有同名的状态，这就造成了状态冗余。更严重的是，在Child的changeCart函数里，你调用props.cartFunction(cart)时，这里的cart还是旧值——因为React的setState是异步更新的，刚调用setCart(newcart)后，组件还没完成重新渲染，cart变量并不会立刻更新。比如第一次点击按钮，Child的本地cart会变成["Apples", "Oranges"]，但传给父组件的却是初始的空数组，完全不符合预期！
• 不必要的组件重渲染：Parent组件每次渲染时，changeCart函数都会被重新创建，导致Child组件因为cartFunction这个prop发生变化而重复渲染（哪怕购物车内容根本没改动）。

1. 移除Child的本地状态（最关键） #

购物车是需要在父组件（甚至全局）维护的状态，Child完全不需要自己存一份。直接用父组件传过来的cart，更新时调用父组件的方法传递新数据即可：

const Parent = () => { 
  const [cart, setCart] = useState([]) 
  // 用useCallback缓存函数，避免每次渲染重新创建
  const changeCart = useCallback((newCart) => { 
    setCart(newCart) 
  }, [])
  
  return( 
    <Child cartFunction={changeCart} cart={cart}/> 
  ) 
} 

const Child = (props) => { 
  // 不需要本地cart状态了
  const handleAddFruit = () => {
    // 如果是直接替换购物车，传新数组即可
    props.cartFunction(["Apples", "Oranges"])
    // 如果是在现有购物车基础上添加，应该基于父组件的cart来更新：
    // props.cartFunction([...props.cart, "Apples", "Oranges"])
  }
  
  return( 
    <button onClick={handleAddFruit}>Add Fruit</button> 
  ) 
}

2. 用useCallback优化函数传递 #

上面代码里用useCallback包裹了changeCart函数，它会缓存这个函数，只有当依赖项（这里是空数组，所以永远不会变化）更新时才会重新创建函数。这样就能避免Child组件因为cartFunction prop变化而触发不必要的重渲染。

3. 可选：用React.memo进一步优化重渲染 #

如果Child组件的逻辑比较复杂，还可以用React.memo包裹Child组件，它会对props做浅比较，只有当props真的变化时才会重新渲染：

const Child = React.memo((props) => { 
  // ... 同上的组件逻辑
})

• 你原来的实现最大的问题其实不是传值方式，而是重复状态带来的逻辑bug和额外的状态维护成本，其次才是不必要的重渲染。
• 优化后的方案中，状态只在父组件维护，子组件仅负责触发更新和渲染，逻辑更清晰，同时也避免了无效渲染，性能自然更优。
• 这种「父组件传回调函数，子组件调用回调传递数据」的方式本身是React中非常常规的组件通信手段，只要做好函数缓存（useCallback）和组件memo优化，完全不会有性能问题。

内容的提问来源于stack exchange，提问作者Advait