前言:最近看一个react工程,发现好多语法都不会(已经5年没学习react新版本了,记得学习是从0.8->0.9),看代码如同雾里看花。
3,useEffect
useEffect(() => { function connect(product: string) { const random = generatePseudoRandom256BitNumber(); const subscribeMessage = { type: "subscribe", channel: "orders", requestId: random.toFixed(0), }; sendJsonMessage(subscribeMessage); } connect("PBTC-USD"); }, [sendJsonMessage]); // 仅在sendJsonMessage更改时更新
既然我们知道了 useState 的作用,那么掌握 useEffect 就更容易,函数组件中没有生命周期,那么可以使用 useEffect 来替代。如果你熟悉 React class 的生命周期函数,你可以把 useEffect Hook 看做 componentDidMount,componentDidUpdate 和 componentWillUnmount 这三个函数的组合。
默认情况下,它在第一次渲染之后和每次更新之后都会执行。你可能会更容易接受 effect 发生在“渲染之后”这种概念,不用再去考虑“挂载”还是“更新”。React 保证了每次运行 effect 的同时,DOM 都已经更新完毕。
你可以通知 React 跳过对 effect 的调用,只要传递数组作为 useEffect 的第二个可选参数即可,如果想执行只运行一次的 effect(仅在组件挂载和卸载时执行),可以传递一个空数组([])作为第二个参数。这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值,所以它永远都不需要重复执行。
参考:https://www.jianshu.com/p/6e525c3686ab
https://blog.csdn.net/weixin_45760365/article/details/124386573
2,进化流 【useState】-> 【useReducer】-> 【useSelector、useDispatch】
useSelector意思是选出指定的state变量。
通过useSelector、useDispatch等方法,我们可以用Hooks方法完成Redux的功能,Hooks和Redux之间没有替代关系,应该更好地共存和融合。
参考:https://blog.csdn.net/sinat_17775997/article/details/124534448
1,reduce方法
const str = 'hello' const newstr = str.split('').reduce(function (prev, current) { const obj = {}; obj[current] = current; prev.push(obj) return prev; }, ['ab']) console.log(newstr)
打印结果: ['ab', {…}, {…}, {…}, {…}, {…}]
详情:
解读:
reduce是一个扣减函数,对每一个元素,运行一次function,最终得到一个结果。
第一个参数:function(finalArr, currentItem)。
参数1:finalArr最终返回的结果。之所以是数组,是因为第二个参数赋初值的时候是['ab']。
参数2:currentItem是数组的每一个元素。
返回值:返回finalArr(如果是其他运算表达式,其值最终赋给了finalArr)
第二个参数:initValue。该结果是finalArr的第一个元素。