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>
);
}