react --- > Hook的使用

Hook

• 是React16.8一个新增项,它可以让你在不编写class的情况下使用state以及其他的React特性
• 特点:
  1. 无需修改组件结构的情况下复用状态逻辑
  2. 将组件相互关联的部分拆分成更小的函数,复杂组件将变得更容易理解
  3. 更简洁、更易理解的代码

使用Hook的栗子

import React, { useState } from 'react'

export default function HookTest() {
  // useState(initState)
  const [count, setCount] = useState(0)

  // 多个状态
  const [age] = useState(20)
  const [fruit, setFruit] = useState('banana')
  const [input, setInput] = useState('')
  const [fruits, setFruits] = useState(['apple', 'banana'])

  return (
    <div>
      <p>点击了 {count} 次</p>
      // 每点击一次按钮,次数+1
      <button onClick={() => setCount(count + 1)}>点击</button>

      <p>年龄: {age}</p>
      <p>选择的水果: {fruit}</p>
      <p>
  	    //  每点当input框输入改变时,更新input的值
        <input type="text" value={input} onChange={e => setInput(e.target.value)} />
        // 将水果放入水果列表中.然后清空input
        <button onClick={()=>{setFruits([...fruits, input]);setInput('')}}>新增水果</button>
      </p>
      <ul>
        {fruits.map(f => (
          <li key={f} onClick={() => setFruit(f)}>{f}</li>
        ))}
      </ul>
    </div>
  )
}

副作用钩子 - Effect Hook

• useEffect就是一个Effect Hook,给函数组件增加了操作副作用的能力.
• 它跟class组件中的componentDidMount、componentDidUpdate和componentwillUnmount具有相同作用(只不过是合并了)
• 栗子: 更新 HooksTest.js

import React, {useState, useEffect } from 'react';
useEffect(() => {
  // Update the document title using the browser API
  document.title = `您点击了 ${count}次`
})

// 监听count的变化
useEffect(() => {
  console.log('count依赖');
  document.title = `您点击了${count}次`
},[count]);
// 此时只有count发生改变时才触发这个副作用钩子

• 注:
  1. 相当于是观察数据,当观察的数据发生变化时执行
  2. 第二个参数用于收集观察的数据

自定义钩子 - Custom Hook

• 自定义Hook是一个函数,其名称以"use"开头,函数内部可以调用其他的Hook.

function useAge() {
  const [age, setAge] = useState(0);
  useEffect(() => {
    setTimeout(() =>{
      setAge(20)
    }, 2000)
  });
  return age;
}

// 使用
const age = useAge();
<p>年龄 {age? age: 'loading...' }</p>