React函数式组件-自定义hooks

自定义React hooks

回顾一下React常用hooks
React hooks中除了常用的useState、useEffect、useRef。
我们还可以自定义hooks，可以达到不增加组件而实现组件之间的一些复用的目的。

在子组件中，可以获取父级传来的值，也可以对值进行修改。

子组件Child.js

import React, {
    useState, useEffect, useRef } from 'react';
export default function Child(props) {
   
    let {
    data } = props;//接收父组件传来的数据
    
    //只要不修改ref，就会存储初始值(变化之前的值)
    let [age, setAge] = useState(0);
    //绑定dom
    //let currentAge = useRef();
    //下面的代码是将每次变化后的age值，传入useRef(),
    //这样一来就只是对数据进行操作，绑定的是数据而不是具体的dom了
    let currentAge = useRef(age);
    useEffect(() => {
   
        // 绑定的dom
        //点击按钮“长一岁”，此时控制台输出的是绑定的标签及其包含的内容
        //控制台输出如下： 
        // <h2>0</h2>
        // <h2>1</h2>
        // ......
        console.log(currentAge.current);

        // currentAge.current初始值, age是存变化后的值
        console.log(currentAge.current, age);
        // 把每次变化后的age值,再赋给当前值curAge.current,即变化前的值    
        currentAge.current = age;
        // 绑定了数据，不再是dom
        // 每次变化后的值赋值给了当前值，此时点击按钮“长一岁”时控制台输出内容都是数据，而不是标签了
        // 0
        // 0 1
        // 1
        // 1 2
        // 2
        // ...

    }, [age]);
  
  let [txt, setTxt] = useState("today is sunny");
  let txtAfter = useRef(txt);
  useEffect(()