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


Posted in Javascript onAugust 09, 2018

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

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

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

问题;

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

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

我们有三个组成部分。 <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 }) => (
 <table>
  <tr>
   <th>Book Title</th>
   <th>Actions</th>
  </tr>
  {books.map((book, index) => (
   <tr>
    <td>{book.title}</td>
    <td>
     <button onClick={() => onEdit(index)}>Edit</button>
    </td>
   </tr>
  ))}
 </table>
);

class BookForm extends Component {
 state = { ...this.props.book };
 render() {
  if (!this.props.book) return null;
  return (
   <form>
    <h3>Book</h3>
    <label>
     Title:
     <input
      value={this.state.title}
      onChange={e => this.setState({ title: e.target.value })}
     />
    </label>
    <label>
     Author:
     <input
      value={this.state.author}
      onChange={e => this.setState({ author: e.target.value })}
     />
    </label>
    <button onClick={() => this.props.onSave({ ...this.state })}>
     Save
    </button>
   </form>
  );
 }
}

class BookApp extends Component {
 state = {
  books: books,
  activeIndex: -1
 };
 render() {
  const { books, activeIndex } = this.state;
  const activeBook = books[activeIndex];
  return (
   <div>
    <BookList
     books={books}
     onEdit={index =>
      this.setState({
       activeIndex: index
      })}
    />
    <BookForm
     book={activeBook}
     onSave={book =>
      this.setState({
       books: Object.assign([...books], { [activeIndex]: book }),
       activeIndex: -1
      })}
    />
   </div>
  );
 }
}

render(<BookApp />, document.getElementById("root"));

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

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

我们改如何修复它?

方法1:受控组件

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

//...

class BookForm extends Component {
 render() {
  if (!this.props.book) return null;
  return (
   <form>
    <h3>Book</h3>
    <label>
     Title:
     <input
      value={this.props.book.title}
      onChange={e =>
       this.props.onChange({
        ...this.props.book,
        title: e.target.value
       })}
     />
    </label>
    <label>
     Author:
     <input
      value={this.props.book.author}
      onChange={e =>
       this.props.onChange({
        ...this.props.book,
        author: e.target.value
       })}
     />
    </label>
    <button onClick={() => this.props.onSave()}>Save</button>
   </form>
  );
 }
}

class BookApp extends Component {
 state = {
  books: books,
  activeBook: null,
  activeIndex: -1
 };
 render() {
  const { books, activeBook, activeIndex } = this.state;
  return (
   <div>
    <BookList
     books={books}
     onEdit={index =>
      this.setState({
       activeBook: { ...books[index] },
       activeIndex: index
      })}
    />
    <BookForm
     book={activeBook}
     onChange={book => this.setState({ activeBook: book })}
     onSave={() =>
      this.setState({
       books: Object.assign([...books], { [activeIndex]: activeBook }),
       activeBook: null,
       activeIndex: -1
      })}
    />
   </div>
  );
 }
}

//...

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

方法2:同步state

现在它可以工作,但对我来说,提升<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 (
   <form>
    <h3>Book</h3>
    <label>
     Title:
     <input
      value={this.state.title}
      onChange={e => this.setState({ title: e.target.value })}
     />
    </label>
    <label>
     Author:
     <input
      value={this.state.author}
      onChange={e => this.setState({ author: e.target.value })}
     />
    </label>
    <button onClick={() => this.props.onSave({ ...this.state })}>
     Save
    </button>
   </form>
  );
 }
}
//...

这种方法通常被认为是一种不好的做法,因为它违背了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>
    <BookList
     books={books}
     onEdit={index =>
      this.setState({
       activeIndex: index
      })}
    />
    <BookForm
     key={activeIndex}
     book={activeBook}
     onSave={book =>
      this.setState({
       books: Object.assign([...books], { [activeIndex]: book }),
       activeIndex: -1
      })}
    />
   </div>
  );
 }
}
//...

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery EasyUI NumberBox(数字框)的用法
Jul 08 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
Apr 12 Javascript
js给onclick赋值传参数的两种方法
Nov 25 Javascript
javascript创建和存储cookie示例
Jan 07 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
Mar 13 Javascript
详细AngularJs4的图片剪裁组件的实例
Jul 12 Javascript
js生成word中图片处理方法
Jan 06 Javascript
layui 实现加载动画以及非真实加载进度的方法
Sep 23 Javascript
js刷新页面location.reload()用法详解
Dec 09 Javascript
vue实现移动端图片上传功能
Dec 23 Javascript
JavaScript图片旋转效果实现方法详解
Jun 28 Javascript
字节飞书面试promise.all实现示例
Jun 16 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 #jQuery
React中如何引入Angular组件详解
Aug 09 #Javascript
jQuery 实现批量提交表格多行数据的方法
Aug 09 #jQuery
详解js的视频和音频采集
Aug 09 #Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
Aug 08 #Javascript
深入理解Promise.all
Aug 08 #Javascript
vue js秒转天数小时分钟秒的实例代码
Aug 08 #Javascript
You might like
SMARTY学习手记
2007/01/04 PHP
PHP程序员不应该忽略的3点
2015/10/09 PHP
一些常用的JS功能函数(2009-06-04更新)
2009/06/04 Javascript
让checkbox不选中即将选中的checkbox不选中
2014/07/11 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
JS 实现Base64编码与解码实例详解
2016/11/07 Javascript
js+html制作简单验证码
2017/02/16 Javascript
详解vue服务端渲染(SSR)初探
2017/06/19 Javascript
微信小程序实现tab切换效果
2017/11/21 Javascript
vue.js中$set与数组更新方法
2018/03/08 Javascript
jQuery实现的手动拖动控制进度条效果示例【测试可用】
2018/04/18 jQuery
vue项目中api接口管理总结
2018/04/20 Javascript
深入浅析vue中cross-env的使用
2019/09/12 Javascript
微信小程序 scroll-view 实现锚点跳转功能
2019/12/12 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
[11:42]2018DOTA2国际邀请赛寻真——OG卷土重来
2018/08/17 DOTA
[01:07:57]DOTA2-DPC中国联赛 正赛 Ehome vs Magma BO3 第二场 1月19日
2021/03/11 DOTA
Python实现发送email的几种常用方法
2014/08/18 Python
Python中列表(list)操作方法汇总
2014/08/18 Python
分分钟入门python语言
2018/03/20 Python
对Python中实现两个数的值交换的集中方法详解
2019/01/11 Python
Python基于class()实现面向对象原理详解
2020/03/26 Python
解决使用python print打印函数返回值多一个None的问题
2020/04/09 Python
PyCharm+Pipenv虚拟环境开发和依赖管理的教程详解
2020/04/16 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
pandas数据处理之绘图的实现
2020/06/15 Python
毕业生动漫设计求职信
2013/10/11 职场文书
学年末自我鉴定
2014/01/21 职场文书
法律专业学生的自我评价
2014/02/07 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
对教师的评语
2014/04/28 职场文书
财产保全担保书
2015/01/20 职场文书
纪检干部学习心得体会
2016/01/23 职场文书
导游词之阆中古城
2019/12/23 职场文书
总结一下关于在Java8中使用stream流踩过的一些坑
2021/06/24 Java/Android