小编Djo*_*vic的帖子

我开始学习Spring注解。我目前正在配置类中使用@PropertySource注释来解析属性值，一切正常，但后来我读到了有关PropertySourcesPlaceholderConfigurer.

我何时或为何应该使用它？

我有这个组件，可以根据组件收到的道具颜色以不同的颜色显示。

const Card = ({color}) => {
  return (
    <p style={{color}}>Some Text</p>
  )
}

我有这些全局 css 变量：

:root{
    --bg-clr-1: #E7F8F8;
    --card-clr-red: #F03E3E;
    --card-clr-violet: #7950F2;
    --card-clr-green: #12B886;
    --text-clr: #333;
}

有没有办法将此 css 变量作为 prop 传递给“Card”组件？就像这样：

import variableStyles from '../../styles/globalVariables.css'

const App = () => {
  return(
    <Card color={variableStyles['--text-clr']} />
  )
}

我最近开始学习 Javascript 函数式编程，其中很有价值的一件事是不变性。保持不变性的一种方法是，当我们想要修改某个对象时，我们首先创建一个副本，然后修改该副本并返回它，例如：

const person = {
    firstName: 'John',
    lastName: 'Smith',
}

const modifyFName = obj => {
    const objCopy = {...obj};
    objCopy.firstName = 'James';
    return objCopy;
}

console.log(modifyFName(person)) // {firstName: 'James', lastName: 'Smith'}
console.log(person) // {firstName: 'John', lastName: 'Smith'}

但是，如果我想修改一些深层嵌套的对象，创建像上面这样的浅拷贝不会有太大的区别，例如：

const person = {
    firstName: 'John',
    lastName: 'Smith',
    parents: {
        mom: {
            firstName: 'Jennifer',
            lastName: "Swift"
        },
        dad: {
            firstName: 'Tom',
            lastName: 'Cartman'
        }
    }
}

const modifyDadName = obj => {
    const objCopy = {...obj};
    objCopy.parents.dad.firstName = 'Aurelion'; …

我是 React 新手，所以我想知道。我正在创建这个包含 200 多个项目数组的组件，并且我不想立即渲染这些项目，这就是我使用无限滚动功能的原因，以便当用户接近列表末尾时渲染新项目。但是，当由于状态更改而发生这种情况时，以前的项目也会重新渲染，因为创建了新的对象数组。是否有某种方法可以对此进行优化，以便仅渲染新项目而前一个项目保持不变？

这是我的组件，它使用无限滚动并显示项目：

import styles from "./CountriesSection.module.css";
import { useEffect, useMemo, useRef, useState } from "react";
import { useInfinityScroll } from "../hooks/useInfinityScroll";
import CountriesList from "./CountriesList";

const data = new Array(240).fill({});

const CountriesSection = () => {
  const [currentItemsDisplayed, setCurrentItemsDisplayed] = useState(40);

  const componentsToShow = useMemo(() => {
    return data.slice(0, currentItemsDisplayed);
  }, [currentItemsDisplayed]);

  const divRef = useRef(null);
  let isVisible = useInfinityScroll(divRef);

  useEffect(() => {
    if (!isVisible) return;
    setCurrentItemsDisplayed((prevVal) => prevVal + 20);
  }, [isVisible]);

  return (
    <> …