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>
    );
};

在这个基于Class的示例中，所有实例方法都将在每个渲染器上重新定义吗？还是只有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方法。

重新渲染组件时，是否重新定义了其中的所有变量？

1 个答案: