1. useState——见react语法（2）
2. useEffect——见react语法（2）
3. useRef—获取页面元素
用来获取页面中的元素，这样就可以对这个元素进行操作。获取元素需要使用.current才能获取到页面中的具体元素。
定义：box=useRef(null)
绑定：<div ref={box}></div>
使用：box.current.样式等等
简单使用：
import { useEffect, useRef } from 'react'
export default function App() {
let box = useRef(null);
useEffect(() => {
box.current.style.backgroundColor = 'skyblue';
},[box])
return (
<div>
<h2>App</h2>
<div ref={box}>box</div>
</div>
);
}
使用react框架实现原生放大镜效果和拖拽效果。
4. 组件反向传值
父组件传给子组件的值，子组件只能渲染，不能更改。想要子组件可以更改父组件传的数据，可以使用反向传参。就是父组件将数据和方法都传给子组件，子组件修改完后再传给父组件。
// 父组件
import React, { useState } from "react";
import Box from "./Box.jsx";
export default function App() {
let [msg, setMsg] = useState("父传给子的");
return (
<div>
<h2>App---{msg}</h2>
<Box data={[msg, setMsg]}></Box>
</div>
);
}
// 子组件
export default function Box({ data }) {
let [msg, setMsg] = data;
let changebox = () => {
setMsg("子反向传给父的");
}
return (
<div>
<h3>Box---{msg}</h3>
<button onClick={changebox}>changebox</button>
</div>
);
}
5. useCallback—缓存函数
使用时机：当组件被多次重复调用时，组件内部的局部函数就要用useCallback来包裹。主要是用来优化代码的。
当Box被多次使用时，fm函数创建了多次（因为函数是一种引入数据），但它的函数体内的逻辑代码却是一样的，这样设计的局部函数会导致性能问题
解决办法——useCallback。fm函数是用useCallback生成的，所以就算Box组件重复使用时，传入的回调函数只会生成一次。
案例：当页面第一次渲染时，由于父组件给子组件传的值是有四个元素的数组，所以fm运行了四次，也就是Box组件中打印了四次111。使用useEffect函数来监听fm函数。
// 父组件
import React, { useState } from "react";
import Box from "./Box.jsx";
export default function App() {
let info = [
{ id: 1, text: "商品1"},
{ id: 2, text: "商品2"},
{ id: 3, text: "商品3"},
{ id: 4, text: "商品4" },
];
let fm = (arg) => {
console.log(arg);
};
return (
<div>
<h2>App</h2>
{info.map((el) => (
<Box data={el} key={el.id} like={fm}></Box>
))}
</div>
);
}
// 子组件
import React, { useCallback, useEffect, useState } from "react";
export default function Box({ data, like }) {
let [count, changeCount] = useState(2);
let fm=()=>{like(data.id); }
useEffect(() => {
console.log(111);
}, [fm]);
return (
<div>
<div>{data.text}---{count}</div>
<button onClick={fm}>点赞</button>
<button onClick={() => changeCount(count + 1)}>加1</button>
</div>
);
}
通过“加1”按钮，使count增加时，会发现fm也运行了，也就是count改变一次就运行一次fm，而是实际中，我们只改变了count的值，和fm没有关系，就会影响性能。我们想要的是，把在函数组件内部定义的函数保存起来，当组件重新渲染时还是使用之前的，就不会被重新定义一次。
// 将上面的fm函数换成下面这个就可以实现了
let fm = useCallback(() => {
like(data.id);
}, [count]);
