"; 2. Utilisez le composant parent ref pour appeler la fonction du composant enfant ; 3. Transmettez les données à l'enfant via le parent, et l'enfant est uniquement responsable du rendu."/> "; 2. Utilisez le composant parent ref pour appeler la fonction du composant enfant ; 3. Transmettez les données à l'enfant via le parent, et l'enfant est uniquement responsable du rendu.">
Maison > Article > interface Web > Quelles sont les méthodes pour réagir à l'état de mise à jour ?
Les méthodes de mise à jour de l'état dans React sont : 1. Modifiez les sous-composants via une clé, un code tel que "8fded789aed3f8a3486f6a50a3cec222"; 2. Utilisez le composant parent ref pour appeler la fonction du composant enfant ; 3. Transmettez les données à l'enfant via le parent, et l'enfant est uniquement responsable du rendu.
L'environnement d'exploitation de ce tutoriel : système Windows 7, React version 17.0.1, ordinateur Dell G3.
Quelles sont les méthodes de mise à jour de l'état dans React ?
Il existe de nombreuses façons de mettre à jour l'état de l'enfant lorsque les accessoires parent changent dans React
Sous-composant :
class Children extends Component { constructor(props) { super(props); this.state = { a: this.props.a, b: this.props.b, treeData: '', targets: '', } } componentDidMount() { const { a, b } = this.state const data = {a,b} fetch('/Url', { data }).then(res => { if (res.code === 0) { this.setState({ treeData: res.a, targets: res.b, }) } else { message.error(res.errmsg) } }) } test(item1, item2) { const data = { item1, item2 } fetch('/Url', {data}).then(res => { if (res.code === 0) { this.setState({ treeData: res.a, targets: res.b, }) } else { message.error(res.errmsg) } }) } } export default Children
Méthode 1 : Utiliser habilement la clé
<Children key={this.state.key} a={this.state.a} b={this.state.b} /> //父组件调用子组件
Le sous-composant sera réinstancié via des changements de clé (les changements de clé de réaction détruiront le composant avant de réinstancier le composant)
Méthode 2 : utilisez le composant parent ref pour appeler la fonction du sous-composant (n'est pas conforme à réagir spécifications de conception, mais peut être considéré comme une sortie de secours) Hehe~)
class father extends Component { constructer(props) { super(props); this.state={ a: '1', b: '2', } this.myRef this.test = this.test.bind(this) } change() { const { a,b } = this.state console.log(this.myRef.test(a,b)) // 直接调用实例化后的Children组件对象里函数 } render() { <Children wrappedComponentRef={(inst) => { this.myRef = inst } } ref={(inst) => { this.myRef = inst } } /> <button onClick={this.test}>点击</button> } }
Remarque : enveloppéComponentRef est utilisé dans React-Router v4 pour résoudre le problème selon lequel les composants d'ordre supérieur ne peuvent pas obtenir correctement la référence (les composants d'ordre non élevé doivent être supprimé)
Méthode 3 : Le parent transmet les données à l'enfant, et l'enfant Le niveau est uniquement responsable du rendu (le plus cohérent avec les concepts de conception de réaction) Recommandé ! !
Composant Parent :
class father extends Component { constructer(props) { super(props); this.state={ a:'1', b:'2', data:'', } } getcomposedata() { const { a, b } = this.state const data = { a, b } fetch('/Url', {data}).then(res => { if (res.code === 0) { this.setState({ data:res.data }) } else { message.error(res.errmsg) } }) } render() { <Children data={this.state.data}} /> } }
Composant Enfant :
componentWillReceiveProps(nextProps) { const { data } = this.state const newdata = nextProps.data.toString() if (data.toString() !== newdata) { this.setState({ data: nextProps.data, }) } }
Remarque : Le cycle du composantWillReceiveProps de React est la période d'existence, et les accessoires modifiés sont utilisés pour juger et mettre à jour son propre état
Apprentissage recommandé : "Tutoriel vidéo React "
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!