专栏首页MudOnTireReact中传入组件的props改变时更新组件的几种实现方法

React中传入组件的props改变时更新组件的几种实现方法

我们使用react的时候常常需要在一个组件传入的props更新时重新渲染该组件,常用的方法是在componentWillReceiveProps中将新的props更新到组件的state中(这种state被成为派生状态(Derived State)),从而实现重新渲染。React 16.3中还引入了一个新的钩子函数getDerivedStateFromProps来专门实现这一需求。但无论是用componentWillReceiveProps还是getDerivedStateFromProps都不是那么优雅,而且容易出错。所以今天来探讨一下这类实现会产生的问题和更好的实现方案。

何时使用派生状态

咱们先来看一个比较常见的需求,一个用户列表,可以新增和编辑用户,当用户点击‘新建’ 按钮用户可以在输入框中输入新的用户名;当点击‘编辑’按钮的时候,输入框中显示被编辑的用户名,用户可以修改;当用户点击‘确定’按钮的时候用户列表更新。

class UserInput extends React.Component {

  state = {
    user: this.props.user
  }

  handleChange = (e) => {
    this.setState({
      user: {
        ...this.state.user,
        name: e.target.value
      }
    });
  }

  render() {
    const { onConfirm } = this.props;
    const { user } = this.state;
    return (
      <div>
        <input value={user.name || ''} onChange={this.handleChange} />
        <button onClick={() => { onConfirm(user) }}>确定</button>
      </div>
    );
  }
}

class App extends React.Component {
  state = {
    users: [
      { id: 0, name: 'bruce' },
      { id: 1, name: 'frank' },
      { id: 2, name: 'tony' }
    ],
    targetUser: {}
  }

  onConfirm = (user) => {
    const { users } = this.state;
    const target = users.find(u => u.id === user.id);

    if (target) {
      this.setState({
        users: [
          ...users.slice(0, users.indexOf(target)),
          user,
          ...users.slice(users.indexOf(target) + 1)
        ]
      });
    } else {
      const id = Math.max(...(users.map(u => u.id))) + 1;
      this.setState({
        users: [
          ...users,
          {
            ...user,
            id
          }
        ]
      });
    }
  }

  render() {
    const { users, targetUser } = this.state;
    return (
      <div>
        <UserInput user={targetUser} onConfirm={this.onConfirm} />
        <ul>
          {
            users.map(u => (
              <li key={u.id}>
                {u.name}
                <button onClick={() => { this.setState({ targetUser: u }) }}>编辑</button>
              </li>
            ))
          }
        </ul>
        <button onClick={() => { this.setState({ targetUser: {} }) }}>新建</button>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

运行后,效果如图:

现在点击‘编辑’和‘新建’按钮,输入框中的文字并不会切换,因为点击‘编辑’和‘更新’时,虽然UserInput的props改变了但是并没有触发state的更新。所以需要实现props改变引发state更新,在UserInput中增加代码:

  componentWillReceiveProps(nextProps) {
    this.setState({
      user: nextProps.user
    });
  }

或者

  static getDerivedStateFromProps(props, state) {
    return {
      user: props.user
    };
  }

这样就实现了UserInput每次接收新的props的时候自动更新state。但是这种实现方式是有问题的。

派生状态导致的问题

首先来明确组件的两个概念:受控数据(controlled data lives)不受控数据(uncontrollered data lives)。受控数据指的是组件中通过props传入的数据,受到父组件的影响;不受控数据指的是完全由组件自己管理的状态,即内部状态(internal state)。而派生状态揉合了两种数据源,当两种数据源产生冲突时,问题随之产生。

问题一

当在修改一个用户的时候,点击‘确定’按钮,输入框里的文字又变成了修改之前的文字。比如我将‘bruce’修改为‘bruce lee’,确定后,输入框中又变成了‘bruce’,这是我们不愿意看到的。

出现这个问题的原因是,点击确定,App会re-render,App又将之前的user作为props传递给了UserInput。我们当然可以在每次点击确定之后将targetUser重置为一个空对象,但是一旦状态多了之后,这样管理起来非常吃力。

问题二

假设页面加载完成后,会异步请求一些数据然后更新页面,如果用户在请求完成页面刷新之前已经在输入框中输入了一些文字,随着页面的刷新输入框中的文字会被清除。

我们可以在App中加入如下代码模拟一个异步请求:

 componentDidMount() {
    setTimeout(() => {
      this.setState({
        text: 'fake request'
      })
    }, 5000);
  }

导致这个问题的原因在于,当异步请求完成,setStateApp会re-render,而组件的componentWillReceiveProps会在父组件每次render的时候执行,而此时传入的user是一个空对象,所以UserInput的内容被清空了。而getDerivedStateFromProps调用的更频繁,会在组件每次render的时候调用,所以也会产生该问题。

为了解决这个问题我们可以在componentWillReceiveProps中判断新传入的user和当前的user是否一样,如果不一样才设置state:

  componentWillReceiveProps(nextProps) {
    if (nextProps.user.id !== this.props.user.id) {
      this.setState({
        user: nextProps.user
      });
    }
  }

更好的解决方案

派生状态的数据源的不确定性会导致各种问题,那如果每份数据有且只被一个component管理应该就能避免这些问题了。这种思路有两种实现,一种是数据完全由父组件管理,一种是数据完全由组件自己管理。下面分别讨论:

完全受控组件(fully controlled component)

组件的数据完全来自于父组件,组件自己将不需要管理state。我们新建一个完全受控版的UserInput

class FullyControlledUserInput extends React.Component {
  render() {
    const { user, onConfirm, onChange } = this.props;
    return (
      <div>
        <input value={user.name || ''} onChange={onChange} />
        <button onClick={() => { onConfirm(user) }}>确定</button>
      </div>
    )
  }
}

App中调用FullyControlledUserInput的方法如下:

...
   <FullyControlledUserInput
      user={targetUser}
      onChange={(e) => {
        this.setState({
          targetUser: {
            id: targetUser.id,
            name: e.target.value
          }
        });
      }}
      onConfirm={this.onConfirm}
    />
...

现在FullyControlledUserInput中的所有的数据都来源于父组件,由此解决数据冲突和被篡改的问题。

完全不受控组件(fully uncontrolled component)

组件的数据完全由自己管理,因此componentWillReceiveProps中的代码都可以移除,但保留传入props来设置state初始值:

class FullyUncontrolledUserInput extends React.Component {
  state = {
    user: this.props.user
  }

  onChange = (e) => {
    this.setState({
      user: {
        ...this.state.user,
        name: e.target.value
      }
    });
  }

  render() {
    const { user } = this.state;
    const { onConfirm } = this.props;
    return (
      <div>
        <input value={user.name || ''} onChange={this.onChange} />
        <button onClick={() => { onConfirm(user) }}>确定</button>
      </div>
    )
  }
}

当传入的props发生改变时,我们可以通过传入一个不一样的key来重新创建一个component的实例来实现页面的更新。App中调用FullyUncontrolledUserInput的方法如下::

<FullyUncontrolledUserInput
  user={targetUser}
  onConfirm={this.onConfirm}
  key={targetUser.id}
/>

大部分情况下,这是更好的解决方案。或许有人会觉得这样性能会受影响,其实性能并不会变慢多少,而且如果组件的更新逻辑过于复杂的话,还不如重新创建一个新的组件来的快。

在父组件中调用子组件的方法设置state

如果某些情况下没有合适的属性作为key,那么可以传入一个随机数或者自增的数字作为key,或者我们可以在组件中定义一个设置state的方法并通过ref暴露给父组件使用,比如我们可以在UserInput中添加:

  setNewUserState = (newUser) => {
    this.setState({
      user: newUser
    });
  }

在App中通过ref调用这个方法:

    ...
    
    <UserInput user={targetUser} onConfirm={this.onConfirm} ref='userInput' />
     <ul>
      {
        users.map(u => (
          <li key={u.id}>
            {u.name}
            <button onClick={() => {
              this.setState({ targetUser: u });
              this.refs.userInput.setNewUserState(u);
            }}>
              编辑
            </button>
          </li>
        ))
      }
    </ul>
    <button onClick={() => {
      this.setState({ targetUser: {} });
      this.refs.userInput.setNewUserState({});
    }}>
      新建
    </button>
    
    ...

这个方法不推荐使用,除非实在没法了。。

本文源码请参考:ways-to-update-component-on-props-change

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

推荐阅读

  • kubernetes系列教程(十九)使用metric-server让HPA弹性伸缩愉快运行

    kubernetes监控指标大体可以分为两类:核心监控指标和自定义指标,核心监控指标是kubernetes内置稳定可靠监控指标,早期由heapster完成,现由metric-server实现;自定义指标用于实现核心指标的扩展,能够提供更丰富的指标支持,如应用状态指标,自定义指标需要通过Aggregator和k8s api集成,当前主流通过promethues实现。

    HappyLau谈云计算
    Kubernetes容器微服务微服务架构腾讯微服务平台 TFS
  • 三分钟入坑指北 🔜 Docsify + Serverless Framework 快速创建个人博客系统

    之前由于学摄影的关系,为了提高自己的审美,顺便锻炼下自己的英文能力,翻译了不少国外艺术类的 文章。最近一直想搭一个个人博客来存放这些内容,又懒得折腾建站,遂一直搁置。

    Aceyclee
    ServerlessHTML网站GitGitHub
  • NVM作为主存上对数据库管理系统的影响

    implications of non-volatile memory as primary storage for database management systems

    yzsDBA
    存储缓存数据库数据结构SQL
  • DevOps平台架构演进

    附最新架构图https://www.processon.com/view/5cbd897de4b0bab90962c435

    我思故我在
    DevOps 解决方案微服务架构架构设计
  • 【腾讯云AI小程序大赛】中山大学作品《小耳朵天使》

    ----------------------------------------------------------------------------------

    陈华山
    小程序 · 云开发小程序语音识别文字识别对话机器人
  • Kona JDK 在腾讯大数据领域内的实践与发展

    经常听人谈到 OpenJDK,那它到底是什么呢?相信大家都听说过 Java SE、ME、EE等规范, 通常意义上对 Open JDK 的定义指:Java SE规范的一个免费和开源参考实现。

    腾小云
    JDKJavaJVM大数据Oracle
  • 公告丨腾讯安全产品更名通知

    为了更好地为政企客户的安全保驾护航,腾讯安全即日起更新旗下身份安全、网络安全、终端安全、应用安全、数据安全、业务安全、安全管理、安全服务等八类安全产品的命名,致力于打造全栈安全产品“货架”,让客户选购安全产品/服务更加便捷,更快地找到合适的安全产品,从而对自身的安全建设“对症下药”。

    腾讯安全
    DDoS 防护应用安全 MS验证码(业务安全)应用安全(移动安全)漏洞扫描服务
  • Kubernetes系列学习文章 - 网络实现(八)

    | 导语 前面介绍了很多K8S的概念以及架构方面的东西,这里我们说说K8S的网络。云计算里面的网络向来是复杂的,因为里面牵扯到硬件网络跟虚拟网络的交互。尤其是虚拟网络,比较抽象,如果不搞清楚,一些问题排障将寸步难行。

    宝哥@devops运维
    KubernetesDocker容器
  • 远程办公经验为0,如何将日常工作平滑过度到线上?

    导语 | 受到疫情影响,很多企业开始考虑远程办公。近日,TVP群里的各位老师们对此话题展开了热烈讨论。TVP张善友老师作为一名创业者,也决定开启远程办公。本文是他做了调研、试用后所总结的方案,并列出了相关产品清单,希望对读者有所帮助。文末也对各位TVP老师的相关语录进行了整理。「TVP思享」专栏,凝结大咖思考,汇聚专家分享,收获全新思想,欢迎长期关注。(编辑:云加社区 尾尾)

    尾尾
    TAPD 敏捷项目管理腾讯乐享企业邮箱企业编程算法
  • FFmpeg图像处理深度应用

    感谢大家关注FFmpeg在OnVideo以及AI方面的一些工作,我是刘歧,是OnVideo联合创始人的同时也担任技术负责人,同时也是FFmpeg的官方顾问,FFmpeg GSoC 2019 Mentor,FFmpeg决策委员会的委员,以及腾讯云TVP。我主要的兴趣在嵌入式开发、图形图像及音视频流媒体处理、分布式系统设计等领域。FFmpeg官方有我的联系方式,大家有问题可以和我随时交流。关于FFmpeg深度学习场景下的应用,目前看来,颇具价值且实用。

    LiveVideoStack
    视频处理图像处理OpenGLAPIOpenCV

扫码关注云+社区

领取腾讯云代金券