[翻译&摘抄] React 未来之函数式 setState

àì夳堔傛蜴生んèń 2022-06-02 04:17 155阅读 0赞

原文地址：Functional setState is the future of React  
原文作者：Justice Mba  
译文出自：掘金翻译计划  
原文链接：[https://juejin.im/post/58cfcf6e44d9040068478fc6/][https_juejin.im_post_58cfcf6e44d9040068478fc6]  
译者：reid3290  
校对者：sunui，imink

## 温故知新 ##

1、React 是一个基于组件的 UI 库，组件基本上可以看作是一个接受某些属性然后返回 UI 元素的函数。

2、React 提供了一个用于管理 state 的特殊函数 —— setState()。

3、setState() 的作用机制：你传递给它一个**对象**，该对象含有 state 中你想要更新的部分。

## 敲黑板，划重点 ##

**setState() 不仅能接受一个对象，还能接受一个函数作为参数。**该函数接受该组件前一刻的 state 以及当前的 props 作为参数，计算和返回下一刻的 state。

this.setState(function (state, props) { 
     return {
      score: state.score - 1
     }
    });

好奇宝宝要问了，这么做的目的是什么？

**理由是，state 的更新可能是异步的。**

React 在更新 State 的时候发生了什么？》  
React 首先会将你传递给 setState() 的参数对象合并到当前 state 对象中，然后会启动所谓的 reconciliation，即创建一个新的 React Element tree（UI 层面的对象表示），和之前的 tree 作比较，基于你传递给 setState() 的对象找出发生的变化，最后更新 DOM。

但是，React 不会仅仅简单地 “set-state”。因为涉及到的工作量比较大，调用 setState() 并不一定会即时更新 state 》React 可能会将多次 setState() 调用批处理（batch）为一次 state 的更新。

也就是说，React 并不会按照 setState() 的调用顺序即时更新 state，而是首先会将所有对象合并到一起，然后仅用该对象进行一次 “set-state”。

如果用户高频多次的setState，React 则会对这些操作进行批处理：即将每次调用 setState() 时传递给它的所有对象合并为一个对象，然后用这个对象去做真正的 setState()。

那么就意味着，下面这个函数执行的结果会是1，而不是我们希望的3。

...
    
    state = {score : 0};
    
    // 多次 setState() 调用
    increaseScoreBy3 () {
        this.setState({score : this.state.score + 1});
        this.setState({score : this.state.score + 1});
        this.setState({score : this.state.score + 1});
    }
    
    ...

需要搞清楚的是，给 setState() 传递对象本身是没有问题的，问题出在当你想要基于之前的 state 计算出下一个 state 时还给 setState() 传递对象。这是不安全的！

**让函数式 setState 来完成这样的任务**

当你编写函数式 setState 的时候，更新操作会形成一个任务队列，稍后会按其调用顺序依次执行。

核心概念是，使用函数式 setState，你可以传递一个函数作为其参数，当执行该函数时，React 会将更新后的 state 复制一份并传递给它，这便起到了更新 state 的作用。基于上述机制，函数式 setState 便可基于前一刻的 state 来更新当前 state。

## 更进一步 ##

函数式 setState 的强大之处 —— 在组件类外部声明 state 的更新逻辑，然后在组件类内部调用之：

// 在组件类之外
    function increaseScore (state, props) {
      return {score : state.score + 1}
    }
    
    class User{
      ...
    
    // 在组件类之内
      handleIncreaseScore () {
        this.setState(increaseScore)
      }
    
      ...
    }

这就叫做 **declarative**（**宣告式編程**）！组件类不用再关心 state 该如何更新，它只须声明它想要的更新类型即可。

设想如下场景：你有一些很复杂的组件，每个组件的 state 都由很多小的部分组成，基于 action 的不同，你必须更新 state 的不同部分，每一个更新函数都有很多行代码，并且这些逻辑都存在于组件内部。不过有了函数式 setState，再也不用面对上述问题了！

并且，基于函数式 setState，你就可以将 state 的更新逻辑抽离为一个模块，然后在组件中引入和使用该模块。让代码显得小而美。

import {increaseScore} from "../stateChanges";
    
    class User{
      ...
    
      // 在组件类之内
      handleIncreaseScore () {
        this.setState(increaseScore)
    }
    
      ...
    }

[https_juejin.im_post_58cfcf6e44d9040068478fc6]: https://juejin.im/post/58cfcf6e44d9040068478fc6/