你不知道的React-Hook（useState）

什么是Hooks?

不通过编写类组件的情况下，可以在组件内部使用状态(state) 和其他 React 特性(生命周期，context)的技术，也可以理解为函数式编程。

Hooks给开发者带来哪些好处？(自我感觉)

1. 不需要考虑过多的考虑哪些场景使用什么生命周期
2. 告别this，也就是基本上不需要考虑this指向的问题
3. 告别class类的写法，让代码更简洁化

注：是不是已经迫不及待了的想学习了，接下来咱们写几个小例子分别写一个class版本的和一个hooks版本的来做一下对比
class版本(代码)

import React, { Component } from "react";
import { Input, Button, List } from 'antd';
import "../css/ClassEdition.css"
class ClassEdition extends Component {
    constructor(props) {
        super(props);
        this.state = { count: 1, data: ["拉面", '热干面', '火锅'], value: "" }
    }
    render() {
        let { count, data, value } = this.state;
        return (
            <div>
               <b> class版本：</b>
                <p>
                    计数器当前步数：{count}
                </p>
                <button onClick={this.handle.bind(this)}>click me</button>
                <div className="box">
                    <div className="header">
                        <Input placeholder="请输入你想添加菜品" value={value} onKeyDown={this.keyDown.bind(this)} onChange={this.change.bind(this)} style={{ width: "230px" }} />
                        <Button type="primary" onClick={this.add.bind(this)}>添加</Button>
                    </div>
                    <div className="content">
                        <List
                            bordered
                            dataSource={data}
                            renderItem={item => (
                                <List.Item>
                                    {item}
                                </List.Item>
                            )}
                        />
                    </div>
                </div>
            </div>
        )
    }
    handle() {
        this.setState({
            count: this.state.count + 1
        })
    }
    change(event) {
        this.setState({
            value: event.target.value
        })
    }
    add() {
        let data = [...this.state.data, this.state.value];
        this.setState({
            data,
            value: ""
        })
    }
    keyDown(event) {
        let keyCode = event.keyCode, targetValue = event.target.value;
        if (keyCode == 13 && targetValue) this.add();
    }
}

export default ClassEdition

hooks版本(代码) useState关键字

import React, { useState } from "react";
import { Input, Button, List } from 'antd';
import "../css/ClassEdition.css"
/* 
     userSater() 入参是当前变量的初始化值
*/
function HooksEdition() {
    const [count, setCount] = useState(1);   //定义了一个count的变量，setCount是可以改变count的函数。setCount的昵称是可以随便写的
    const [data, setData] = useState(["拉面", '热干面', '火锅']);
    const [value, setValue] = useState("");
    return (
        <div style={{ marginTop: "20px" }}>
            <b>hooks版本：</b>
            <p>
                当前步数：{count}
            </p>
            <button onClick={() => { setCount(count + 1) }}>click me</button>
            <div className="box">
                <div className="header">
                    <Input placeholder="请输入你想添加菜品" value={value} onKeyDown={keyDown} onChange={change} style={{ width: "230px" }} />
                    <Button type="primary" onClick={add}>添加</Button>
                </div>
                <div className="content">
                    <List
                        bordered
                        dataSource={data}
                        renderItem={item => (
                            <List.Item>
                                {item} - hooks
                            </List.Item>
                        )}
                    />
                </div>
            </div>
        </div>)
    function change(event) {
        setValue(event.target.value);
    }
    function add() {
        setData([...data, value]);
        setValue("")
    }
    function keyDown(event) {
        let keyCode = event.keyCode, targetValue = event.target.value;
        if (keyCode == 13 && targetValue) add();
    }
}
export default HooksEdition;

class(图)

hooks(图)

说明：
1：useState 推荐一种更加细粒度的控制状态的方式，即一个状态对应一个状态设置函数，其接受的参数将作为这个状态的初始值。其返回一个长度为2的元组，第一项为当前状态，第二项为更新函数。
2：useState 的执行顺序在每一次更新渲染时必须保持一致，否则多个 useState 调用将不会得到各自独立的状态，也会造成状态对应混乱。比如在条件判断中使用 hook，在循环，嵌套函数中使用 hook，都会造成 hook 执行顺序不一致的问题。最后导致状态的混乱。另外，所有的状态声明都应该放在函数顶部，首先声明。
3：useState 和 setState 的区别
useState 将 setState 进行覆盖式更新，而 setState 则将状态进行合并式更新。