[ 一块儿学React系列 -- 2 ] UI的灵魂--State

时间 2019-11-16

原文原文链接

概念引入

对于React来讲, 没有State就没有页面的渲染, 咱们也将什么都看不到

咋一听怎么那么唬人？不过的确是这样，正如标题所言State是UI的灵魂。咱们都知道React的核心思想之一是组件化，将页面所展现的东西按必定的规则分割成不少份并进行一一封装最后抽象成咱们如今所称为的"组件", 就好像咱们搭积木同样，一个城堡就是经过一个个小方块堆叠在一块儿的。可是FaceBook以为若是仅仅是简单的封装那么和普通的moudle有什么区别？和咸鱼又有什么区别？因而FaceBook给这些"组件"赋予了灵魂(之一) -- State。
什么叫State？顾名思义就是状态的意思。每一个组件都有本身的状态，好比开关的闭合、颜色的切换和显示与隐藏等等都会涉及到状态的切换。首先卖个关子，下面咱们一块儿来复习下小学(仍是初中?)的一枚数学知识。前端

y=f(x) -->（假如这是一个一元一次函数）

Are you kidding me?这是要侮辱在座的智商？不不不，请放下手里40米的大刀，笔者想抛个砖引个玉。
这是再简单不过的了，它表示y是关于x的函数。函数在数学中是十分的严谨，x与y是一一对应关系换句话说就是同一个x代入运算获得的永远是同一个y；同一个y代入运算获得的永远是同一个x，这个特性很像Redux中的Reducer，本质上是一个纯函数。react

初识State

那么若是咱们把这个公式带到React中会有什么样的化学反应呢？git

UI=f(State)

有木有感受眼前一亮，Excuse me？居然把State和UI经过一个公式关联起来？其实本质上就是这么简单。
同时，咱们还能够继续用函数的思想去思考它:github

输入特定的State只能输出特定的UI

根据特定的UI就能反推出相应的State

固然实际结果也是如此，React组件所渲染出来的东西与State有直接并且惟一的关系，换句话说就是State决定组件显示什么并且只有State才能决定组件显示什么。api

好比上面提到的一个组件可能有不少切换的动做，开关、颜色、显示与消失等等...原本这种切换的动做须要咱们本身经过操做DOM来实现，可是FaceBook在设计React之初就把直接操做DOM 这条路给堵死了(但仍给咱们提供的必要的接口已备不时之需，后续文章会有相应内容)，究竟为何要这么作？由于咱们都知道前端开发中特别消耗性能的是DOM操做，一旦处理不当就会影响整个页面的展现效果，所以FaceBook一不作二不休直接搞出了一个State出来，让开发者去输入State随后React本身去操做相应的DOM。数组

这么作有两个好处异步

使得State成为页面的惟一数据来源和页面元素变换的惟一依据。

提升页面的渲染性能(固然这不是React高效渲染的决定性因素)。

State大大提升了开发者对React组件的开发效率而不用担忧页面性能问题，可谓是一举多得。函数

实例展现：静态State

下面咱们来开发一个简单的文字展现组件：oop

import React, {Component} from 'react'       ---line 1

class Show extends Component {               ---line 2

    constructor(props) {                     ---line 3
        super(props);
        this.state = {                       ---line 4
            content: 'Hello World'
        }
        //this.propName = propValue;         ---line 5
    }

    render() {                               ---line 6
        return (
            <p>{this.state.content}</p>      ---line 7
        )
    }
}

export default Show;

首先一块儿来分析下这段代码：
line 1: 平常导包
line 2: ES6建立对象的方法。强烈推荐这么写
line 3: 该组件的构造方法，若是组件有属性默认值那么就须要写构造函数
line 4: 这里表示该组件有本身的State属性并且它仍是一个字面量对象，因此与该组件有关的全部State都应该写在这个字面量对象中。从代码中看出该组件有一个State对象 content，它包含着这个组件须要展现的一段文字。
line 5: 若是咱们想给这个组件定义State之外的属性，那么就能够项这行所写同样，不过须要放在this对象中，这样才能在组件中经过this对象读取到。
line 6: render方法是最终构建组件结构的地方，由于组件究竟长什么样子，须要在这里写。
line 7: 正如这个组件须要作的事情，咱们在render方法中返回这个p标签用来显示文字信息。由于所须要的文字信息保存在State对象中，State又保存在this对象中，因此如何去获取文字信息在这里不须要过多赘述。 另外须要注意的是，render方法return的节点只能是一个，不能是多个。若是你的组件结构复杂，请在最外层用div这样的标签包一下而后再返回。

下面看具体效果：组件化

是否是很简单？

实例展现：动态State

接下来再说一下状态变化，由于状态就是用来更改的，若是不更改那和咸鱼有什么区别？

先思考下：React状态应该如何更改？

这个问题笔者第一次遇到的时候第一反应就是：直接改啊！！！(而后被piapiapia打脸)，先试下吧：

import React, {Component} from 'react'

class Show extends Component {

    constructor(props) {
        super(props);
        this.state = {
            content: 'Hello World'
        }
    }

    changeState = () => {
        this.state.content = 'I\'m React State';
    };

    render() {
        return (
            <div>
                <p>{this.state.content}</p>
                <button onClick={this.changeState}>变变变</button>
            </div>
        )
    }
}

export default Show;

咱们建立一个函数用来更改响应的State，而后实际运行的时候发现无论怎么点按钮都毫无做用？Why?

由于React给咱们提供了专门用于更改状态的方法， this.setState()

咱们来从新试一下：

import React, {Component} from 'react'

class Show extends Component {

    constructor(props) {
        super(props);
        this.state = {
            content: 'Hello World'
        }
    }

    changeState = () => {
        this.setState({
            content: 'I\'m React State'
        })
    };

    render() {
        return (
            <div>
                <p>{this.state.content}</p>
                <button onClick={this.changeState}>变变变</button>
            </div>
        )
    }
}

export default Show;

这个方法须要咱们传入一个字符量对象，key是咱们须要更改的那个State，这里是content; value是咱们所指望要更改的值。( [\] 是转移符)。

能够看出页面中那行字变成了咱们所指望的文字。因此正如咱们所说：

更改State要使用this.setState()方法。

一旦更改了State，会触发组件的从新渲染。其实是运行一次组件中的render方法

异步的setState

这个点笔者想不出合适的引入点，因此就直接抛出来了。这个问题颇有趣，由于巧合的是笔者的一个萌妹子同事在学习React时候刚好遇到这个问题，代码大概是这样：

onchange = () => {
    this.setState({
        name: 'Demo'
    });

    this.props.change(this.state.name)//调用父组件经过props传过来的方法
};

她的本意是在本组件更改了name这个State后再经过调用父组件的方法实现父组件name的从新渲染。咱们看出this.props.change(this.state.name)传入的参数是直接从State中取的，可是实际运行的时候却不是如想象中那样同时更改，现象是第一次点击时候本组件成功渲染，可是父组件并无同时渲染；第二次点击时候父组件才渲染成对应的名字。
为何呢？
由于this.setState这个方法不是同步的而是异步的，了解JavaScript中Event Loop机制的朋友都知道，若是一段js代码中有异步的代码那么会将其放在一个队列中，等待这段代码其他代码运行完后再从那个队列中取出异步代码运行。this.setState机制也和它差很少，当咱们set一个State后React并不会当即去更改对应的State，而是在合适的时机下进行更改甚至为了提升性能会将多个setState过程合并成一个。为了证实这个异步机制，咱们经过打印的方式作个试验：

import React, {Component} from 'react'

class Show extends Component {

    constructor(props) {
        super(props);
        this.state = {
            content: 'Hello World'
        }
    }

    changeState = () => {
        console.log(`1 -- ${this.state.content}`);
        this.setState({
            content: 'I\'m React State'
        });
        console.log(`2 -- ${this.state.content}`);
        console.log('end');
    };

    render() {
        return (
            <div>
                <p>{this.state.content}</p>
                <button onClick={this.changeState}>变变变</button>
            </div>
        )
    }
}

export default Show;

控制台打印结果以下：

能够看出，页面正常渲染了说明对应的State已经更改了，可是控制台显示的信息却没有更改后的现象，因此能够肯定真正的setState并非调用this.setState()方法的瞬间，而是在以后的某个时间。因此有个问题须要注意：不要用当前的State去计算下一个State，由于你不能保证当前的State是最新的

但若是有个需求，须要在更改State后当即执行某个动做怎么办？

正常来讲咱们没法预知真正的setState是在什么时候，因此React理所固然得给咱们提供了办法，那么就是this.setState的第二个参数，第二个参数是一个方法，当对应的State修改为功后会当即执行，咱们修改下代码：

...
changeState = () => {
    console.log(`1 -- ${this.state.content}`);
    this.setState({
        content: 'I\'m React State'
    }, () => {
        console.log(`3 -- ${this.state.content}`);
    });
    console.log(`2 -- ${this.state.content}`);
    console.log('end');
};
...

看结果咯：

与预期一致，没毛病！！！

State的不可变

看到这个小标题，估计不少人会很懵逼，前面还说不更改的State和咸鱼有什么区别怎么到这里就要不可变了？实际上是混淆了。
官方的建议是将State的全部对象当作是不可变对象，一旦每一个对象更改了那么须要从新建立这个对象。举例子说，前面的代码中有：

this.state = {
    content: 'Hello World'
}

当咱们更改了content的值，用"I'm React State"替换了原有的"Hello World"。其实在这里，content对用的value不只仅是内容上的变化也是地址上的变化，这种在基本变量上体现不出来，好比咱们有个State要保存一个列表内容那么就得是个数组(字面量对象亦如此)：

this.state = {
    navis: ['React','Vue','Angular']
}

这个时候若是咱们直接将navis的值拿出来push一个元素进去而后setState:

addNavi = () => {
    this.setState({
        navis: this.state.navis.push('React-Native')
    })
};

结果是页面并无从新渲染，Why? 由于React在对比navis新的和老的两个值时候发现它们的地址都没变化就认为它们内容也没变化就不会从新渲染。这是个坑！！！。因此此时State对象的不可变原则就有做用了，解决方案有两个：

一、 复制原来的值，push完后进行setState。

addNavi = () => {
    let navisCopy = this.state.navis.slice();
    this.setState({
        navis: navisCopy.push('React-Native')
    })
};

这样就能正常运行了，由于navis对应的值不只仅在内容上变了，地址也变化了，React检测到变化后就进行了从新渲染。

二、第三方插件

Immutable.js

immutability-helper

immutability-helper-x

至于为何须要这么作？

State数据更明确，方便管理和开发调试。

为了页面渲染性能的考虑，有助于在shouldComponentUpdate中进行比较并肯定是否从新渲染。

Bingo...本期的博文就结束了，这期笔者也精心准备了好久，但愿你们都能喜欢！！