反應組件背后顯示 state 變化的原因是什么？

Question

當我們在 react 項目中有很多組件時，有時我們會使用多個預制組件來制作頁面。 在組件內部使用onChange並顯示state的結果時，在這種情況下，組件的哪些功能允許state的值呈現以及當我們在其他組件中有多個組件時它是如何工作的。 這是一個前...

 function Component() {
  const [value, setValue] = React.useState()
  const handleChange = val => {
    setValue(val)
  }
 return (
    <React.Fragment>
      <Compo1  //perform adding +1 
        onChange={handleChange}
      />
      Value: {value} // 1
     {console.log("value", value)} // showing right value
      <Compo2>
        <Compo3>
          <Compo1  //perform adding +1
            onChange={handleChange}
          />
          Value:{value} // undefined
          {console.log("value", value)} // showing right value
        </Compo3>
        {console.log("value", value)} // showing right value
      </Compo2>
    </React.Fragment>
  )
}
render(<Component />)

在這種情況下，為什么console顯示正確的值但state變量value顯示未定義。

Answer 1

我可以讓該代碼執行您所說的唯一方法是當您在 Compo3 上錯誤地使用React.memo時：

 const Compo1 = ({ onChange }) => ( <button onClick={() => onChange(Date.now())}>+</button> ); const Compo2 = ({ children }) => <div>{children}</div>; const Compo3 = React.memo( function Compo3({ children }) { return <div>{children}</div>; }, () => true//never re render unless you re mount ); function Component() { const [value, setValue] = React.useState(88); const handleChange = React.useCallback(() => { setValue((val) => val + 1); }, []); return ( <React.Fragment> <Compo1 //perform adding +1 onChange={handleChange} /> works: {value}----- <Compo2> <Compo3> <Compo1 //perform adding +1 onChange={handleChange} /> broken:{value}----- </Compo3> </Compo2> </React.Fragment> ); } ReactDOM.render( <Component />, 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>

如果你用shouldComponentUpdate做一些古怪的事情，也許你也可以這樣做

組件將在以下情況下呈現：

1. 當父級渲染子級並且子級是功能組件時（未包裝在 React.memo 中）
2. 當父級使用與前一個渲染不同的道具值渲染子級時。
3. 當[value,setValue]=useState()中的值或this.state改變時（當 state 改變時）。
4. 當value = useContext(someContext)中的 someContext 發生變化時（即使 value 沒有變化）。
5. 在大多數情況下，當 value value = useCustomHoom()中的值發生變化時，但這並不能保證每個鈎子。
6. 當 Parent 渲染並向 Child 傳遞與前一個渲染不同的 key prop 時（參見 2）。 這也會導致 Child 卸載並重新安裝。

在示例中，Compo3 想要重新渲染，因為父級由於 state 更改而重新渲染並傳遞了不同的道具（props.children）。

Compo3 不是函數式組件，因為它包裝在 React.memo 中。 這意味着 Compo3 只有在 props 改變時才會重新渲染（純組件）。

作為第二個參數傳遞給 React.memo 的 function 可用於自定義比較以前的道具與當前道具，如果 function 返回 true 則告訴 React 道具已更改，如果返回 false 則告訴 React 道具未更改.

function 總是返回 true ，所以 React 永遠不會被告知 props 改變了。