官方文档

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。Hook 不能在 class 组件中使用 —— 这使得你不使用 class 也能使用 React。

一、State Hook

useState 就是一个 Hook （等下我们会讲到这是什么意思）。通过在函数组件里调用它来给组件添加一些内部 state。React 会在重复渲染时保留这个 state。
useState 会返回一对值：当前状态和一个让你更新它的函数，你可以在事件处理函数中或其他一些地方调用这个函数。它类似 class 组件的 this.setState，但是它不会把新的 state 和旧的 state 进行合并。

  1. 一般来说，一个函数组件，在函数退出后变量就会”消失”，但是 state 中的变量会被 React 保留。
  2. 当我们点击按钮，调用setCount函数时，React会重新渲染这个组件，并把更新的count值传给这个组件
  3. useState()接受一个参数为默认值，该方法返回一个数组，第一个值为定义data的值，第二个为更新data的方法，他们总是成对出现的，
  1. import React, { useState } from 'react'
  2. function Demo1(props) {
  3.     //count代表state的变量
  4.     //setCount是一个function，如果我们要修改count变量，需要通过setCount来修改
  5.     let [count, setCount] = useState(0)
  6.     let [count2, setCount2] = useState(1)
  7.     let [count3, setCount3] = useState(2)
  9.     return (<div>
  10.         {count}
  11.         <button onClick={() => { setCount(++count) }}>点我修改count</button>
  12.         <br />
  13.         {count2}
  14.         <button onClick={() => { setCount2(++count2) }}>点我修改count2</button>
  15.         <br />
  16.         {count3}
  17.         <button onClick={() => { setCount3(++count3) }}>点我修改count3</button>
  18.     </div>)
  19. }
  21. export default Demo1;

注意点：不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层调用他们。遵守这条规则，你就能确保 Hook 在每一次渲染中都按照同样的顺序被调用。这让 React 能够在多次的 useState 和 useEffect 调用之间保持 hook 状态的正确

  1. function Form() {
  2.     const [name1, setName1] = useState('111');
  3.     if(name1!==''){
  4.         const [name2, setName2] = useState('222');
  5.     }
  6.     const [name3, setName3] = useState('333');
  7.     // ...
  8. }

二、Effect Hook

  • useEffect就是一个 Effect Hook，给函数组件增加了操作副作用的能力。它跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途，只不过被合并成了一个 API。
  • 在调用这个hook时，就是告诉React在完成对DOM的更改后运行这个hook,在这里你可以访问到state和props。 ```javascript import React, { useState,useEffect } from ‘react’ import Child from ‘./Child.jsx’

function Demo2(props) { //count代表state的变量 //setCount是一个function，如果我们要修改count变量，需要通过setCount来修改 let [count, setCount] = useState(0) let [count2, setCount2] = useState(1)

  1. //useEffect函数可以来模拟class组件的中指定生命周期的钩子函数 componentDidMount，componentDidUpdate，componentWillUnmount
  3. //相当于componentDidMount 、componentDidUpdate
  4. useEffect(()=>{
  5.     console.log("xxxxxxxxxxx",count)
  6. })
  8. //相当于componentDidMount
  9. useEffect(()=>{
  10.     console.log("yyyyyyyyy")
  11. },[])
  13. //当count2的值被改变之后执行当前的useEffect，其他值改变不会执行这个useEffect
  14. useEffect(()=>{
  15.     console.log("zzzzzzzzzzzzz")
  16. },[count2])
  18. //useEffect函数中return的function会在组件重新渲染的时候以及组件卸载的时候执行
  19. useEffect(()=>{
  20.     return ()=>{
  21.         console.log('hello Hook')    
  22.     }
  23. })
  25. return (<div>
  26.     {count}
  27.     <button onClick={() => { setCount(++count) }}>点我修改count</button>
  28.     <br />
  29.     <button onClick={() => { setCount2(++count2) }}>点我修改count2</button>
  30.     <br />
  31.     <Child></Child>
  32. </div>)

}

export default Demo2;

  2. <a name="pFqQO"></a>
  3. ## 三、Ref Hook
  4. " ref " 对象是一个通用容器，其current属性是可变的
  5. <a name="u6JaH"></a>
  6. ### 3-1 保存dom
  7. ```javascript
  8. function Test() {
  9.   const t = useRef(null);
  11.   useEffect(() => {
  12.     console.log(t.current); // div
  13.   });
  15.   return (
  16.     <div ref={t}> ... </div>
  17.   );
  18. }

3-2 保存时间秩序

  1. function Test() {
  2.   const t = useRef(null);
  3.   function handleClick() {
  4.     t.current = setTimeout(() => console.log(1), 2000);
  5.   }
  6.   function handleClear() {
  7.     clearTimeout(t.current);
  8.   }
  10.   return (
  11.     <>
  12.       <button onClick={handleClick}>start</button>
  13.       <button onClick={handleClear}>clear</button>
  14.     </>
  15.   );
  16. }

3-3 存储以前的值

  1. function Test() {
  2.   const t = useRef(null);
  3.   const [name, setName] = useState("ajanuw");
  4.   useEffect(() => {
  5.     t.current = name;
  6.   });
  7.   const prevName = t.current;
  8.   return (
  9.     <div>
  10.       <input value={name} onChange={e => setName(e.target.value)} />
  11.       <h2>{name}</h2>
  12.       <p>{prevName}</p>
  13.     </div>
  14.   );
  15. }

四、Context Hook

接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定。

  1. #1.App.jsx
  2. import React from 'react'
  3. import Demo3 from '@/components/Demo3'
  5. import MyContext from './context.js'
  7. function App(){
  8.     return (<MyContext.Provider value={{name:"zhangsan"}}>
  9.         App
  10.         <Demo3></Demo3>
  11.     </MyContext.Provider>)
  12. }
  14. export default App;
  18. #2/context.js
  19. import React from 'react'
  20. const MyContext = React.createContext();
  21. export default MyContext;
  24. #3.Child.jsx
  25. import React,{useContext} from 'react'
  26. import MyContext from '@/context.js'
  28. export default function(props){
  29.     //在子组件中获取父组件发布的数据
  30.     const contextValue = useContext(MyContext);
  31.     console.log(contextValue)
  32.     return (<div>xx</div>)
  33. }