V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Yukee798
V2EX  ›  前端开发

请教一下前辈们一个 React 函数组件的性能优化问题

  •  
  •   Yukee798 · 2021-10-11 18:38:23 +08:00 · 1004 次点击
    这是一个创建于 1158 天前的主题,其中的信息可能已经有所发展或是发生改变。
    const Button = React.memo(({ onClick }) => {
      console.log('Button render')
      return <button onClick={(e) => onClick(e)}>+1</button>
    });
    
    function App() {
      const [count, setCount] = useState(0);
      
      const handleClick = useCallback(() => {
        setCount(count + 1);
      }, [count])
      
      return (
        <div>
          <h1>{count}</h1>
          <Button onClick={handleClick}>Click</Button>
        </div>
      )
    }
    

    每次点击按钮 App 组件肯定会重新渲染,但是也会导致 Button 组件重新渲染很显然这是没必要的。

    如果在类组件中可以像下面这样做:

    const Button = React.memo(({ onClick }) => {
      console.log('Button render')
      return <button onClick={(e) => onClick(e)}>+1</button>
    });
    
    class App extends Component {
      state = { count: 0 };
    
      handleClick = () => {
        this.setState({ count: this.state.count + 1 });
      }
    
      render() {
        return (
          <div>
            <h1>{this.state.count}</h1>
            <Button onClick={this.handleClick}>Click</Button>
          </div>
        )  
      }
    }
    

    这样无论点击按钮多少次,只有 App 组件会重新渲染,不会导致 Button 组件重新渲染。

    请教一下前辈们在第一段代码里面怎么改才能实现上面这个效果。

    2 条回复    2021-10-11 18:44:15 +08:00
    mxT52CRuqR6o5
        1
    mxT52CRuqR6o5  
       2021-10-11 18:39:53 +08:00   ❤️ 2
    ```
    const handleClick = useCallback(() => {
    setCount(count=>count + 1);
    }, [])
    ```
    Yukee798
        2
    Yukee798  
    OP
       2021-10-11 18:44:15 +08:00
    @mxT52CRuqR6o5 #1 十分感谢!最开始写的是:
    ```
    const handleClick = useCallback(() => {
    setCount(count + 1);
    }, [])
    ```
    就出现了计数器无法累加的 bug,忘记还能传入一个函数了。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2980 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 11:39 · PVG 19:39 · LAX 03:39 · JFK 06:39
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.