Reactjs 使用React.memo和useCallback防止函数导致重新呈现

下面我将演示react的“useCallback”钩子和react.memo，以防止不必要地呈现函数。为了证明这个概念，我们使用useRef来控制渲染的数量。这只对函数起作用，但我添加了一个函数来随机化按钮背景颜色，我似乎无法阻止这两个函数的渲染

    import React,{useState, useCallback, useRef} from 'react';
import './App.css';

const randomColor = () => `rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255}`

const Button = React.memo(({increment, bgColor}) => {
const count = useRef(0)
console.log(count.current++)
return(
    <button onClick={increment} style={{backgroundColor: bgColor}}>increment</button>
  )
})

const App = React.memo(() => {
  const [count, setCount] = useState(0)
  const [color, setColor] = useState(`rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255}`)



  const increment = useCallback(() => {  
    setCount(previousCount => previousCount + 1)
    setColor(randomColor)
  },[setCount,setColor])

  return (
    <div className="App">
      <header className="App-header">
        <h2>{count}</h2>
        <Button increment={increment} bgColor={color}>increment</Button>
      </header>
    </div>
  );
})

export default App;

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

    import React,{useState, useCallback, useRef} from 'react';
    import './App.css';

    const randomColor = () => `rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255}`

    const Button = React.memo(({increment, bgColor}) => {
    const count = useRef(0)
    console.log(count.current++)
    return(
        <button onClick={increment} style={{backgroundColor: bgColor}}>increment</button>
      )
    })

    const App = React.memo(() => {
      const [count, setCount] = useState(0)
      const [color, setColor] = useState(`rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255}`)



      const increment = useCallback(() => {  
        setCount(previousCount => previousCount + 1)
        setColor(randomColor)
      },[setCount,setColor])

      return (
        <div className="App">
          <header className="App-header">
            <h2>{count}</h2>
            <Button increment={increment} bgColor={color}>increment</Button>
          </header>
        </div>
      );
    })

    export default App;

import React，{useState，useCallback，useRef}来自“React”；
导入“/App.css”；
const randomColor=（）=>`rgb（${Math.random（）*255}，${Math.random（）*255}，${Math.random（）*255}`
const Button=React.memo（{increment，bgColor}）=>{
const count=useRef（0）
console.log（count.current++）
返回(
增量
)
})
const App=React.memo（（）=>{
const[count，setCount]=useState（0）
const[color，setColor]=useState（`rgb（${Math.random（）*255}，${Math.random（）*255}，${Math.random（）*255}`）
const increment=useCallback（（）=>{
setCount（previousCount=>previousCount+1）
设置颜色（随机颜色）
}，[setCount，setColor]）
返回(
{count}
增量
);
})
导出默认应用程序；
从“React”导入React，{useState，useCallback，useRef}；
导入“/App.css”；
const randomColor=（）=>`rgb（${Math.random（）*255}，${Math.random（）*255}，${Math.random（）*255}`
const Button=React.memo（{increment，bgColor}）=>{
const count=useRef（0）
console.log（count.current++）
返回(
增量
)
})
const App=React.memo（（）=>{
const[count，setCount]=useState（0）
const[color，setColor]=useState（`rgb（${Math.random（）*255}，${Math.random（）*255}，${Math.random（）*255}`）
const increment=useCallback（（）=>{
setCount（previousCount=>previousCount+1）
设置颜色（随机颜色）
}，[setCount，setColor]）
返回(
{count}
增量
);
})
导出默认应用程序；

在您提到的视频示例中，按钮组件没有改变，因为道具一直保持不变。在您的示例中，

增量保持不变，但问题是，
bgColor
随着每次单击而改变

这意味着，如果只渲染主组件而不渲染按钮组件，则背景必须相同，但由于每次都接收不同的背景颜色，因此没有意义

如果道具发生变化，React将始终重新呈现组件（如果您没有实现自定义shouldUpdate生命周期方法）。
您可以发布useRandomColor源代码吗？抱歉，刚刚将其添加到Codebase中。现在您可以解释它了。当然，组件必须重新呈现，才能进行颜色变化。谢谢您的时间