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