白话聊React为何采用函数式编程的不可变数据

这是我参与8月更文挑战的第2天，活动详情查看：8月更文挑战

前言

大家好，今天来聊一下React采用函数式编程的理念：不可变数据。

看到标题的你不用担心，你可能在顾虑需要函数式编程的知识，完全不需要，今天我们就0基础聊聊什么是不可变数据？React采用这种方式有什么好处？

例子

React采用函数式编程的不可变数据特性。

而在React中不可变值的意思就是：始终保持state的原值不变。

不要直接修改state，遇到数组或者对象，采用copy一份出去做改变。

举个简单的例子：

基本类型

错误的做法：

this.state.count++
this.setState({
    count:this.state.count
})

正确的做法：

this.setState({
    count:this.state.count + 1
})

引用类型

错误的做法：

this.state.obj1.a = 100
this.state.obj2.a = 100
this.setState({
    obj1: this.state.obj1,
    obj2: this.state.obj2
})

正确的做法：

this.setState({
    obj1: Object.assign({}, this.state.obj1, {a: 100}),
    obj2: {...this.state.obj2, a: 100}
})

函数式编程不可变值的优势

我们先聊聊函数式编程中不可变值的好处。

减少bug

好比我们用const定义一个变量，如果你要改变这个变量，你需要把变量copy出去修改。 这样的做法，可以让你的代码少非常多的bug。

生成简单的状态管理便于维护

因为，程序中的状态是非常不好维护的，特别是在并发的情况下更不好维护。 试想一下：如果你的代码有一个复杂的状态，当以后别人改你代码的时候，是很容易出bug的。

React中采用函数式编程的不可变值

我们再来看看React中采用函数式编程

性能优化

在生命周期 shouldComponentUpdate 中，React会对新旧state进行比较，如果直接修改state去用于其他变量的计算，而实际上state并不需要修改，则会导致怪异的更新以及没必要的更新，因此采用这种方式是非常巧妙，且效率非常的高。

可追踪修改痕迹，便于排错

使用this.setState的方式进行修改state的值，相当于开了一个改变值的口子，所有的修改都会走这样的口子，相比于直接修改，这样的控制力更强，能够有效地记录与追踪每个state的改变，对排查bug十分有帮助。

结尾

关于React与函数式编程你有什么观点或者想法，欢迎在评论区告诉我。