React Hook （一）

React hook

• 在react16.8中 新增 react hook 这么个特性，能够使我么们不用Class组件而使用State以及其他的一些特性
• react hook 大致分为 state hook 、Effect hook以及自定义 hook

state hook 的使用

import React, { useState } form 'react'
// 引入 useState

function Example() {
// 声明一个叫 "count" 的 state 变量，并设置初始值为0
// useState 方法它返回一个有两个值的数组。第一个值是当前的 state，第二个值是更新 state 的函数
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        点我加1
      </button>
    </div>
  );
}

使用过程

1. 引入 React 中的 useState Hook。它让我们在函数组件中存储内部 state。
2. 在 Example 组件内部，我们通过调用 useState Hook 声明了一个新的 state 变量。它返回一对值给到我们命名的变量上。我们把变量命名为 count，因为它存储的是点击次数。我们通过传 0 作为 useState 唯一的参数来将其初始化为 0。第二个返回的值本身就是一个函数。它让我们可以更新 count 的值，所以我们叫它 setCount。
3. 当用户点击按钮后，我们传递一个新的值给 setCount。React 会重新渲染 Example 组件，并把最新的 count 传给它。

Effect hook 的使用

• Effect Hook 可以让你在函数组件中执行副作用操作
• React 组件中执行过数据获取、订阅或者手动修改过 DOM。我们统一把这些操作称为“副作用”，或者简称为“作用”

import React, { useState, useEffect } from 'react';
// 引入 useEffect 

function Example() {
  const [count, setCount] = useState(0);
  // 类似于componentdidmount 和 componentdiddupdate
  useEffect(() => {
    // 使用浏览器API更新文档标题
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
         点我加1
      </button>
    </div>
  );
}