javascript - 当组件重新渲染时，它内部的所有变量都会重新定义吗？

Question

该问题适用于基于类和函数的组件。这可能是一个太简单的问题，但由于某种原因，我找不到简洁明确的答案，所以有时我会感到困惑。我所能找到的只是“组件重新渲染”，但这实际上是什么意思？渲染是重新检查组件的状态来描述如何绘制 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>
        )
    }
}

Answer 1

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

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