react的hook怎么用初学携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第14天，点击查看活

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第14天，点击查看活动详情

今天工作之余学习了react，看官方文档上教程都是从class开始的，而等我学完react的第一部分核心概念栏之后发现还有另一种函数是hook。hook替换class是最新的react编程方式了。

为什么会替换hooks，其实class类本来就是js中强行与实例挂钩的一种方式，ES6中实现了类，但其实class也只是语法糖，对于js玩家来说，理解class依然困难，也就成为了学习react的一大困难，你必须去理解js中this的工作方式，这与其他语言存在巨大差异。还不能忘记绑定事件处理器。没有稳定的语法提案，这些代码非常的冗余，react中大家可以很好的理解props，state，单向自顶向下数据流，但是class实在是难啃

官方提供的几个hook中最常见的就是useState。来看这段代码。

import React, { useState } from 'react';

function Example() {
  // 声明一个叫 "count" 的 state 变量  
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

与他等价的class形式是这样的

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

state 初始值为 { count: 0 } ，当用户点击按钮后，我们通过调用 this.setState() 来增加 state.count。这里useState结构出了两个值

第一个值count，定义了state中的初始值。这就是为什么hook要以use开头而不是create创建作为开头了，你不会渲染都创建一个新的state，而是在第一次渲染时初始化state值
第二个setCount，定义了一个函数，函数可以改变state的值，对标class编程中的setState，只不过这个setState是专门为count这个值服务的。

这种hook的API表可以自己查看，我们继续说hook的一些规则，hook是可以多个使用的，也就是说你可以在函数中使用多个hook，当然如果是state的话，你可以考虑将他们合并为对象或数组，因为setState也可以很好的支持数组或对象，但是，它不像 class 中的 this.setState，更新 state 变量总是替换它而不是合并它。

其他的常用的hook还有useEffect，它总会在函数重新渲染时执行，它的第一个参数是一段函数，你将需要重新渲染的函数放在这里，第二个参数是跟这段函数有关系的变量，当变量改变时，也会触发执行，如果传入空数组那么它只会在初始渲染时运行。

react的hook怎么用 初学

react的hook怎么用初学