React--重新渲染后保持风格。

Question

我正在学习react，并建立了一个简单的程序，生成数组并改变它的颜色。我不明白为什么当我生成新的数组时，前一个数组的颜色会被保留。我以为生成新的数组时，因为状态发生了变化，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;

EDIT: 我通过添加以下函数来解决这个问题

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

每当数组被重置时，我就调用它。

但我还是不明白为什么要保留样式。

Answer 1

这样做是错误的--一般来说，在react中，所有可以改变的值都应该作为状态来处理。而所有影响组件样式的值都应该作为道具传递给组件--作为一般的经验法则，你应该避免像以下这样的事情 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 -- **/
    );
}

如果你想在每次生成数组时重置颜色，那么你可以调用 setColor("<whatever color you want>") 内侧 generateArray() 函数，然后每次生成一个数组时，颜色会被重置为该颜色。那么每次生成数组时，颜色都会被重置为该颜色。

至于为什么样式会保持不变，那是因为你每次生成的都是同一个数组。React很聪明，它知道不需要重新渲染一个与上次渲染值完全相同的componentdiv，所以不会调用重新渲染。

Answer 2

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;