React 16.13.1触发两次render

一段很普通的代码,出发了两次render

import React, { useState, useEffect } from 'react'

const MouseTracker: React.FC = () => {

  const [ positions, setPositions ] = useState({x: 0, y: 0})

  useEffect(() => {

    console.log('add effect', positions.x)

    const updateMouse= (e: MouseEvent) => {

      console.log('inner')

      setPositions({ x: e.clientX, y: e.clientY })

    }

    document.addEventListener('click', updateMouse)

    return () => {

      console.log('remove effect', positions.x)

      document.removeEventListener('click', updateMouse)

    }

  },[])

  console.log('before render', positions.x) // 执行了两次

  return (

    <>

    <p>X: {positions.x}, Y : {positions.y}</p>

    </>

  )

}

export default MouseTracker

原因:

最近的react版本,dev模式下render使用的是strict mode,strict mode的通过两次调用constructor和render函数来更好的检测不符合预期的side effects

文档中有表明

Strict mode can’t automatically detect side effects for you, but it can help you spot them by making them a little more deterministic. This is done by intentionally double-invoking the following functions:

Class component constructor, render, and shouldComponentUpdate methods
Class component static getDerivedStateFromProps method
Function component bodies
State updater functions (the first argument to setState)
Functions passed to useState, useMemo, or useReducer

下列函数会执行两次

类组件的constructor,render和shouldComponentUpdate方法
类组建的静态方法getDerivedStateFromProps
函数组件方法体
状态更新函数(setState的第一个参数)
传入useState,useMemo或useReducer的函数

在production环境下不会这样,所以不用担心

巴特西

React 16.13.1触发两次render

最新文章

热门文章