如何通过引用而不是值传递父级的反应道具/状态？

Question

我正在使用反应钩子并尝试将父级的 state 传递给多个组件。 问题是当我想通过 state 的组件本身是 state 的一部分时。 我创建了一个示例来说明我的问题，我有一个按钮可以增加计数器并将另一个按钮附加到列表中。 我想查看显示的按钮列表，并且都从 state 读取相同的计数器值，但是当我 append 一个新按钮时，计数器的值总是在创建按钮时按值传递，它不更新。 在我的项目中（此处未显示），我通过将函数传递给组件以检索父 state 并手动更新所有组件来规避此问题，但是这样做我觉得我真的违反了不必要的反应的设计原则复杂的代码会导致更多的问题。

我的按钮示例：

import React from 'react'

function Button(props){
  return <button onClick={()=>{
    // increment the counter
    props.setcounter(cur=>cur+1);

    // add another button
    // these props are not passed by reference: how do I pass these by reference?
    props.setitems(items=>items.concat(<tr><td><Button {...props}/></td></tr>))
    }}>
    {props.counter}
    </button>
}
function App() {
  const [items,setitems]=React.useState([]);
  const [counter,setcounter]=React.useState(0);
  return (
    <div className="App">
      <table>
    <th><td>Button with props passed by reference:</td></th>
    <tr><td><Button counter={counter} setcounter={setcounter} setitems={setitems} /></td></tr>
      </table>
      <table>
       <th><td>Button with props passed by value:</td></th>
    {items}
      </table>
    </div>
  );
}

export default App;

 function Button(props){ return <button onClick={()=>{ // increment the counter props.setcounter(cur=>cur+1); // add another button // these props are not passed by reference: how do I pass these by reference? props.setitems(items=>items.concat(<tr><td><Button {...props}/></td></tr>)) }}> {props.counter} </button> } function App() { const [items,setitems]=React.useState([]); const [counter,setcounter]=React.useState(0); return ( <div className="App"> <table> <th><td>Button with props passed by reference:</td></th> <tr><td><Button counter={counter} setcounter={setcounter} setitems={setitems} /></td></tr> </table> <table> <th><td>Button with props passed by value:</td></th> {items} </table> </div> ); } ReactDOM.render( <App />, document.getElementById("root") );

 <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> <div id="root"></div>

它能做什么：

当我多次单击顶部按钮时，它每次都会使用计数器的当前值创建一个新按钮，但它不会通过引用传递，因此不会在计数器值更新时更新。

我想要它做什么：

所有新创建的按钮都应该具有相同的计数器值，因为我希望它通过引用传递，而不是单击按钮时的值。 当我单击任何按钮时，应该创建一个新按钮，并且每个按钮上的值都应该更新以匹配新的计数器值。

Answer 1

问题是当我想通过 state 的组件本身是 state 的一部分时。

这确实是问题所在，并且正如您所发现的那样，React 中的反模式会产生陈旧的值。 理想情况下，您不应该在 state 中保留任何组件，如果您这样做，它们必须是完全纯净的（即在其生命周期内不会收到新的道具）。

当您调用此 state 设置器时实际发生了什么：

props.setitems(items=>items.concat(<tr><td><Button {...props}/></td></tr>))

这是吗，假设它是第一次被调用：

<Button counter={0} ... />

不仅该按钮的计数器只有值0 ，而且它创建的任何按钮都将具有相同的值。 你所说的在 React 上下文中实际上没有意义，因为整个要点是打破引用（以及更普遍的严格相等）以触发重新渲染和效果。

我们希望保持我们的 state 不可变，这意味着重新创建它的任何部分，这些部分在每次渲染时都会发生变化。 对于您正在做的工作，您必须通过在创建新按钮时循环与items长度一样多的次数来重新创建整个按钮存储。

您应该考虑的方式是如何从数据中派生 UI，而不是将其存储为数据：

 function Button(props){ return <button onClick={()=>{ props.setcounter(cur=>cur+1); props.setitems(items=> [...items, 1]) }}> {props.counter} </button> } function App() { const [items,setitems]=React.useState([1]); const [counter,setcounter]=React.useState(0); return ( <div className="App"> {items.map(() => <Button counter={counter} setcounter={setcounter} setitems={setitems}/>)} </div> ); } ReactDOM.render( <App />, document.getElementById("root") );

 <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> <div id="root"></div>