时间戳

首页 > 解决方案 > 在无状态组件中定义方法的优缺点

reactjs - 在无状态组件中定义方法的优缺点

问题描述

假设我有一个像这样的（有点做作的组件）

    const ExampleComponent = (props) => {
    const renderList = () => {
        if (props.list) {
            props.list.map((item) => <ListItem {...props.list} />);
        } else {
            return <div>List Not Found </div>
        }
    };

    return (
        <div>
            <H1>LIST VIEW</H1>
            {renderList()}
        </div>
    )
};

React 是否会在每个渲染滴答时重新初始化该函数？我应该担心这个还是一个微不足道的细节。

是否会考虑将我的组件写为

const renderList = (list) => {
    if (list) {
        list.map((item) => <ListItem {...list} />);
    } else {
        return <div>List Not Found </div>
    }
};

const ExampleComponent = (props) => {
    return (
        <div>
            <H1>LIST VIEW</H1>
            {renderList(props.list)}
        </div>
    )
};

标签： reactjs

解决方案

只需阅读一点：http ://wiki.c2.com/?PrematureOptimization

“程序员会浪费大量时间去思考或担心程序中非关键部分的速度，而在考虑调试和维护时，这些提高效率的尝试实际上会产生强烈的负面影响。我们应该忘记小的效率，比如97% 的时间：过早的优化是万恶之源。但我们不应该放弃关键的 3% 的机会。”

回答您的问题：

React 是否会在每个渲染滴答时重新初始化该函数？是的，该函数将在每次渲染时重新声明。

我应该担心这个还是一个微不足道的细节。别担心。

推荐阅读