一、 State Hook
Hook在class内部不起作用，使用Hook取代class。
useState 是允许在函数组件中添加state的Hook。
useSate 定义state变量，和class中this.state一样的作用。一般来说，在函数退出后变量就就会”消失”，而 state 中的变量会被 React 保留。
useState参数：初始state。
useState返回值: 当前state以及更新state的函数。
import{React,useState,useEffect}from'react';
functionApp() {
// 数组解构，useState返回一个有两个值的数组，第一个为当前state(count)
// 第二个为更新state的函数，setCount
const[count,setCount]=useState(0);
// 相当于 componentDidMount 和 componentDidUpdate:
useEffect(()=>{
// 使用浏览器的 API 更新页面标题
document.title=`You clicked ${count}times`;
});
return(
<div>
<p>Youclicked{count}times</p>
<buttononClick={()=>setCount(count+1)}>
Clickme
</button>
</div>
);
}
exportdefaultApp;
读取state： 在函数中直接使用count。
更新state： 函数中已经有了count和setCount方法，直接使用setCount，不需要this。
使用多个state变量。setState允许我们给不同的state变量取不同的名称。
functionExampleWithManyStates() {
// 声明多个 state 变量
const[age,setAge]=useState(42);
const[fruit,setFruit]=useState('banana');
const[todos,setTodos]=useState([{text:'学习 Hook'}]);
}
functionhandleOrangeClick() {
// 和 this.setState({ fruit: 'orange' }) 类似
setFruit('orange');
}
二、Effect Hook
副作用： 数据获取，设置订阅以及手动更改React组件中的Dom。
Effect Hook ：在函数组件中执行副作用操作。
Effect Hook是生命周期函数中componentDidMount（组件第一次渲染后调用），componentDidUpdate（组件完成更新后调用），componentWillUnmount（组件从DOM中移除之前）的组合。
两种常见的副作用操作：需要清除的和不需要清除。
无需清除的effect：
比如想在React更新DOM之后运行的一些额外的代码，比如发送网络请求，手动变更DOM，记录日志等。
在Class中上述案例应该是这样
componentDidMount() {
document.title=`You clicked ${this.state.count}times`;
}
componentDidUpdate() {
document.title=`You clicked ${this.state.count}times`;
}
使用useEffect执行相同的操作，React会保存传递的函数，称之为‘effect’。
useEffect(()=>{
document.title=`You clicked ${count}times`;
});
在组件内部调用useEffect：可以在effect直接调用state变量或者其他props。他们已经保存在函数的作用域中。
默认情况下，useEffect会在每次渲染（第一次渲染之后和每次更新）之后都执行。
需要清除的effect
useEffect 返回一个函数，用来清除副作用。（没看懂）
useEffect(()=>{
functionhandleStatusChange(status) {
setIsOnline(status.isOnline);
}
ChatAPI.subscribeToFriendStatus(props.friend.id,handleStatusChange);
return()=>{
ChatAPI.unsubscribeFromFriendStatus(props.friend.id,handleStatusChange);
};
});
