React的新特性之Hook react

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
Hook的含义：
Hook 这个单词的意思是"钩子"。
React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。 React Hooks 就是那些钩子。
【React的新特性之Hook】你需要什么功能，就使用什么钩子。React 默认提供了一些常用钩子，你也可以封装自己的钩子。
所有的钩子都是为函数引入外部功能，所以 React 约定，钩子一律使用use前缀命名，便于识别。你要使用 xxx 功能，钩子就命名为 usexxx。
Hook的优点

可以在不改变组件层级关系的前提下，方便的重用带状态的逻辑。
可以封装相关联的业务逻辑，让代码结构更加清晰。
可以在不引入 Class 的前提下，使用 React 的各种特性。

Hook规则

只在最顶层使用 Hook
只在 React 函数中调用 Hook

State Hook
useState()用于为函数组件引入状态（state）。纯函数不能有状态，所以把状态放在钩子里面。

import React, { useState } from 'react'; function Count() { // 声明一个叫 “count” 的 state 变量。 const [count, setCount] = useState(0); return ( You clicked {count} times ); }

上面代码中，Count组件是一个函数，内部使用useState()钩子引入状态。
useState()这个函数接受状态的初始值，作为参数，上例的初始值为0。该函数返回一个数组，数组的第一个成员是一个变量（示例代码中是count），指向状态的当前值。第二个成员是一个函数，用来更新状态，约定是set前缀加上状态的变量名（示例代码中是setCount）。
Effect Hook
useEffect()用来引入具有副作用的操作，最常见的就是向服务器请求数据。以前，放在componentDidMount里面的代码，现在可以放在useEffect()。
useEffect()的用法如下。

useEffect(()=>{ //一些操作 },[dependencies])

useEffect()接受两个参数。第一个参数是一个函数，异步操作的代码放在里面。第二个参数是一个数组，用于给出 Effect 的依赖项，只要这个数组发生变化，useEffect()就会执行。第二个参数可以省略，这时每次组件渲染时，就会执行useEffect()。

import React, { useState, useEffect } from 'react'; function Example() { const [count, setCount] = useState(0); // Similar to componentDidMount and componentDidUpdate: useEffect(() => { // Update the document title using the browser API document.title = `You clicked ${count} times`; }); return ( You clicked {count} times ); }

Context Hook
如果需要在组件之间共享状态，可以使用useContext()。
现在有两个组件 One和 Two，我们希望它们之间共享状态。首先使用 React Context API，在组件外部建立一个 Context。

const AppContext = React.createContext({});

上面代码中，AppContext.Provider提供了一个 Context 对象，这个对象可以被子组件共享。
One 组件的代码如下：

const One =()=>{ const { username }=useContext(AppContext); return( 我是第一个页面 {username} ); }

上面代码中，useContext()钩子函数用来引入 Context 对象，从中获取username属性。
Two 组件的代码也类似：

const Two=()=>{ const { username }=useContext(AppContext) return( Two 我是第二个页面 {username} ); }

自定义Hook
通过自定义 Hook，可以将组件逻辑提取到可重用的函数中。自定义 Hook 是一个函数，其名称以 “use” 开头，函数内部可以调用其他的 Hook。
示例：

import { useState, useEffect } from 'react'; function useFriendStatus(friendID) { const [isOnline, setIsOnline] = useState(null); useEffect(() => { function handleStatusChange(status) { setIsOnline(status.isOnline); }ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange); return () => { ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange); }; }); return isOnline; }

useFriendStatus 的 Hook 目的是订阅某个好友的在线状态。这就是我们需要将 friendID 作为参数，并返回这位好友的在线状态的原因。