Когда компонент перерисовывается, все переменные внутри него переопределяются?

Question

Вопрос касается как компонентов класса, так и компонентов. Вероятно, это слишком простой вопрос, но по какой-то причине я не могу найти краткий и определенный ответ, поэтому иногда меня сбивают с толку. Все, что я могу найти, это «повторный рендеринг компонента», но что это на самом деле означает? рендеринг - это повторное изучение состояния компонента, чтобы описать, как рисовать DOM, но также ли он заново определяет какие-либо ссылочные типы данных внутри компонента? Или он только повторно вызовет метод render () для компонента Class?

В функциональном компоненте. Означает ли это массив «languages», функцию «updateLanguage» и все, что я могу вставить, переопределено? Или только то, что определено в возвращаемом теле? (например, встроенные обработчики стрелок и т. д. c ...). Я знаю, что мы можем использовать 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

В функциональном компоненте рассмотрим функцию , равную функции рендеринга. Таким образом, он выполняется полностью как любая обычная функция (без черной магии c здесь) при повторном рендеринге. Так что да, все, что определено в этой области, будет переопределено.

С классами члены класса инициализируются один раз. Конструктор не будет вызываться при повторном рендеринге. Метод рендера, конечно, будет вызван.