Question

我想知道是否有人可以帮忙...我有一个下面的模板/样板，我正在为一个个人学习项目工作（锁定！）

下面的代码可以很好地加载...但是我添加了console.log，所以我可以看到数据正常运行，并且我注意到每10秒钟（为读取设置的刷新率）它记录数据3每次重复（当我放置图形或视觉效果时，会造成难看的渲染）

有人可以帮助我理解为什么每次将其重新渲染3次吗？

import React, {useState,useEffect} from 'react';
import AppContext from './context'

function App() {

  const [state,setState] = useState([])
  const [isLoading,setIsLoading] = useState(true)
  const [isError,setIsError] = useState(false)
  const appRefreshRate = 10000

  useEffect(() => {

    let interval

    const fetchData = async () => {

      setIsLoading(true)

      try {
        const res = await fetch(`myapiaddress`, {
          method: 'POST',
          mode: 'cors',
          body: JSON.stringify({
            client: 'xxx',
          }),
          headers: {
            'content-type': 'application/json',
            credentials: 'include'
          }
        })
        res.json().then(res => {
          let data = JSON.parse(res)
          setState({
            data1: data.recordsets[0],
          })
        })
      } catch (error) {
        setIsError(true)
      }
      setIsLoading(false)
    }

    fetchData()

    interval = setInterval(fetchData, appRefreshRate)
    return () => clearInterval(interval)
  }, [appRefreshRate])

  const appContext = {
    state: state
  }

console.log(state)

  return (
    <AppContext.Provider value={appContext}>
        Test
    </AppContext.Provider>
  );
}

export default App;

Answer 1

App组件是一个函数，每次需要渲染时都会被调用。

每次调用此函数时，都会执行内部代码，在这种情况下，将导致

console.log(state)

被叫。

很多事情都可以触发所谓的渲染（执行功能App()）

其中之一是使用useState钩子定义的变量值的更改。

每当您调用更改基础变量值的setter函数时，都需要再次呈现该组件，因为这些值的更改可能会导致不同的外观或应用程序状态。

在您的情况下，您有3个实例可以修改状态：


setIsLoading(true) // triggers a render

setState({ data1: data.recordsets[0] }) // triggers a render

setIsLoading(false)  // triggers a render

这将调用App() 3次，每次使用状态变量中的更新值，因此运行您的console.log(state)指令。

每次提取，功能组件都会重新渲染3次

1 个答案: