commerce

useState()

const [a,b]=useState(1)
//声明变量a，初始值为1，react会在重复渲染时记住当前的值，提供最新的值给函数。可以通过调用b来更新当前的a

function Example(){
const [count,setCount] = useState(0);
return(
<div>
<p>you clicked {count} times</p>
<button onClick = { () => setCount(count+1)}>click me</button>
</div>
)}

FC

声明函数组件的方式
显式定义了返回类型，其他是推导（隐式）
对静态属性（displayName，propType，defaultProps）提供了类型检查和自动补全

useCallback

与useState的用法基本一致，但最后会返回一个函数，用一个变量保存

const a = useCallback( () => {
		return function () => {
				console.log(b)
				},[b]}
console.log(a);
console.log(a());

返回的函数a会根据b的变化而变化，如果b不变，a也不会生成

useEffect

默认情况下在每轮渲染结束后执行，也可以设置为只有在某些值改变时执行

通常组件卸载时，需要清除effect创建的诸如订阅或计时器等资源，要实现这一点，useEffect就需要返回一个清除函数，清除函数会在组件卸载前执行

useEffect(() =>{
const subscription = props.source.subscribe();
	return ()=>{
	subscription.unsubscribe();
	};
	});

传递给useEffect的函数会在浏览器完成布局与绘制之后，在一个延迟事件中被调用。useLayoutEffect处理同步执行，与useEffect结构相同，只是调用时机不同

可以给useEffect传递第二个参数，当第二个参数改变时，才会执行

useEffect(
() => {
const subscription = props.source.subscribe();
return () => {subscirption.unsubscribe(); };
},[props.source], );

async函数

返回Promise对象，内部return语句返回的值，会成为.then方法回调函数的参数
先创建Promise对象，再执行await表达式（泛用于等待一个Promise对象，只能在异步函数中使用，常使用try...catch语句try（执行后会出错的语句），catch（提示错误的语句））
一组Promise对象的执行顺序至于async函数中await的顺序有关
await命令后面的Promise对象，运行结果可能是rejected，可以使用try…catch或Promise的catch语句处理错误
多个await同时触发，async function fn(){let [result1,result2,result3 = await Promise.all[promise1,promise2,promise3]}
await只能用在async函数中

React.SyntheticEvent合成事件机制

浏览器原生事件跨浏览器的封装，和浏览器原生事件一样有stopPropagation（）、preventDefault（）接口，如果某种原因发现需要基础浏览器事件，只需要使用nativeEvent（）属性即可获取，还具有以下属性

• boolean bubbles
• boolean cancelable
• DOMEventTarget currentTarget
• number eventPhase
• boolean isTrusted
• DOMEvent nativeEvent //原生事件对象
• void preventDefault() //通知浏览器不要执行与事件关联的默认动作
• boolean isDefaultPrevented()
• void stopPropagation()
• boolean isPropagationStopped()
• DOMEventTarget target
• number timeStamp
• string type
  将SyntheticEvent合并，意味着SyntheticEvent在调用事件回调之后，将重用该对象并且所有属性都将无效。这是出于性能原因，因此无法异步访问事件

??

  return (a.sort_order ?? 0) - (b.sort_order ?? 0)  
  //空值合并运算符，当左侧操作数为null或者undefined时 ，返回右侧操作数，否则返回左侧操作数

useRouter

不能与类一起使用。仅应在面向前端的代码中使用，确保这一点的最简单的方法是写在useEffect()和componentDidMount()中
使用最多的：
push(url):允许前端以编程方式触发url更改
prefetch(url):允许以编程方式预取页面