React Hooks 速学_react速学-优快云博客

Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的 JavaScript 函数。不编写 class 的情况下使用 state 以及其他的 React 特性。

出现的原因

代码管理困难，每个组件的状态，修改状态改动的文件较多。Hooks 可以把组件相互关联的部分拆分成函数。使其无需按照生命周期划分。
class 带来的问题，this 绑定、不能很好的压缩、热重载不稳定等问题。

注意事项

只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用
只能在 React 的函数组件中调用 Hook，不要在普通的 JavaScript 函数中调用 Hook
借助插件来强制执行以上规则

class 与 hooks 的区别

Hook 允许我们按照代码的用途分离他们， 而不是像生命周期函数那样。React 将按照 effect 声明的顺序依次调用组件中的每一个 effect。

新增的 Hook

1. useState

import React ,{useState} from 'react'

function Example() {
  // useState 的唯一参数就是 state 0
  // 声明一个新的叫做 “count” 的 state 变量 ，和一个 操作 count 的函数 setCount
  // 当函数退出的时候，state 会保存在 React 中，其它变量会被回收。
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Example

我们可以在单个组件中使用多个 State Hook 或 Effect Hook，怎么确定哪个 state 对应 useState ？

答案是：React 靠的是 Hook 调用的顺序，Hook 的调用顺序在每次渲染中都是相同的，所以它能够正常工作。

2. Effect

用来执行副作用的操作，它跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途，在第一次渲染和每次更新后都会执行。

// 相当于 componentDidMount 和 componentDidUpdate: title 会及时更新。
  useEffect(() => {
    // 使用浏览器的 API 更新页面标题
    document.title = `You clicked ${count} times`;
  },[count]); // 第二个可选参数 仅在 count 更改时更新