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

Question

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

这是我的代码：

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 组件通常在其状态或道具更改时重新渲染。

所以你应该改变你的状态才能看到更新。

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;

Answer 2

这是错误的做法 - 通常，在 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 足够聪明，知道它不需要重新渲染与上次渲染具有完全相同值的 component/div，因此不会调用重新渲染。

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

Why the styling is kept after re-rendering?

styling

reactjs

react-hooks