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