这篇文章给大家介绍的内容是关于react中跨组件分发状态的三种方法介绍，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
当我问自己第一百次时，我正在研究一个典型的CRUD屏幕：“我应该将状态保留在这个组件中还是将其移动到父组件？”。
如果需要对子组件的状态进行轻微控制。您可能也遇到了同样的问题。
让我们通过一个简单的例子和三种修复方法来回顾它。前两种方法是常见的做法，第三种方法不太常规。
问题；
为了向您展示我的意思，我将使用一个简单的书籍CRUD（译者注：增加(Create)、读取查询(Retrieve)、更新(Update)和删除(Delete)）屏幕（如此简单，它没有创建和删除操作）。
我们有三个组成部分。
那么，我们的状态是什么？好吧，
import React, { Component } from "react";
import { render } from "react-dom";
const books = [
{
title: "The End of Eternity",
author: "Isaac Asimov"
},
//...
];
const BookList = ({ books, onEdit }) =youjiankuohaophpcn (
| Book Title | Actions |
|---|---|
| {book.title} | zuojiankuohaophpcnbutton onClick={() =youjiankuohaophpcn onEdit(index)}youjiankuohaophpcnEditzuojiankuohaophpcn/buttonyoujiankuohaophpcn |
Book
zuojiankuohaophpcnlabelyoujiankuohaophpcn Title: zuojiankuohaophpcninput value={this.state.title} onChange={e =youjiankuohaophpcn this.setState({ title: e.target.value })} /youjiankuohaophpcn zuojiankuohaophpcn/labelyoujiankuohaophpcn zuojiankuohaophpcnlabelyoujiankuohaophpcn Author: zuojiankuohaophpcninput value={this.state.author} onChange={e =youjiankuohaophpcn this.setState({ author: e.target.value })} /youjiankuohaophpcn zuojiankuohaophpcn/labelyoujiankuohaophpcn zuojiankuohaophpcnbutton onClick={() =youjiankuohaophpcn this.props.onSave({ ...this.state })}youjiankuohaophpcn Save zuojiankuohaophpcn/buttonyoujiankuohaophpcn zuojiankuohaophpcn/formyoujiankuohaophpcn ); } } class BookApp extends Component { state = { books: books, activeIndex: -1 }; render() { const { books, activeIndex } = this.state; const activeBook = books[activeIndex]; return (
zuojiankuohaophpcnBookList
books={books}
onEdit={index =youjiankuohaophpcn
this.setState({
activeIndex: index
})}
/youjiankuohaophpcn
zuojiankuohaophpcnBookForm
book={activeBook}
onSave={book =youjiankuohaophpcn
this.setState({
books: Object.assign([...books], { [activeIndex]: book }),
activeIndex: -1
})}
/youjiankuohaophpcn
);
}
}
render(zuojiankuohaophpcnBookApp /youjiankuohaophpcn, document.getElementById("root"));在codesandbox尝试一下
看起来不错，但是他不起作用。
我们正在创建组件实例时初始化
我们改如何修复它？
方法1：受控组件
一种常见的方法是将状态提升，将
//...
class BookForm extends Component {
render() {
if (!this.props.book) return null;
return (
zuojiankuohaophpcnformyoujiankuohaophpcn
Book
zuojiankuohaophpcnlabelyoujiankuohaophpcn
Title:
zuojiankuohaophpcninput
value={this.props.book.title}
onChange={e =youjiankuohaophpcn
this.props.onChange({
...this.props.book,
title: e.target.value
})}
/youjiankuohaophpcn
zuojiankuohaophpcn/labelyoujiankuohaophpcn
zuojiankuohaophpcnlabelyoujiankuohaophpcn
Author:
zuojiankuohaophpcninput
value={this.props.book.author}
onChange={e =youjiankuohaophpcn
this.props.onChange({
...this.props.book,
author: e.target.value
})}
/youjiankuohaophpcn
zuojiankuohaophpcn/labelyoujiankuohaophpcn
zuojiankuohaophpcnbutton onClick={() =youjiankuohaophpcn this.props.onSave()}youjiankuohaophpcnSavezuojiankuohaophpcn/buttonyoujiankuohaophpcn
zuojiankuohaophpcn/formyoujiankuohaophpcn
);
}
}
class BookApp extends Component {
state = {
books: books,
activeBook: null,
activeIndex: -1
};
render() {
const { books, activeBook, activeIndex } = this.state;
return (
zuojiankuohaophpcnBookList
books={books}
onEdit={index =youjiankuohaophpcn
this.setState({
activeBook: { ...books[index] },
activeIndex: index
})}
/youjiankuohaophpcn
zuojiankuohaophpcnBookForm
book={activeBook}
onChange={book =youjiankuohaophpcn this.setState({ activeBook: book })}
onSave={() =youjiankuohaophpcn
this.setState({
books: Object.assign([...books], { [activeIndex]: activeBook }),
activeBook: null,
activeIndex: -1
})}
/youjiankuohaophpcn
);
}
}
//...方法2：同步state
现在它可以工作，但对我来说，提升
魅力企业网站管理系统2009 Sp6
下载
2009-8-24日更新1、全新升级网站自动升级通道，分为免费通道和商业通道！商业用户将获得更好技术支持服务。2、增加新闻中心，产品中心图片预览功能。操作更加直观，简单。3、支持系统集成第三方统计系统，各种在线客服系统4、魅力软件为了给用户提供更好的网站系统与服务，现特招募优秀开发人员和网页设计人员！系统介绍：一、无组件，开源。二、魅力软件坚持系统更新开发，不断完善。内置一键在线升级程序，方便您快
在codesandbox尝试一下
现在它可以工作，但对我来说，提升
//...
class BookForm extends Component {
state = { ...this.props.book };
componentWillReceiveProps(nextProps) {
const nextBook = nextProps.book;
if (this.props.book !== nextBook) {
this.setState({ ...nextBook });
}
}
render() {
if (!this.props.book) return null;
return (
zuojiankuohaophpcnformyoujiankuohaophpcn
Book
zuojiankuohaophpcnlabelyoujiankuohaophpcn
Title:
zuojiankuohaophpcninput
value={this.state.title}
onChange={e =youjiankuohaophpcn this.setState({ title: e.target.value })}
/youjiankuohaophpcn
zuojiankuohaophpcn/labelyoujiankuohaophpcn
zuojiankuohaophpcnlabelyoujiankuohaophpcn
Author:
zuojiankuohaophpcninput
value={this.state.author}
onChange={e =youjiankuohaophpcn this.setState({ author: e.target.value })}
/youjiankuohaophpcn
zuojiankuohaophpcn/labelyoujiankuohaophpcn
zuojiankuohaophpcnbutton onClick={() =youjiankuohaophpcn this.props.onSave({ ...this.state })}youjiankuohaophpcn
Save
zuojiankuohaophpcn/buttonyoujiankuohaophpcn
zuojiankuohaophpcn/formyoujiankuohaophpcn
);
}
}
//...在codesandbox尝试一下
这种方法通常被认为是一种不好的做法，因为它违背了React关于拥有单一事实来源的想法。我不确定是这种情况，然而，同步状态并不总是那么容易。此外，我尽量避免使用生命周期方法。
方法3：由Key控制的组件
但为什么我们要回收旧的状态呢？每次用户选择一本书时，拥有一个全新状态的新实例是不是有意义？
为此，我们需要告诉React停止使用旧实例并创建一个新实例。这就是key prop的用途。
//...
class BookApp extends Component {
state = {
books: books,
activeIndex: -1
};
render() {
const { books, activeIndex } = this.state;
const activeBook = books[activeIndex];
return (
zuojiankuohaophpcnBookList
books={books}
onEdit={index =youjiankuohaophpcn
this.setState({
activeIndex: index
})}
/youjiankuohaophpcn
zuojiankuohaophpcnBookForm
key={activeIndex}
book={activeBook}
onSave={book =youjiankuohaophpcn
this.setState({
books: Object.assign([...books], { [activeIndex]: book }),
activeIndex: -1
})}
/youjiankuohaophpcn
);
}
}
//...在codesandbox尝试一下。
如果元素具有与上一个渲染不同的键，则React会为其创建一个新实例。因此，当用户选择新书时，
相关文章推荐：
