react v16.8 之前，组件的标准写法是类，redux 的作者列举出 使用类构建组件的缺点：
- 大型组件难拆分、难构建、同样也很难测试
- 业务逻辑分散在组件的各个方法之中，导致重复逻辑或关联逻辑
- 组件类引入了复杂的编程模式，比如 render、props 和 高阶组件
所以最佳的组件写法应该是函数而不是类，但是这种写法有局限性，必须是纯函数，不能包含状态，也不支持生命周期方法，所以也就无法取代类。
react Hooks 设计目的就是加强函数组件，完全不使用类，就能写出一个全功能的组件，react Hooks 就是为函数引入外部功能的钩子，所以 react 规定所有钩子都以 use 为前缀命名，便于识别：
- useState()：状态钩子
- useContent()：共享状态钩子
- useAction()：action 钩子
- useEffect()：副作用钩子
useState()
用于为函数组件引入状态，纯函数不能有状态，所以把状态放在钩子里。
import React,{useState} from "react"
export default function Button() {
const [buttonText,setButtonText] = useState("Click");
function handleClick(){
return setButtonText("clicked");
}
return <button onClick={handleClick}>{buttonText}</button>
}
这个函数接受状态的初始值作为参数，上例函数返回一个数组，数组的第一个成员是一个变量，指向状态的当前值，第二个成员是函数，用来更新状态。
useContext()
要想在组件之间共享状态，就可以使用这个函数，如下例子：
想要两个组件 Navbar 和 Messages ，我们想要这两个组件之间状态共享
<div className="app">
<Navbar/>
<Message/>
</div>
使用 React Context API ，在组件外部建立一个 Context：
const AppContext = React.createContext({});
组件封装代码如下：
<AppContext.Provider value={{
username:'superawesome'
}}>
<div className="App">
<Navbar/>
<Message/>
</div>
</AppContext.Provider>
AppContext.Provider 提供了一个 Context 对象，这个对象可以被子组件共享。
const Navbar = () => {
const { username } = useContext(AppContext);
return(
<div class="navbar">
<p>Awesome</p>
<p>{username}</p>
</div>
)
}
useContext() 钩子函数用来引入 Context 对象，从中获取 username 属性。
useReducer()
react本身不提供状态管理功能，通常需要使用外部库，最常用的是 redux。
redux 的核心概念就是：组件发出 action 与状态管理器通信，状态管理器收到 action 以后，使用 Reducer 函数算出新的状态，Reducer 函数的形式是 (state,action) => newState。
useReducer()钩子用来引入 Reducer 功能：
const [state,dispatch] = useReducer(reducer,initialState);
useReducer 接受 Reducer 函数和状态的初始值作为参数，返回一个数组，数组的第一个成员是状态的当前值，第二个成员是发送 action 的 dispatch 函数。
下面是一个计数器的例子：
const myReducer = (state,action) => {
switch(action.type) {
case('countUp'):
return {
state,
count:state.count + 1
}
default
return state;
}
}
组件的代码如下：
function App(){
const [state,dispatch] = useReducer(myReducer,{count: 0});
return (
<div className="App">
<button onClick={() => dispatch({type:'countUp'})}>
+1
</button>
<p>Count: {state.count}</p>
</div>
)
}
虽然 hooks 可以提供共享状态和 Reducer 函数，但是没办法提供中间件和时间旅行，所以需要这两个功能的话，还是需要用 Redux。
useEffect()
用来引入具有副作用的操作，最常见的也就是向服务器请求数据，以前放在 componentDidMount里面的代码，现在就可以放在 useEffect()中：
useEffect(() => {
// Aysnc Action
},[dependencies])
useEffect()接受两个参数，第一个参数是一个函数，异步操作的代码放在里面，第二个参数是一个数组，用于给出 Effect 的依赖项，只要这个数组发生变化，useEffect()就会执行，第二个参数可以省略，这时每次组件渲染时，就会执行 useEffect()
网友评论