react hooks

useState

import React, { useState } from "react";
 
export default function State() {
  //   const [state, setState] = useState(100)
 
  
  const [obj, setObj] = useState({
    name: "张三",
    age: 20
  })
 
  const [arr, setArr] = useState([1, 2, 3, 4, 5])
  return (
    <div>
      {/* { state }
        <button onClick={() => {
            setState(state + 1)
        }}>点我</button> */}
 
        {/* <p>
            姓名: { obj.name }
        </p>
        <p>
            年龄: { obj.age }
        </p>
        <button onClick={() => {
            setObj({
                ...obj,
                name: "李四"
            })
        }}>点我修改</button> */}
 
        <h3>
            { arr }
        </h3>
        <button onClick={() => {
            const newArr = [...arr]
            newArr[2] = 333
            setArr(newArr)
        }}>点我修改</button>
    </div>
  );
}

useEffect

import React, { useEffect, useState } from "react";
 
// 实例期
// 存在期
// 销毁期
export default function Effect() {
  const [num, setState] = useState(888);
  const [obj, setObj] = useState({
    name: "张三",
    age: 20,
  });
  let timer = null;
  // useEffect(callback, [])
  //   实例期
  //   useEffect(() => {
  //     console.log("init");
  //     timer = setInterval(() => {
  //       console.log("定时器");
  //     }, 1000);
  //   }, []);
 
  //   //  存在期  [useState定义的值,  props传递的内容]
  //   useEffect(() => {
  //     console.log("修改了！！");
  //   }, [num]);
 
  //   //   销毁期
  //   useEffect(() => {
  //     return () => {
  //       console.log("我被销毁了！！");
  //       clearInterval(timer)
  //     };
  //   });
 
  useEffect(() => {
    console.log('发生改变了')
  }, [obj.age])
  return (
    <div>
      <h2>Effect</h2>
      <p>姓名: {obj.name}</p>
      <p>年龄: {obj.age}</p>
 
      <button
        onClick={() => {
          setObj({
            ...obj,
            name: "王五",
          });
        }}
      >
        修改姓名
      </button>
      <button
        onClick={() => {
          setObj({
            ...obj,
            age: 30,
          });
        }}
      >
        修改年龄
      </button>
 
      {/* {num}
      <button
        onClick={() => {
          setState(num + 1);
        }}
      >
        点我
      </button> */}
    </div>
  );
}

销毁期 

useRef

import React, { useRef } from "react";
import State from "./State";
 
export default function Ref() {
  // 获取Dom元素
  const ipt = useRef(null);
  // 获取组件实例 ?
  const com = useRef(null);
  // 定义值
  const html = useRef(100);
  return (
    <div>
      <input ref={ipt} type="text" />
 
      <button
        onClick={() => {
          // ipt.current.value = "123"
          console.log(com);
        }}
      >
        点我1111111
      </button>
    </div>
  );
}

 context

createContext

import Son from "./Son";
 
export default function Father() {
  return (
    <div>
      <h3>我是父亲组件</h3>
      <Son />
    </div>
  );
}

import React, { useState, createContext } from "react";
import Father from "./Father";
 
export const Context = createContext();
 
export default function Grand() {
  const [num, setNum] = useState(200);
  return (
    <div>
      <h2>我是爷爷组件---{num}</h2>
      <Context.Provider value={[num, setNum]}>
        <Father />
      </Context.Provider>
    </div>
  );
}
 
const arr = { name: "张三" };
const arr2 = { name: "张三" };
 
console.log(arr === arr2);

import React, { createContext, useContext } from "react";
import { Context } from './Grand'
 
export default function Son() {
    const [num, setNum] = useContext(Context);
  return (
    <div>
      <h3>我是子组件 --- {num}</h3>
      <button
        onClick={() => {
          setNum(num + 1);
        }}
      >
        加
      </button>
    </div>
  );
}