/*
* @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