Hooks

Hook 是React 16.8的新特性，他可以让你在 function 组件中使用 state 以及其他的 React 特性。
Hooks的特点：

  • 使你在无需修改组件结构的情况下复用状态逻辑
  • 可将组件中相互关联的部分拆分成更小的函数，复杂组件将变得更容易理解
  • 更简洁、更易理解代码

Hook 就是 JavaScript 函数，但是使用它们会有两个额外的规则：

  • 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用
  • 只能在 React 的函数组件中调用 Hook

    useState

    useState(initialState) 接收初始状态，返回一个由状态和更新函数组成的数组

  1. import React, { useState } from 'react';
  3. // 声明列表组件
  4. function FruitList ({ fruits, onSetFruit }) {
  5.   return (
  6.     <ul>
  7.       { fruits.map(item => <li onClick={ () => onSetFruit(item)} key={item}>{item}</li>) }
  8.     </ul>
  9.   )
  10. }
  12. // 声明输入组件
  13. function FruitAdd (props) {
  15.   const [pname, setPname] = useState("") // 键盘事件处理
  17.   const onAddFruit = e => {
  18.     if (e.key === "Enter") {
  19.       props.onAddFruit(pname); 
  20.       setPname("");
  21.     }
  22.   }
  24.   return (
  25.     <div>
  26.       <input
  27.       placeholder="请输入需要添加的水果"
  28.       type="text"
  29.       value={pname}
  30.       onChange={e => setPname(e.target.value)}
  31.       onKeyDown={onAddFruit}
  32.       />
  33.     </div>
  34.   )
  35. }
  37. export default function HooksTest() {
  38.   // useState(initialState) 接收初始状态，返回一个由状态和更新函数组成的数组
  39.   const [fruit, setFruit] = useState("")
  40.   const [fruits, setFruits] = useState(['香蕉', '草莓', '芒果'])
  42.   return (
  43.     <div>
  44.       <p>{ fruit === "" ? "请选择喜爱的水果" : `你的的选择是：${fruit}` }</p>
  45.       <FruitList fruits={fruits} onSetFruit={setFruit}></FruitList>
  46.       <FruitAdd onAddFruit={pname => setFruits([...fruits, pname])}></FruitAdd>
  47.     </div>
  48.   );
  49. }

useEffect

useEffect 给函数组件增加了执行副作用操作的能力。
副作用（Side Effect）是指一个 function 做了和本身运算、返回值无关的事，比如：修改了全局变量、修改了传入的 参数、甚至是 console.log()，所以 ajax 操作，修改 dom 都是算作副作用。

  • 异步获取数据 ```javascript import { useEffect } from “react”;

useEffect(()=>{ setTimeout(() => { setFruits([‘香蕉’,’西瓜’]) }, 1000); },[]) // 设置空数组意为没有依赖，则副作用操作仅执行一次

  1. 如果副作用对某状态有依赖，需要添加依赖选项
  2. ```javascript
  3. useEffect(() => {
  4.      document.title = fruit; 
  5. }, [fruit]);

  • 清除工作：有一些副作用是需要清除的，清除工作非常重要，可以防止内存泄漏

    1. useEffect(() => {
    2. const timer = setInterval(() => {
    3.   console.log('msg')
    4. }, 1000)
    6. // 返回一个清理函数，组件卸载后会执行清理函数
    7. return function () {
    8.   clearInterval(timer)
    9. }
    10. })

    useReducer

    useReducer是useState的可选项，常用于组件有复杂状态逻辑时，类似于redux中reducer概念。

范例：使用 useReducer 改写上面的代码

  1. import React, { useState, useEffect, useReducer } from 'react';
  5. function FruitList ({ fruits, onSetFruit }) {
  6.   return (
  7.     <ul>
  8.       { fruits.map(item => <li onClick={ () => onSetFruit(item)} key={item}>{item}</li>) }
  9.     </ul>
  10.   )
  11. }
  13. // 声明输入组件
  14. function FruitAdd (props) {
  16.   const [pname, setPname] = useState("") // 键盘事件处理
  18.   const onAddFruit = e => {
  19.     if (e.key === "Enter") {
  20.       props.onAddFruit(pname); 
  21.       setPname("");
  22.     }
  23.   }
  24.   return (
  25.     <div>
  26.       <input
  27.       placeholder="请输入想要添加的水果"
  28.       type="text"
  29.       value={pname}
  30.       onChange={e => setPname(e.target.value)}
  31.       onKeyDown={onAddFruit}
  32.       />
  33.     </div>
  34.   )
  35. }
  37. // 添加fruit状态维护fruitReducer
  38. function fruitReducer (state, action) {
  39.   switch(action.type) {
  40.     case "init": 
  41.       return action.payload
  42.     case "add": 
  43.       return [...state, action.payload]
  44.     default: 
  45.       return state
  46.   }
  47. }
  50. export default function HooksTest() {
  51.   // useState(initialState) 接收初始状态，返回一个由状态和更新函数组成的数组
  52.   const [fruit, setFruit] = useState("")
  54.   // 接收一个 reducer 和初始值，返回 state 和 dispatch 
  55.   const [fruits, dispatch] = useReducer(fruitReducer, [])
  57.   // useEffect 接收回调函数和一个依赖数组（依赖为空时，useEffect函数只执行一次）
  58.   useEffect(() => {
  59.     setTimeout(() => {
  60.       // setFruits(['香蕉', '草莓', '芒果'])
  61.       dispatch({ type: 'init', payload: ['香蕉', '草莓', '芒果']})
  62.     }, 1000)
  63.   }, [])
  66.   // 如果副作用操作对某状态有依赖，需要添加依赖选项
  67.   useEffect(() => {
  68.     document.title = fruit; }, 
  69.   [fruit]);
  72.   // 清除工作：有一些副作用是需要清除的，清除工作非常重要，可以防止内存泄漏
  73.   useEffect(() => {
  74.     const timer = setInterval(() => {
  75.       console.log('msg')
  76.     }, 1000)
  78.     // 返回一个清理函数，组件卸载后会执行清理函数
  79.     return function () {
  80.       clearInterval(timer)
  81.     }
  82.   })
  84.   return (
  85.     <div>
  86.       <p>{ fruit === "" ? "请选择喜爱的水果" : `你的的选择是：${fruit}` }</p>
  87.       <FruitList fruits={fruits} onSetFruit={setFruit}></FruitList>
  88.       <FruitAdd onAddFruit={pname => dispatch({ type: 'add', payload: pname })}></FruitAdd>
  89.     </div>
  90.   );
  91. }

useContext

useContext用于在快速在函数组件中导入上下文，useContext可以实现组件之间的解耦，复杂组件会更变得更加容易理解。

  1. import React, { useState, useEffect, useReducer, useContext } from 'react';
  5. function FruitList ({ fruits, onSetFruit }) {
  6.   return (
  7.     <ul>
  8.       { fruits.map(item => <li onClick={ () => onSetFruit(item)} key={item}>{item}</li>) }
  9.     </ul>
  10.   )
  11. }
  13. // 声明输入组件
  14. function FruitAdd (props) {
  16.   // 使用 useContent 获取上下文
  17.   const { dispatch } = useContext(Context)
  19.   const [pname, setPname] = useState("") // 键盘事件处理
  21.   const onAddFruit = e => {
  22.     if (e.key === "Enter") {
  23.       // props.onAddFruit(pname); 
  24.       dispatch({ type: 'add', payload: pname })
  25.       setPname("");
  26.     }
  27.   }
  29.   return (
  30.     <div>
  31.       <input
  32.       placeholder="请输入想要添加的水果"
  33.       type="text"
  34.       value={pname}
  35.       onChange={e => setPname(e.target.value)}
  36.       onKeyDown={onAddFruit}
  37.       />
  38.     </div>
  39.   )
  40. }
  42. // 添加fruit状态维护fruitReducer
  43. function fruitReducer (state, action) {
  44.   switch(action.type) {
  45.     case "init": 
  46.       return action.payload
  47.     case "add": 
  48.       return [...state, action.payload]
  49.     default: 
  50.       return state
  51.   }
  52. }
  54. // 创建上下文对象
  55. const Context = React.createContext()
  57. export default function HooksTest() {
  58.   // useState(initialState) 接收初始状态，返回一个由状态和更新函数组成的数组
  59.   const [fruit, setFruit] = useState("")
  61.   // const [fruits, setFruits] = useState([])
  63.   // 接收一个 reducer 和初始值，返回 state 和 dispatch 
  64.   const [fruits, dispatch] = useReducer(fruitReducer, [])
  66.   // useEffect 接收回调函数和一个依赖数组（依赖为空时，useEffect函数只执行一次）
  67.   useEffect(() => {
  68.     setTimeout(() => {
  69.       // setFruits(['香蕉', '草莓', '芒果'])
  70.       dispatch({ type: 'init', payload: ['香蕉', '草莓', '芒果']})
  71.     }, 1000)
  72.   }, [])
  75.   // 如果副作用操作对某状态有依赖，需要添加依赖选项
  76.   useEffect(() => {
  77.     document.title = fruit; }, 
  78.   [fruit]);
  81.   // 清除工作：有一些副作用是需要清除的，清除工作非常重要，可以防止内存泄漏
  82.   useEffect(() => {
  83.     const timer = setInterval(() => {
  84.       console.log('msg')
  85.     }, 1000)
  87.     // 返回一个清理函数，组件卸载后会执行清理函数
  88.     return function () {
  89.       clearInterval(timer)
  90.     }
  91.   })
  93.   return (
  94.     <Context.Provider value={{ fruits, dispatch }}>
  95.       <div>
  96.         <p>{ fruit === "" ? "请选择喜爱的水果" : `你的的选择是：${fruit}` }</p>
  97.         <FruitList fruits={fruits} onSetFruit={setFruit}></FruitList>
  98.         <FruitAdd></FruitAdd>
  99.       </div>
  100.     </Context.Provider>
  101.   );
  102. }