react hook的基本使用和注意的细节

/*
 * @Description:  Hook 是 React 16.8 的新增特性 这里看一些基础用法
 动机:
  1.在组件之间复用状态逻辑很难(由 providers，consumers，高阶组件，render props 等其他抽象层组成的组件会形成“嵌套地狱”)
  2.复杂组件变得难以理解
  3.难以理解的 class (class不能很好的压缩，并且会使热重载出现不稳定的情况。因此，我们想提供一个使代码更易于优化的 API)
  4.渐进策略
规则：
  1.只能在函数最外层或者自定义的 Hook 中调用 Hook。不要在循环、条件判断或者子函数中调用
  2.只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。
 * @Version: 2.0
 * @Autor: lhl
 * @Date: 2020-02-25 17:20:57
 * @LastEditors: lhl
 * @LastEditTime: 2020-04-20 16:07:47
 */
import React, { useState, useEffect } from 'react'
import './App.css';

function App() {
  // 声明一个新的叫做 “count” 的 state 变量
  const [count, setCount] = useState(0);

  // 声明多个 state 变量！
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);
  
  // 相当于 componentDidMount 和 componentDidUpdate:
  // 在 React 组件中执行过数据获取 ajax、订阅或者手动修改过 DOM。我们统一把这些操作称为“副作用”，或者简称为“作用”
  // useEffect 就是一个 Effect Hook，给函数组件增加了操作副作用的能力 useEffect 和 useState 可以使用多次
  // 如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组
  useEffect(() => {
    // 使用浏览器的 API 更新页面标题
    document.title = `点击了 ${count} 次`;
    // 清除副作用 (可以防止引起内存泄露)
    return () => {
      // 比如清除定时器操作 
    }
  },[count]) // 仅在 count 发生变化时，重新订阅

  return (
    <div>
      <p>点击了 {count} 次</p>
      <button onClick={() => setCount(count + 1)}> 点击+1 </button>
      <div>
        <p>展示多个state：
          <span>年龄：{age} --</span>  <button onClick={() => setAge(age + 18 )}> 更改年龄 </button>
          <span>-- 水果名：{fruit}</span> <button onClick={() => setFruit(fruit + '芒果')}> 更改水果名 </button>
          <span>-- 渲染数组某一项：{todos[0].text}</span>
        </p>
        <div>
          <ul>
            {todos.map((item, index) => {
              return (
                <li key={index}>
                  {item.text}-----{index}
                </li>
              );
            })}
          </ul>
          <button onClick={() => setTodos([...todos, {text: "Learn Hooks111"}])}> 更改数组 </button>
        </div>
      </div>
    </div>
  );
}
export default App