为什么我的React组件渲染了两次？_React组件渲染两次_我的react组件渲染了1个子组件 - 腾讯云开发者社区

React 组件渲染两次的原因可能有以下几种：

1. React.StrictMode

如果你的应用使用了 <React.StrictMode>，React 会在开发模式下对组件进行额外的检查和警告，这可能导致组件渲染两次。这是正常现象，不会影响生产环境。

import React from 'react';

function App() {
  return (
    <React.StrictMode>
      <MyComponent />
    </React.StrictMode>
  );
}

2. 组件状态更新

如果组件的状态在短时间内多次更新，React 会重新渲染组件。例如：

import React, { useState } from 'react';

function MyComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    setCount(count + 1);
  }, [count]);

  return <div>{count}</div>;
}

在这个例子中，setCount(count + 1) 会导致 count 状态更新，从而触发组件重新渲染。

3. 父组件重新渲染

如果父组件重新渲染，子组件也会重新渲染，即使子组件的 props 没有变化。

import React from 'react';

function ParentComponent() {
  const [parentState, setParentState] = useState(0);

  return (
    <div>
      <button onClick={() => setParentState(parentState + 1)}>Update Parent</button>
      <ChildComponent />
    </div>
  );
}

function ChildComponent() {
  return <div>Child Component</div>;
}

在这个例子中，点击按钮会更新 ParentComponent 的状态，从而导致 ChildComponent 重新渲染。

4. 使用 PureComponent 或 React.memo

如果你希望避免不必要的渲染，可以使用 React.PureComponent 或 React.memo。

import React, { memo } from 'react';

const MyComponent = memo((props) => {
  return <div>{props.text}</div>;
});

解决方法

检查状态更新：确保状态更新是必要的，避免不必要的状态更新。
使用 PureComponent 或 memo：对于不需要每次都重新渲染的组件，可以使用 React.PureComponent 或 React.memo。
避免在 useEffect 中依赖自身状态：确保 useEffect 的依赖项是必要的，避免循环更新。

示例代码

import React, { useState, memo } from 'react';

const MyComponent = memo((props) => {
  return <div>{props.text}</div>;
});

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log('Component rendered');
  });

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <MyComponent text={`Count: ${count}`} />
    </div>
  );
}

export default App;