在React中跨组件分发状态的三种方法

当我问自己第一百次时,我正在研究一个典型的CRUD屏幕:“我应该将状态保留在这个组件中还是将其移动到父组件?”。

如果需要对子组件的状态进行轻微控制。您可能也遇到了同样的问题。

让我们通过一个简单的例子和​​三种修复方法来回顾它。前两种方法是常见的做法,第三种方法不太常规。

问题;

为了向您展示我的意思,我将使用一个简单的书籍CRUD(译者注:增加(Create)、读取查询(Retrieve)、更新(Update)和删除(Delete))屏幕(如此简单,它没有创建和删除操作)。

我们有三个组成部分。<BookList />是一个组件,显示了用于编辑它们的书籍和按钮列表。<BookForm />有两个输入和一个按钮,用于保存对书籍的更改。以及包含其他两个组件的<BookApp />。

那么,我们的状态是什么?好吧,<BookApp />应该跟踪书籍清单以及识别当前正在编辑的书籍的内容。 <BookList />没有任何状态。并且<BookForm />应该保持输入的当前状态,直到单击“保存”按钮。

import React, { Component } from "react";
import { render } from "react-dom"; const books = [
{
title: "The End of Eternity",
author: "Isaac Asimov"
},
//...
]; const BookList = ({ books, onEdit }) =&gt; (
<table>
<tr>
<th>Book Title</th>
<th>Actions</th>
</tr>
{books.map((book, index) =&gt; (
<tr>
<td>{book.title}</td>
<td>
&lt;button onClick={() =&gt; onEdit(index)}&gt;Edit&lt;/button&gt;
</td>
</tr>
))}
</table>
); class BookForm extends Component {
state = { ...this.props.book };
render() {
if (!this.props.book) return null;
return (
&lt;form&gt;
<h3>Book</h3>
&lt;label&gt;
Title:
&lt;input
value={this.state.title}
onChange={e =&gt; this.setState({ title: e.target.value })}
/&gt;
&lt;/label&gt;
&lt;label&gt;
Author:
&lt;input
value={this.state.author}
onChange={e =&gt; this.setState({ author: e.target.value })}
/&gt;
&lt;/label&gt;
&lt;button onClick={() =&gt; this.props.onSave({ ...this.state })}&gt;
Save
&lt;/button&gt;
&lt;/form&gt;
);
}
} class BookApp extends Component {
state = {
books: books,
activeIndex: -1
};
render() {
const { books, activeIndex } = this.state;
const activeBook = books[activeIndex];
return (
<div>
&lt;BookList
books={books}
onEdit={index =&gt;
this.setState({
activeIndex: index
})}
/&gt;
&lt;BookForm
book={activeBook}
onSave={book =&gt;
this.setState({
books: Object.assign([...books], { [activeIndex]: book }),
activeIndex: -1
})}
/&gt;
</div>
);
}
} render(&lt;BookApp /&gt;, document.getElementById("root"));

codesandbox尝试一下

看起来不错,但是他不起作用。

我们正在创建组件实例时初始化<BookForm />状态,因此,当从列表中选择另一本书时,父级无法让它知道它需要更改它。

我们改如何修复它?

方法1:受控组件

一种常见的方法是将状态提升,将<BookForm />转换为受控组件。我们删除<BookForm />状态,将activeBook添加到<BookApp />状态,并向<BookForm />添加一个onChange道具,我们在每次输入时都会调用它。

//...

class BookForm extends Component {
render() {
if (!this.props.book) return null;
return (
&lt;form&gt;
<h3>Book</h3>
&lt;label&gt;
Title:
&lt;input
value={this.props.book.title}
onChange={e =&gt;
this.props.onChange({
...this.props.book,
title: e.target.value
})}
/&gt;
&lt;/label&gt;
&lt;label&gt;
Author:
&lt;input
value={this.props.book.author}
onChange={e =&gt;
this.props.onChange({
...this.props.book,
author: e.target.value
})}
/&gt;
&lt;/label&gt;
&lt;button onClick={() =&gt; this.props.onSave()}&gt;Save&lt;/button&gt;
&lt;/form&gt;
);
}
} class BookApp extends Component {
state = {
books: books,
activeBook: null,
activeIndex: -1
};
render() {
const { books, activeBook, activeIndex } = this.state;
return (
<div>
&lt;BookList
books={books}
onEdit={index =&gt;
this.setState({
activeBook: { ...books[index] },
activeIndex: index
})}
/&gt;
&lt;BookForm
book={activeBook}
onChange={book =&gt; this.setState({ activeBook: book })}
onSave={() =&gt;
this.setState({
books: Object.assign([...books], { [activeIndex]: activeBook }),
activeBook: null,
activeIndex: -1
})}
/&gt;
</div>
);
}
} //...

方法2:同步state

现在它可以工作,但对我来说,提升<BookForm />的状态感觉不对。在用户单击“保存”之前,<BookApp />不关心对书的任何更改,那么为什么需要将其保持在自己的状态?

codesandbox尝试一下

现在它可以工作,但对我来说,提升<BookForm />的状态感觉不对。在用户单击“保存”之前,<BookApp />不关心对书的任何更改,那么为什么需要将其保持在自己的状态?

//...
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 (
&lt;form&gt;
<h3>Book</h3>
&lt;label&gt;
Title:
&lt;input
value={this.state.title}
onChange={e =&gt; this.setState({ title: e.target.value })}
/&gt;
&lt;/label&gt;
&lt;label&gt;
Author:
&lt;input
value={this.state.author}
onChange={e =&gt; this.setState({ author: e.target.value })}
/&gt;
&lt;/label&gt;
&lt;button onClick={() =&gt; this.props.onSave({ ...this.state })}&gt;
Save
&lt;/button&gt;
&lt;/form&gt;
);
}
}
//...

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 (
<div>
&lt;BookList
books={books}
onEdit={index =&gt;
this.setState({
activeIndex: index
})}
/&gt;
&lt;BookForm
key={activeIndex}
book={activeBook}
onSave={book =&gt;
this.setState({
books: Object.assign([...books], { [activeIndex]: book }),
activeIndex: -1
})}
/&gt;
</div>
);

}
}
//...

codesandbox尝试一下。

如果元素具有与上一个渲染不同的键,则React会为其创建一个新实例。因此,当用户选择新书时,<BookForm />的键更改,将创建组件的新实例,并从props初始化状态。

有什么收获?重用组件实例意味着更少的DOM突变,这意味着更好的性能。因此,当我们强制React创建组件的新实例时,我们会为额外的DOM突变获得一些开销。但是对于这样的情况,这种开销是最小的,其中密钥没有变化太快而且组件不大。

感谢你的阅读。

在React中跨组件分发状态的三种方法的更多相关文章

  1. React Router v4 页面传值的三种方法

    传值方法 1.props.params 使用React router定义路由时,我们可以给指定一个path,然后指定通配符可以携带参数到指定的path: <Route path='/user/: ...

  2. React组件绑定this的三种方法

    我们在使用React组件时,调用方法常常用到this和event对象,默认情况是不会绑定到组件上的,需要特殊处理. 节点上使用bind绑定 特点:该方法会在每次渲染组件时都会重新绑定一次,消耗一定的性 ...

  3. iOS 判断当前网络状态的三种方法

    http://www.cocoachina.com/ios/20171103/21039.html 在项目中,为了好的用户体验,有些场景必须线判断网络状态,然后才能决定改干嘛.比如视频播放,需要线判断 ...

  4. 1.Git起步-Git的三种状态以及三种工作区域、CVCS与DVCS的区别、Git基本工作流程

    1.Git基础 版本控制系统是一种用于记录一个或多个文件内容变化,以便将来查阅恢复特定版本修订情况的系统. Git是一种分布式版本控制系统(Distributed Version Control Sy ...

  5. 转:extjs 添加loading状态的三种解决办法:

    extjs 添加loading状态的三种解决办法: 方法一: //materialGrid 指需要显示loading状态的控件id var o=Ext.getCmp('materialGrid'); ...

  6. C#中??和?分别是什么意思? 在ASP.NET开发中一些单词的标准缩写 C#SESSION丢失问题的解决办法 在C#中INTERFACE与ABSTRACT CLASS的区别 SQL命令语句小技巧 JQUERY判断CHECKBOX是否选中三种方法 JS中!=、==、!==、===的用法和区别 在对象比较中,对象相等和对象一致分别指的是什么?

    C#中??和?分别是什么意思? 在C#中??和?分别是什么意思? 1. 可空类型修饰符(?):引用类型可以使用空引用表示一个不存在的值,而值类型通常不能表示为空.例如:string str=null; ...

  7. nodejs高并发大流量的设计实现,控制并发的三种方法

    nodejs高并发大流量的设计实现,控制并发的三种方法eventproxy.async.mapLimit.async.queue控制并发Node.js是建立在Google V8 JavaScript引 ...

  8. (OPC Client .NET 开发类库)网上很多网友都有提过,.NET开发OPC Client不外乎下面三种方法

    1. 背景 OPC Data Access 规范是基于COM/DCOM定义的,因此大多数的OPC DA Server和client都是基于C++开发的,因为C++对COM/DCOM有最好的支持.现在, ...

  9. 【转载】取得系统中网卡MAC地址的三种方法

    From:http://blog.csdn.net/zhangting1987/article/details/2732135 网卡地址这个概念有点混淆不清.因为实际上有两个地址,mac地址和物理地址 ...

随机推荐

  1. Game on a Tree Gym - 102392F(树上最大匹配)

    思路: 本质是求一个树上的最大匹配能否覆盖所有的点. dfs遍历,用qian[]数组记录当前节点的子树内有几个没有匹配的点(初始化为-1因为可以匹配掉一个子树中未匹配的点),pipei[]数组记录当前 ...

  2. Using Tensorflow SavedModel Format to Save and Do Predictions

    We are now trying to deploy our Deep Learning model onto Google Cloud. It is required to use Google ...

  3. mooc-IDEA alter enter--008

    十四.IntelliJ IDEA -alter enter 1.提示一:自动创建函数 2.提示二.list replace 等于 3.提示三.字符串formate或build 等于 等于 等于 4.实 ...

  4. 使EasyUI的window、panel、dialog 不被拖出页面

    function easyuiPanelOnMove(left, top) {  var l = left;  var t = top;  if (l < 1) {    l = 1;  }  ...

  5. 函数式编程filter和map的区别

    # b = filter(lambda x:x>5,[1,2,3,4,5,6,7]) # print(list(b)) def filters(x): if x > 5: return x ...

  6. Python : Data Encapsulation

    Python : Data Encapsulation The following table shows the different behaviour: Name Notation Behavio ...

  7. SpringBoot-技术专区-详细打印启动时异常堆栈信息

    SpringBoot在项目启动时如果遇到异常并不能友好的打印出具体的堆栈错误信息,我们只能查看到简单的错误消息,以致于并不能及时解决发生的问题,针对这个问题SpringBoot提供了故障分析仪的概念( ...

  8. java绘制带姓的圆

    public class ImageGenerator { private static final Color[] colors = new Color[] { new Color(129, 198 ...

  9. PHP算法[转]

    这里是用PHP写的几个基础算法,算法的重要性貌似对于PHP程序员不怎么重要,其实是非常重 要的,经典名句:算法+数据结构=程序.作为一名真正的高级PHP程序员,我认为应该熟悉C,如果你想成为真正的程序 ...

  10. vsftpd.service: Main process exited, code=exited, status=2/INVALIDARGUMENT和vsftpd:500 OOPS: vsftpd: refusing to run with writable root inside chroot ()错误的解决方法

    今天在配置VSFTPD过程中遇到两个错误 1是启动失败,通过 SERVICE VSFTPD STATUS 查看到报错 May 02 16:06:58 debian systemd[1]: Starti ...