学习hook笔记（使用工具沙盒）

1.初学hook

引入

import React, { useEffect, useState } from "react";

举个简单的例子（点击按钮加一）

在js文件中直接使用一个自定义hook

const useFun = (a) => {
   // 函数设置数组中第一个值是变量，第二个是改变边变量值的函数，后面括号中值为初始值
  const [count, setCount] = useState(a);
   // 自定义一个函数，书写逻辑代码
  const add = () => {
    setCount(count + 1);
  };
    // 返回你要使的值（可以是变量，可以是函数）
  return [count, add];
};

在你使用的页面中引入改自定义函数即可

function AppA() {
    // 在页面中使用自定义hook
  const [count, setCount] = useFun(1);
  const [co, setCo] = useState();
  //  依赖变化执行函数
  useEffect(
    () => {},
    [count, co] //变化
  );

  return (
    <div>
      A页面
      {co}
      <input onChange={(e) => setCo(e.target.value)} />
      <p>{count}</p>
      <button onClick={() => setCount()}>加1</button>
    </div>
  );
}

使用自定义函数，外加一个双向数据绑定。返回值直接在页面中进行渲染即可

ReactDOM.render(
  <div className="App">
    <App />
  </div>,
  document.getElementById("root")
);

注：不可用在setCount之后直接写变化后的函数，变换依赖必须写在useEffect中

2.发请求使用的hook，外加一个loading

• 发送一个请求，是为了获取到后端的返回值，以用来渲染页面或其他
• 一般我们会给表格请求封装一个loading进去
• 我们需要知道在什么时候使用该函数，所以需要抛出该函数

所以形成了以下自定义hook

const useInfo = (value) => {
    // 定义初始变量
  const [loading,setLoading] = useState(false);
  const [info,setInfo] = useState({id:''});
  const ajaxPost = () => {
    setLoading(true)
    $.ajax({
      url:`https://api.github.com/users/${value}`,
      options:{value},
      success:(val) => {
          // 请求成功之后需要做的事情
        setLoading(false)
        setInfo(val)
      },
      error:() =>{},
    })
  }
  // 抛出的值和函数
  return [loading,info,ajaxPost]
}

使用时的代码如下：

function App () {
  const [value,setValue] = useState();
  const [loading,info,ajaxPost] = useInfo(value);
  useEffect(()=>{if(value) ajaxPost()},[value])
  return (
    <div>
      <Input
        value={value}
        // onChange={(val) => onChange(val.target.value)}
        onChange={(val) => setValue(val.target.value)}
      />
      {/* <Button onClick={() => ajaxPost()}>搜索</Button> */}
      <Spin tip={'加载中...'} spinning={loading}>
      <h1>{info.id}</h1>
      </Spin>
    </div>
  )
}

3.熟悉useEffect的作用

function App () {
  const [num,setNum] = useState(0);
    
  useEffect(()=>{
    if(num === 3){
      setColor('green')
    } else {
      setColor('skyblue')
    }
    if(num<0) {
      setNum(0)
    }
  },[num])
    // console.log(num,'后');//1

  return (
    <div>
      <Button onClick={() =>{
        setNum(num+1);//num:0 num+1:1
        // console.log(num,'先');//0
      } }>数字加：{num}</Button>
      <Button onClick={() => setNum(num-1)}>数字减：{num}</Button>
      <div style={{width:'100px',height:'100px',backgroundColor:`${color}`}}>{num}</div>
    </div>
  )
}

页面监测到num值变化之后，会立即重新执行hook函数，所以在先的num值是为渲染的为上一次页面中的值。而在后出打印的值为页面改编自会后的值。

页面加载会先执行一次后，点击数字加之后会先触发先，但其值不是页面改变之后的值，而是之前的值。这个地方是与setState的不同之处，此处没有回调，直接在此执行一遍该hook函数

4.用hook实现一个单选功能

完整代码如下：

import React, { useEffect, useState } from "react";
import "./styles.css";

function My(props) {
  // console.log(props)
  const [num, setNum] = useState(0);
    // useEffect 会在第二个参数所依赖的值发生变化时执行，第一个函数，所以此处的单选按钮如果选择的是同一个值，则不会执行change函数
  useEffect(() => {
    props.onChange(num);
    // console.log(num)
  }, [num]);

  return (
    <div className="App">
      <p onClick={() => setNum(1)}>1</p>
      <p onClick={() => setNum(2)}>2</p>
      <p onClick={() => setNum(3)}>3</p>
      <p onClick={() => setNum(4)}>4</p>

      <h1>{num}</h1>
    </div>
  );
}

export default function App() {
  return (
    <div className="App">
      <My onChange={(num) => console.log(num)} />
    </div>
  );
}

5.重点知识，hook改变复杂数据类型

• 平时我们使用的setData函数

// 首先定义一个值
const [date, setDate] =  <DatePicker
        value={moment(date.endDate)}
        allowClear="false"
        onChange={(val, str) => changeDate(str, "endDate")}
      />(0);
// 在页面中使用的改变改值的地方直接调用setDate函数
return (
 <DatePicker
        value={moment(date.endDate)}
        allowClear="false"
        onChange={(val) => setDate(val)}
      />
)

• 复杂数据类型的值，使用setDate改变

// 自定义一个函数
const changeDate = (val, name) => {
    setDate((prev) => ({
      ...prev, //prev本次渲染的state
      [name]: val // 改变后当前对象中对应key值重新赋值
    }));
  };
// 页面中使用的地方
 return (
      <DatePicker
        value={moment(date.starDate)}
        allowClear="false"
        onChange={(val, str) => changeDate(str, "starDate")}
      />
)

6.项目常用

// 自定义hook初始值为条件对象
const useCondition = (obj={}) => {
    // 定义一个data值来保存和改变初始的对象
    const [data, setData] = useState(obj);
    const onChange = (val, name) => {
          setData((prev) => ({
               ...prev,
               [name]: val,
          }))
   	 };
    // 定义一个重置函数
     const reSet = () => {
          setData(obj)
     };
    // 返回改变后的值，改变值的函数，重置函数
     return [data, onChange, reSet]
};