Компонент React размонтируется при рендеринге с тем же ключом
В соответствии с этим связь вы можете избежать размонтирования компонента, используя тот же ключ. В этом примере я использую один и тот же ключ, но компонент каждый раз отключается. Что я делаю неправильно?
class Component1 extends React.Component{
componentDidMount(){console.info('componentDidMount');}
componentWillUnmount(){console.info('componentWillUnmount');}
render(){
console.info('render component1');
return <div></div>;
}
}
class App extends Component {
flag = true;
action1 = ()=>{
this.forceUpdate();
}
render() {
console.info('render App');
if (this.flag){
this.flag = false;
return (<div>
<Component1 key = "kaka"/>
<button onClick = {this.action1}>Click me</button>
</div>);
}
else{
this.flag = true;
return (<span>
<Component1 key = "kaka"/>
<button onClick = {this.action1}>Click me</button>
</span>);
}
}
}
Каковы ваши реальные намерения или вариант использования? У вас очень банальный пример. Пожалуйста, помогите понять обзор проблемы, иначе это может привести к проблеме XY. Использование свойства экземпляра this.flag слишком подозрительно, и в большинстве случаев вы не хотите устанавливать его в методе рендеринга.
Ответы 1
Ваш key не имеет значения, потому что родитель меняется внутри вашего render (с div на span или наоборот).
По Документация по примирению React:
The algorithm will not try to match subtrees of different component types. If you see yourself alternating between two component types with very similar output, you may want to make it the same type. In practice, we haven’t found this to be an issue.
Автор сообщения на Medium, кажется, предполагает обратное. Я не верю, что это правильно. Использование key предполагает стабильность при изменении дерева, но, как отмечалось выше, React не беспокоится о согласовании поддеревьев при изменении типа компонента.
В ссылке говорится: если есть какой-либо компонент, который будет одинаковым (или согласованным), даже если родительский узел будет изменен. Мы можем намекнуть реакции на сохранение существующего экземпляра компонента, предоставив «ключевые» реквизиты, чтобы его можно было спасти от размонтирования, как показано во фрагменте ниже на рисунке.
Насколько мне известно, изменение родительского узла не равнозначно замене его другим типом.
Да, но если вы видите изображение, оно говорит, что при изменении родительского узла и предоставлении ключа дочернему элементу дочерний элемент не отображается. Статья неверна?
@Dolby Похоже, он неправильно понял документацию React, да. Я предоставил дополнительную информацию и ссылку на документы сверки.
Что делает forceUpdate()?