Javascript 在React功能组件中声明静态变量的最佳方法是什么？

从现在起，在React功能组件中声明变量的最佳方法是什么-RFC？它和这个不一样

对于我来说，有几种声明变量的方法`

在RFC中用const声明它-如果我们将其传递给HeavyComponent组件，那么在每次渲染时，它将创建一个新引用，HeavyComponent也将渲染。这不是一个好的选择。 在RFC中使用useRef声明-在后续渲染中引用将是相同的，这很好，但另一方面，我们使用的是useRef内部方法函数调用-这在幕后完成了一些工作 在RFC外部作用域之外使用const声明-在本例中，引用将再次相同，因为它将取自闭包，并且我们不使用useRef方法。但是，在这种特殊情况下，我们在外部作用域中声明该变量，它不会被垃圾收集，如果我们经常使用这种情况，将导致内存泄漏。 我知道，每种情况都有其利弊。但我们什么时候才能坚持某种选择呢

更新 这是一个例子

export const UnemployedEmployeesReportPaper = React.memo((props: IProps) => {
    const [filterText, setFilterText] = useState('');
    const [tableData, setTableData] = useState([]);

    const headerColumns = useRef([
        { children: 'First Name', width: 240, flexGrow: 1, sortValue: item => item.FirstName },
        { children: 'Last Name', width: 240, flexGrow: 1, sortValue: item => item.LastName },
        { children: 'Last day of employment', width: 240, flexGrow: 1, sortValue: item => moment(item.Since).format('L') },
    ]).current;

    const filterEmployee = (event: SyntheticEvent): void => {
        const { value } = event.target;
        const { payload } = props.unemployedEmployees;

        const newTableData = payload.filter((row: ISimpleEmployeeRowData): boolean =>
            (row.FirstName).toLowerCase().includes(value.toLowerCase()));

        setTableData(newTableData);
        setFilterText(value);
    };

    const rows = useMemo(() => {
        return tableData.map(entry => {
            return {
                data: [
                    { children: entry.FirstName },
                    { children: entry.LastName },
                    { children: entry.Since },

                ],

                onDoubleClick: (): void => props.goToEmployees(entry.ID),
                // Empty onClick will turn the hovering of table on
                onClick: () => {}
            };
        });
    }, [tableData]);

    useEffect(() => {
        if (props.unemployedEmployees.payload) {
            setTableData(props.unemployedEmployees.payload);
        }

        setFilterText('');
    }, [props.unemployedEmployees]);



    return (
        <VTable
           sortable
           striped
           rowHeight={36}
           headerColumns={headerColumns}
           rows={rows}
        />);
});

---

这里使用的是useRef，但我不确定它是否比在RFC之外声明好

在功能组件中存储变量的最佳方式取决于您的用例

在大多数情况下，您可以使用useRef hook，因为它在函数的每个呈现上返回相同的变量实例

但是，您也可以定义一个变量，并使用UseMoom钩子指定其值

像

您必须注意，useRef可以帮助您解决闭包问题，并且在您想要使用受闭包影响的变量时非常方便。例如，在依赖项为空的useEffect中定义的setInterval函数中使用closure中的值

另一方面，UseMoom将帮助您防止每次重新呈现时变量的引用更改。一个常见的用例是为ContextProvider提供一个记忆值

更新：

对于您的用例，有两种方法来定义HeaderColumn

在组件外部作为常量。当值不需要更改，也不需要使用闭包中的任何值时，将其声明为功能组件的ConstantToutSide是有意义的

作为函数中的一个memozied值

---

您必须注意，当您使用闭包中的值时，使用UseMoom将值分配给headerColumns是有意义的

在功能组件中存储变量的最佳方式取决于您的用例

在大多数情况下，您可以使用useRef hook，因为它在函数的每个呈现上返回相同的变量实例

但是，您也可以定义一个变量，并使用UseMoom钩子指定其值

像

您必须注意，useRef可以帮助您解决闭包问题，并且在您想要使用受闭包影响的变量时非常方便。例如，在依赖项为空的useEffect中定义的setInterval函数中使用closure中的值

另一方面，UseMoom将帮助您防止每次重新呈现时变量的引用更改。一个常见的用例是为ContextProvider提供一个记忆值

更新：

对于您的用例，有两种方法来定义HeaderColumn

在组件外部作为常量。当值不需要更改，也不需要使用闭包中的任何值时，将其声明为功能组件的ConstantToutSide是有意义的

作为函数中的一个memozied值

您必须注意，当您使用闭包中的值时，使用UseMoom将值分配给headerColumns是有意义的

在您的用例中，HeaderColumn应该在外部范围内：

const headerColumns = [
  {
    children: "First Name",
    width: 240,
    flexGrow: 1,
    sortValue: (item) => item.FirstName,
  },
  // more
];

export const UnemployedEmployeesReportPaper = React.memo((props) => {});

如果它是只读对象，那么它应该在外部作用域中

看

在您当前的情况下，如果您有N个UnemployedEmployeesReportPaper组件，那么您将有N个headerColumns引用，而在外部作用域上，所有组件将共享同一个不可变对象immutable，因为在您的用例中，它充当只读对象。

在您的用例中，headerColumns应该在外部作用域中：

const headerColumns = [
  {
    children: "First Name",
    width: 240,
    flexGrow: 1,
    sortValue: (item) => item.FirstName,
  },
  // more
];

export const UnemployedEmployeesReportPaper = React.memo((props) => {});

如果它是只读对象，那么它应该在外部作用域中

看

---

在您当前的情况下，如果您有N个UnemployedEmployeesReportPaper组件，那么您将有N个headerColumns引用，而在外部作用域上，所有组件将共享同一个不可变对象immutable，因为在您的用例中，它充当只读对象。

您想要的答案是什么？每个应用程序的用例是什么？就好像你知道这些道具/缺点一样，如果你注意到我的标题，也注意到问题的底部，我就提到了我需要什么。最好的方法是什么？我确信，有些情况下，如果它们是首选的，那么用例是什么？你有什么特别的吗

---

---

我不知道你应该怎么做？我已经用了所有的方法，但不知道在某些情况下哪一种更好。我想说的是，让我们看看Stackoverflow中的某些情况，你知道，这是一个应该问的问题。我可以提出一些案例，但它们是武断的。看看你在寻找什么样的答案？每个应用程序的用例是什么？就好像你知道这些道具/缺点一样，如果你注意到我的标题，也注意到问题的底部，我就提到了我需要什么。最好的方法是什么？我确信，有些情况下，如果它们是首选的，那么用例是什么？你有什么特别的，你不知道你应该做什么吗？我用了所有的，但不知道在某些情况下哪一个更好。我想说的是，告诉我们在Stackoverflow中的某些情况，你知道，这是一个应该问的问题。我可以提出一些案例，但它们是武断的。如果您可以在组件外部声明useRef并通过闭包获取变量，请参见为什么要使用useRef？有什么区别？什么时候选择一个而不是另一个？这是因为如果你在组件外部声明它，你不能创建组件的多个实例，每个实例在不同的父组件中都有一个单独的变量引用。如果你可以在组件外部声明它并通过闭包获得变量，为什么要使用useRef？有什么区别？什么时候选择一个而不是另一个？这是因为如果你在组件外部声明它，你不能创建组件的多个实例，每个实例在不同的父组件中都有一个单独的变量引用。我知道，外部作用域中的变量是全局的，不会被垃圾收集。那怎么办？你确定它不会被垃圾收集吗？你检查过了吗？它不是一个真正的全局变量，它在组件文件的作用域内。另外，您是否希望同一对象的N个副本胜过所有组件？因此，基本上你声称拥有同一个对象的N个副本比一个没有垃圾收集的对象要好。老实说，我不确定垃圾收集，但你的论点很好，可以很好地选择其中一个。我知道，外部作用域中的变量是全局的，不会被垃圾收集。那怎么办？你确定它不会被垃圾收集吗？你检查过了吗？它不是一个真正的全局变量，它在组件文件的作用域内。另外，您是否希望同一对象的N个副本胜过所有组件？因此，基本上，你声称拥有同一个对象的N个副本比一个没有被垃圾收集的对象要好。老实说，我不确定垃圾收集，但你的论点是正确的，可以很好地选择一个而不是另一个

const headerColumns = [
  {
    children: "First Name",
    width: 240,
    flexGrow: 1,
    sortValue: (item) => item.FirstName,
  },
  // more
];

export const UnemployedEmployeesReportPaper = React.memo((props) => {});