react触发组件重新渲染

在 React 中，重新渲染界面通常是因为组件的状态（state）或属性（props）发生了变化。以下是一些常见的情况和解决方法：

1.使用 useState 和 useEffect：

useState 用于声明状态变量。
useEffect 用于执行副作用，例如数据获取或订阅。

import React, { useState, useEffect } from ‘react’;

const MyComponent = () => {
const [data, setData] = useState(null);

useEffect(() => {
// 模拟数据获取
fetch(‘https://api.example.com/data’)
.then(response => response.json())
.then(data => setData(data));
}, []); // 空数组表示只在组件挂载和卸载时执行

return (

{data ?

{data.content}

:

Loading…

}

);
};

export default MyComponent;
2.使用 props 触发重新渲染：

当父组件传递的 props 发生变化时，子组件会重新渲染。

父组件代码：

import React, { useState } from ‘react’;
import MyComponent from ‘./MyComponent’;

const ParentComponent = () => {
const [count, setCount] = useState(0);

return (

<button onClick={() => setCount(count + 1)}>Increment

);
};

export default ParentComponent;
子组件代码：

import React from ‘react’;

const MyComponent = ({ count }) => {
return (

Count: {count}

);
};

export default MyComponent;
3.强制重新渲染：

有时你可能需要强制重新渲染组件，可以使用 useState 来触发重新渲染。例如：

import React, { useState } from ‘react’;

const MyComponent = () => {
const [_, setTick] = useState(0);

const forceUpdate = () => {
setTick(tick => tick + 1);
};

return (

Force Update

);
};

export default MyComponent;
条件渲染：

通过条件判断来决定渲染什么内容。条件渲染可以根据状态或 props 的变化来动态调整界面。

import React, { useState } from ‘react’;

const MyComponent = () => {
const [isLoggedIn, setIsLoggedIn] = useState(false);

return (

{isLoggedIn ?

Welcome back!

:

Please log in.

}
<button onClick={() => setIsLoggedIn(!isLoggedIn)}>
{isLoggedIn ? ‘Logout’ : ‘Login’}

);
};

export default MyComponent;