Hook

1. 什么是Hook？

hook可以让不编写class类组件就可以使用react中state以及生命周期等特性的函数

2. 引入hook的原因

组件复用时prop-render或者高阶组件这些方式需要重新组织组件结构，Hook可以在不修改组件结构的情况下复用状态逻辑

3. Hook使用规则

只能在函数最外层调用Hook，不要在循环 条件判断和子函数中调用
只能在函数组件中调用Hook，不要在其他将函数中调用，在class组件中不能使用Hook
在自定义Hook中可以调用Hook

4. state Hook

import React, { useState } from 'react';
function App() {
  // 声明一个叫 "count" 的 state 变量
  const [count, setCount] = useState(0);

  return (
    <div>
      {/* Hook中读取state */}
      <p>You clicked {count} times</p>
      {/* Hook中更新state */}
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}


export default App

2.Effect Hook

2.1 Effect Hook作用

     Effect Hook 可以让函数组件中执行副作用

2.2 什么是副作用

    数据获取，设置订阅以及手动更改 React 组件中的 DOM 都属于副作用，可以把Effect Hook看作是 componentDidMount componentDidUpdate 

// Effect Hook的基本使用 

import React, { useState, useEffect } from 'react';
function App() {
  // 声明一个叫 "count" 的 state 变量
  const [count, setCount] = useState(0);
  useEffect(() => {
    document.title = `You click ${count} times`
  })

  return (
    <div>
      {/* Hook中读取state */}
      <p>You clicked {count} times</p>
      {/* Hook中更新state */}
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}


export default App

3. Hook 规则

4. 自定义Hook

注意点：

1. 自定义Hook必须以use开头
2. 两个组件中使用相同的Hook不会共享state