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

Question

在 React 功能组件中声明变量的最佳方式是什么(从现在开始 - RFC)？它与 Similar question 不重复这个。

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

1. 在 RFC 中使用 const 声明它 - 如果我们将它传递给 HeavyComponent 组件，那么在每次渲染时，它将创建一个新的引用，并且 HeavyComponent 也会渲染。这不是一个好的选择。
2. 在 RFC 中使用 useRef 声明 - 后续渲染中的引用将相同，这很好，但另一方面，我们正在使用 useRef 内部方法(函数调用——它在幕后做了一些工作)
3. 在 RFC(外部范围)之外使用 const 声明 - 在这种情况下，引用将再次相同，因为它将从闭包中获取并且我们不使用 使用 Ref 方法。但是，在这种特殊情况下，我们在外部作用域中声明了该变量，它没有被垃圾收集，并且会导致内存泄漏(如果我们经常使用这种情况)。

我知道，每种情况都有其优缺点。但是我们什么时候坚持使用某个选项？

已更新这是例子

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 之外声明它更好。

Answer 1

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

在大多数情况下，您可以使用 useRef 钩子(Hook)，因为它会在函数的每次渲染中返回相同的变量实例。

不过，您也可以使用 useMemo Hook 定义一个变量并为其赋值。

喜欢

const val = useMemo(() => {
   return some calculation based value or in general a normal value
},[]) // dependency array to recalculate value

您必须注意，useRef 可以帮助您解决闭包问题，并且在您想要使用受闭包影响的变量时派上用场。例如，在具有空依赖性的 useEffect 中定义的 setInterval 函数中使用来自闭包的值。

另一方面，useMemo 将帮助您防止每次重新渲染时变量的引用更改。一个常见的用例是为 ContextProvider 提供一个内存值

更新:

对于您的用例，有两种定义 headerColumns 的方法。

• 在组件外部作为常量。当预期值不会改变，也不预期使用闭包中的任何值时，将其声明为函数组件外部的常量是有意义的

• 作为函数中的内存值

 const headerColumns = useMemo( () => [
        { 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') },
    ], []);

您必须注意使用 useMemo 为 headerColumns 赋值在您使用闭包中的值时是有意义的。