react function組件中重新渲染的邏輯

Question

我有一個簡單的 App 組件

export default function App() {
  const [count, changeCount] = useState(0)
  const onIncreaseClick = useCallback(() => {
    changeCount(count + 1)
  }, [count]) 

  const onPress = useCallback(() => {
    alert('pressed')
  }, [])

  return (<>
    <button onClick={onIncreaseClick}>Increase</button>
    <ButtonPressMe onClick={onPress} />
  </>);
}

我希望onPress變量始終包含相同的鏈接，因為參數永遠不會改變

而且我希望我的ButtonPressMe組件將只渲染一次 - 與第一個 App 組件渲染......因為它只有一個道具，這個道具的值永遠不會改變......因此不需要重新渲染組件。 正確的？

在我的 ButtonPressMe 組件中，我使用 console.log 檢查它

const ButtonPressMe = ({ onClick }) => {
  console.log('Button press Me render')
  return <button onClick={onClick}>Press me</button>
}

與我的預期相反，每次按下“增加”按鈕后父組件重新呈現時，它都會重新呈現。

我誤解了什么嗎？

沙箱檢查

Answer 1

與我的預期相反，每次按下“增加”按鈕后父組件重新呈現時，它都會重新呈現。

我誤解了什么嗎？

這是 react 的默認行為：當一個組件渲染時，它的所有子組件也會渲染。 如果你想讓組件比較它的新舊 props 並在它們沒有改變的情況下跳過渲染，你需要給子組件添加 React.memo：

const ButtonPressMe = React.memo(({ onClick }) => {
  return <button onClick={onClick}>Press me</button>
})

Answer 2

默認情況下，當父組件重新渲染時，其所有子組件也會重新渲染。

useCallback鈎子將保留onPress function 的標識，但這不會阻止重新渲染ButtonPressMe組件。 為了防止重新渲染，使用了React.memo() 。 useCallback鈎子用於避免在每次父組件重新渲染時將新引用傳遞給 function，作為子組件的道具。

在您的情況下， React.memo和useCallback掛鈎的組合將防止重新渲染ButtonPressMe組件。

 function App() { const [count, changeCount] = React.useState(0); const onIncreaseClick = React.useCallback(() => { changeCount(count + 1); }, [count]); const onPress = React.useCallback(() => { alert("pressed"); }, []); return ( <div> <button onClick={onIncreaseClick}>Increase</button> <ButtonPressMe onClick={onPress} /> </div> ); } const ButtonPressMe = React.memo(({ onClick }) => { console.log("Button press Me render"); return <button onClick={onClick}>Press me</button>; }); ReactDOM.render(<App/>, document.getElementById("root"));

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

Answer 3

React 中的默認行為是在發生任何更改時更改應用程序中的所有內容，在您的情況下，您正在更改自定義按鈕的父級的 state，因此 React 會重新呈現包括您的按鈕在內的所有內容。

你可以在這里找到關於 React 如何決定重新渲染組件的解釋： https://lucybain.com/blog/2017/react-js-when-to-rerender/#:~:text=A%20re%2Drender% 20can%20only,should%20re%2Drender%20the%20component .