实习第一天笔记

React.Fragment

React.Fragment | <></> 代替 <div></div>

• 解决中间包含多个组件，节约渲染性能，减少不必要的标签渲染

return (
	<React.Fragment>
	...
	</React.Fragment>
);

useState

const [type, setType] = useState(1);	//	number | array | object
// 如果 number 值同之前的值一样，组件不会重新渲染
setType(number);
// type 参数是上一轮 type 的值
setType(type => type++);

// 组件可能会多次渲染
const [count, setCount] = useState(() => {
	// 但这里面的代码只会执行一次
	console.log("there only run one time");
	return props.count || 1;
})

如果是多个 useState,运行时是按照各自的顺序的，因此我们不能改变 hooks 的顺序

useEffect

React.useEffect(() => {
	console.log("this is useEffect running~");
	window.addEventListener("resize", onChange, false);

	// clean up
	return () => {
		window.removeEventListener("resize", onChange, false);
	}
})

• componentDidMount，componentDidUpdate

返回的是一个清除副作用（网络请求等）函数，因此不能返回 promise，所以不能使用 async/await 关键字

第二个参数则是依赖项：

• 不传 --- 每次组件渲染都会执行
• 空数组([]) --- 只会在组件第一次渲染执行一次，后续重新渲染时不再执行
• 某个变量(count) --- 只会在某个变量(count)变化时才会执行

如果需要使用：

• 将 async 函数单独分离出来，然后再调用

async function xxx(){
	let res = await api.get("xxxx");
	setXXX(res);
	...
}

React.useEffect(() => {
	xxx();
	...
}, [])

接口变更

• 核验旧新接口的参数以及返回结果是否一致
• 使用新接口替换代码中旧接口逻辑并适当的优化逻辑
• 运行测试，核验是否符合预期结果