0

我正在按照本教程演示 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;
4

1 回答 1

0

在您提到的视频中的示例中，Button 组件不会更改，因为道具始终保持不变。在您的示例中，increment保持不变，但问题是bgColor每次点击都会发生变化。

这意味着，如果您只渲染主组件而不渲染 Button 组件，则背景必须相同，但因为它每次接收不同的背景颜色，这将没有意义。

如果 props 发生变化，React 总是会重新渲染组件（如果你没有实现自定义的 shouldUpdate 生命周期方法）。

于 2019-10-17T19:17:05.623 回答