时间戳

首页 > 解决方案 > 当一个组件重新渲染时，它里面的所有变量都重新定义了吗？

javascript - 当一个组件重新渲染时，它里面的所有变量都重新定义了吗？

问题描述

该问题适用于基于类和函数的组件。这可能是一个太简单的问题，但由于某种原因，我找不到简洁明确的答案，所以有时我会被甩掉。我能找到的只是“组件重新渲染”，但它实际上是什么意思？渲染是重新检查组件的状态以描述如何绘制 DOM，但它是否也重新定义了组件内的任何引用数据类型？还是只会重新调用 Class 组件上的 render() 方法？

在功能组件中。这是否意味着“语言”数组、“updateLanguage”函数以及我可能放入的所有内容都被重新定义了？或者只有返回正文中定义的内容？（如内联箭头处理程序等......）。我知道我们可以使用 useCallback 来防止重新渲染处理程序之类的东西，但这是一个不同的问题。

const App = () => {
    const [selectedLang, setSelectedLang] = useState('');
    const languages = ['All', 'JavaScript', 'Ruby', 'Java',  'Python'];
    const updateLanguage = lang => setSelectedLang(lang);
    console.count('render');
    return (
        <ul>
            {languages.map(lang=> (
                <li key={lang}>
                    <button
                        className={`${selectedLang == lang && 'btn-selected'}`}
                        onClick={() => updateLanguage(lang)}
                        >
                        {lang}
                    </button>
                </li>
            ))}
        </ul>
    );
};

并且使用这个基于类的示例，所有实例方法都将在每次渲染时重新定义？还是只有 render() 方法里面的东西？

class Languages extends Component {
    constructor(props){
        super(props);
        this.state = {selectedLanguage: 'All'};
        this.updateLanguage = this.updateLanguage.bind(this);
    }
    updateLanguage(lang){
        this.setState({selectedLanguage: lang});
    }
    render(){
        const languages = ['All', 'JavaScript', 'Ruby', 'Java', 'Python'];
        const {selectedLanguage: selected} = this.state;
        console.count('render');
        return (
            <ul>
                {languages.map(lang=> (
                    <li key={lang}>
                        <button
                            className={`${selected == lang && 'selected'}`}
                            onClick={() => this.updateLanguage(lang)}
                            >
                            {lang}
                        </button>
                    </li>)
                )}
            </ul>
        )
    }
}

标签： javascriptreactjsreact-hooks

解决方案

在功能组件中，考虑功能是渲染功能。因此，它在重新渲染时完全像任何正常功能（这里没有黑魔法）一样执行。所以是的，在该范围内定义的任何内容都将被重新定义。

对于类，类成员被初始化一次。构造函数不会在重新渲染时被调用。渲染方法当然会被调用。

推荐阅读