6. useMemo—似计算属性
useMemo和useCallback的作用十分类似，只不过它允许记住任何类型的变量（useCallback只记住函数）。当改变其他变量时，普通函数都会运行，它返回的结果并没有改变。这个时候就可以使用useMemo将函数的返回值缓存起来。用来优化代码。
import React, { useState } from "react";
export default function App() {
let [msg, setMsg] = useState("hello");
let [n, setN] = useState(2);
// 求变量（数字）是否为素数
let fn = (n) => {
console.log("计算素数", n);
n = parseInt(n);
if (n <= 3) {
return n > 1;
}
for (let i = 2; i < n; i++) {
if (n % i === 0) {
return false;
}
}
return true;
};
return (
<div>
<h2>App</h2>
{<p>{n}是---{fn(n) ? "素数" : "非素数"}</p>}
<button onClick={() => setN(13327)}>changeN</button>
<p>{msg}</p>
<button onClick={() => setMsg("world")}>changeMsg</button>
</div>
);
}
解决办法：useMemo来记录函数
// 添加
let sushu = useMemo(() => {
let fn = (n) => {
console.log("计算素数", n);
n = parseInt(n);
if (n <= 3) {
return n > 1;
}
for (let i = 2; i < n; i++) {
if (n % i === 0) {
return false;
}
}
return true;
};
return fn(n);
}, [n]);
}
// 使用
<p>{n}---{sushu ? "素数" : "非素数"}</p>
补充点：react中，为什么组件return出来的虚拟模板对象要加小括号？
答：在js语法中函数内部的return的用法
不写 默认函数调用完毕 生成undefined
写数据直接量
写表达式，表达式执行结果作为函数的返回值
return后面不写 <==> 生成undefined
return语法注意点：必须写在return后面，不能换行（因为js语法中换行代表语句结束）
所以，如果不加小括号，且换行了，js语法就默认换行为语句结束，返回undefined，而不是返回整个模板。
7. 受控组件—似双向数据绑定
非受控组价：输入框内容为只读，不能手动修改，只能用代码改。
import React, { useState } from "react";
export default function Box() {
let [email, setEmail] = useState("222");
let login = () => {
console.log(email);
setEmail("6666");
};
return (
<div>
<h3>Box</h3>
<input type="text" value={email} />
<button onClick={login}>get</button>
</div>
);
}
受控组件：类似双向数据绑定。onChange事件 + event.target.value
import React, { useState } from "react";
export default function Box() {
let [email, setEmail] = useState("222");
let login = () => {
console.log(email);
};
return (
<div>
<h3>Box</h3>
<input type="text" value={email} onChange={()=>setEmail(event.target.value)} />
<button onClick={login}>get</button>
</div>
);
}
8. useContext—多层状态传递
1. 定义
允许在父级组件和底下任意层次的子组件之间传递状态。在函数组件中使用useContext来使用。Context。
2. 方法
创建上下文时，需要将这个ctx单独放在一个js文件中，要使用上下文的就导入进去。使用React.createContext来创建。
import React from "react";
let ctx = React.createContext({})
export default ctx;父组件提供： <ctx.Provider value={{ 提供的对象 }}></ctx.Provider>
后代组件使用：let obj = useContext(ctx); <h3>Box--{obj.age}</h3>
// App父组件
import React, { useState } from 'react'
import ctx from './ctx.js';
import Box1 from "./Box1.jsx";
import Box2 from "./Box2.jsx";
export default function App() {
let [msg, setMsg] = useState('hello');
// ctx.Provider是一个组件
return (
<ctx.Provider value={[msg, setMsg]}>
<div>
<h2>App--{msg}</h2>
<Box1></Box1>
<Box2></Box2>
</div>
</ctx.Provider>
);
}
// Box1子组件
import React, { useContext } from 'react'
import ctx from "./ctx.js";
import Box11 from "./Box11.jsx";
export default function Box1() {
let [msg, setMsg] = useContext(ctx);
let chengeMsg = () => {
setMsg('world')
};
return (
<div>
<h3>Box1---{msg}</h3>
<Box11></Box11>
<button onClick={chengeMsg}>chengeMsg</button>
</div>
);
}
// Box11 孙组件
import React, { useContext } from 'react'
import ctx from "./ctx.js";
export default function Box11() {
let [msg, setMsg] = useContext(ctx);
return (
<div>Box11--{msg}</div>
)
}
// Box2组件 和Box1同级
import React, { useContext } from "react";
import ctx from "./ctx.js";
export default function Box2() {
let [msg, setMsg] = useContext(ctx);
return (
<div>
<h3>Box2---{msg}</h3>
</div>
);
}上面案例可以实现子组件Box修改父组件App传来的值，并属性页面中所有用到msg的组件。
3. 提供多个上下文时
父组件提供多个数据时，可以使用嵌套来实现（只需要把上下文创建并引入即可），也可以把多个上下文放在同一个上下文中，需要使用哪个状态就通过点语法来取。比如：
// App父组件
import React, { useState } from 'react'
import ctx from './ctx.js'
import ctx2 from "./ctx2.js";
import ctx3 from "./ctx3.js";
import Box1 from "./Box1.jsx"
import Box2 from "./Box2.jsx"
import Box3 from "./Box3.jsx"
export default function App() {
// let [state, setSate] = useState({cardata:{ title: "电脑", id: 21 },userdata:{ name:"rosy"}})
let [age, setAge] = useState(33);
let [msg, setMsg] = useState({ name: "jack" });
return (
<ctx2.Provider value={[msg, setMsg]}>
<ctx.Provider value={[age, setAge]}>
<div>
<h2>App--{age}</h2>
<Box1></Box1>
<Box2></Box2>
</div>
</ctx.Provider>
</ctx2.Provider>
);
}
// Box1
import React from 'react'
import Box11 from "./Box11.jsx"
export default function Box1() {
return (
<div>
<h2>Box1</h2>
<Box11></Box11>
</div>
)
}
// Box11 孙组件
import React,{useContext} from 'react'
import ctx2 from './ctx2.js'
export default function Box11() {
let [msg, setMsg] = useContext(ctx2);
return (
<div>Box11--{msg.name}</div>
)
}
// Box2子组件
import React, { useContext } from "react";
import ctx from "./ctx.js";
export default function Box2() {
let [age, setAge] = useContext(ctx);
return (
<div>
<h3> Box2--{age}</h3>
</div>
);
}
当一个函数组件使用了useContex时，它就订阅了这个ctx的变化，这样当ctx.Provider的value发生变化的时，这个组件就会被重新渲染。上面有介绍，当有多个上下文时可以使用同一个ctx里面，而不同的子组件可能只关心该ctx的某一部分状态，当ctx里面的任意值发生变化的时候，无论这些组件用不用到这些数据它们都会被重新渲染，这样会造成无用渲染，影响性能。接下来介绍三种解决无用渲染的方法
9. React.memo
1. 拆上下文
2. useMemo
不需要用到上下文的函数用useMemo来缓存，写上依赖项。
import React, { useContext, useMemo, useState } from "react";
import ctx from "./ctx";
export default function Box3() {
let [state, setSate] = useContext(ctx)
let [n, setn] = useState(100)
return useMemo(() => {
console.log("刷新模板--只有数据变化才会刷新")
return (
<div>
<h2>Box3</h2>
<p>{state.userdata.name}</p>
</div>
)
}, [state.userdata.name]);
}
3. React.memo
import React, { useContext, useMemo, useState } from "react";
import ctx from "./ctx";
let Box = React.memo(({ userinfo }) => {
console.log("刷新模板--无用渲染");
return (
<div>
<h2>box3</h2>
<p>{userinfo}</p>
</div>
);
});
export default function Box3() {
let [state, setSate] = useContext(ctx);
return <Box userinfo={state.userdata.name}></Box>;
}
