为什么重新渲染后保留样式?

Question

我正在学习反应并构建一个简单的程序来生成数组并更改其颜色。我不明白为什么当我生成新数组时会保留前一个数组的颜色。我认为发生这种情况是因为当我生成新数组时状态已更改，反应将重新渲染组件，并且颜色将设置回默认值。我错过了什么？

这是我的代码：

import React, { useState, useEffect } from 'react';
const Dummy2 = () => {
const [arr, setArr] = useState([]);
useEffect(() => {
generateArray();
}, []);
const generateArray = () => {
const temp = [];
for(let i = 1; i < 11; i++) {
temp.push(i * 2);
}
setArr(temp);
}
const changeColor = () => {
const arrayElements = document.getElementsByClassName('array-element');
for(let i = 0; i < arrayElements.length; i++) {
arrayElements[i].style.backgroundColor = 'red';
}
}
return (
<div>
<div className="array-container">
{arr.map((value, idx) => (
<div className="array-element"
key={idx}
style={{height: `${value}px`,
weight: `${value}px`,
margin: '1px 1px',
backgroundColor: 'blue'}}
></div>))
}
</div>
<div>
<button onClick={() => changeColor()}>change-color!</button>
<button onClick={() => generateArray()}>new-array</button>
</div>
</div>
);
}
export default Dummy2;

编辑：我设法通过添加以下功能来解决此问题

const resetColors = () => {
const arrayBars = document.getElementsByClassName('array-element');
for(let i = 0; i < arrayBars.length; i++) {
arrayBars[i].style.backgroundColor = 'blue';
}
}

每当重置数组时，我都会调用它。

但我仍然不明白为什么要保留样式。

Answer 1

这是错误的方法 - 通常，在 react 中，所有可以更改的值都应作为状态处理。并且所有影响组件样式的值都应作为 props 传递给组件 - 作为一般经验法则，您应该避免使用getElementById和element.style =之类的事情。而是通过道具传递此信息。

首先，您可以使用useState处理颜色，然后在单击按钮时setState该颜色。然后可以将颜色值传递到要设置样式的div 的样式道具中。

const Dummy2 = () => {
const [arr, setArr] = useState([]);
const [color, setColor] = useState("blue"); // Initialise color to "blue"
/** -- snip -- **/
const changeColor = () => {
setColor("red"); // Set color here
}
return (
/** -- snip -- **/
<div className="array-element"
key={idx}
style={{height: `${value}px`,
weight: `${value}px`,
margin: '1px 1px',
backgroundColor: color, // pass in color here
}}
/** -- snip -- **/
<button onClick={() => changeColor()}>change-color!</button>
/** -- snip -- **/
);
}

如果您希望每次生成数组时重置颜色，则可以在generateArray()函数中调用setColor("<whatever color you want>")。然后，每次生成数组时，颜色都将重置为该颜色。

至于为什么样式保持不变，那是因为你每次都生成相同的数组。React 足够聪明，知道它不需要重新渲染与上次渲染具有完全相同值的组件/div，因此不会调用重新渲染。

Answer 2

React 组件通常在状态或 props 更改时重新渲染。

因此，您应该更改状态以查看更新。

import React, { useState, useEffect } from 'react';
const Dummy2 = () => {
const [arr, setArr] = useState([]);
const [color,setColor] = useState("blue");
useEffect(() => {
generateArray();
}, []);
const generateArray = () => {
const temp = [];
for(let i = 1; i < 11; i++) {
temp.push(i * 2);
}
setArr(temp);
};
const changeColor = () => {   
setColor("red");
};
return (
<div>
<div className="array-container">
{arr.map((value, idx) => (
<div className="array-element"
key={idx}
style={{height: `${value}px`,
weight: `${value}px`,
margin: '1px 1px',
backgroundColor: ${color}}}
></div>))
}
</div>
<div>
<button onClick={() => changeColor()}>change-color!</button>
<button onClick={() => generateArray()}>new-array</button>
</div>
</div>
);
}
export default Dummy2;