js/react方法学习-useEffect

前言：最近看一个react工程，发现好多语法都不会（已经5年没学习react新版本了，记得学习是从0.8->0.9），看代码如同雾里看花。

 

2023-5

useEffect可多次使用。 https://www.ruanyifeng.com/blog/2020/09/react-hooks-useeffect-tutorial.html

useEffect 清除是在return方法里进行

结合reducer的用法，把dispatch放到第二个参数传进来。

function Counter({ step }) {
  const [count, dispatch] = useReducer(reducer, 0);

  function reducer(state, action) {
    if (action.type === 'tick') {
      return state + step;
    } else {
      throw new Error();
    }
  }

  useEffect(() => {
    const id = setInterval(() => {
      dispatch({ type: 'tick' });
    }, 1000);
    return () => clearInterval(id);
  }, [dispatch]);

  return <h1>{count}</h1>;
}

 

 参考：

作者：王八吉吉
链接：https://juejin.cn/post/6854573220931207181
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

 

 

2023-10

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', {…}, {…}, {…}, {…}, {…}]

详情：

1. 0: "ab"
2. 1: {h: 'h'}
3. 2: {e: 'e'}
4. 3: {l: 'l'}
5. 4: {l: 'l'}
6. 5: {o: 'o'}

解读：

reduce是一个扣减函数，对每一个元素，运行一次function，最终得到一个结果。

第一个参数：function(finalArr, currentItem)。

　　参数1：finalArr最终返回的结果。之所以是数组，是因为第二个参数赋初值的时候是['ab']。

　　参数2：currentItem是数组的每一个元素。

　　返回值：返回finalArr（如果是其他运算表达式，其值最终赋给了finalArr）

第二个参数：initValue。该结果是finalArr的第一个元素。

更进一步用法，参考：https://www.cnblogs.com/amujoe/p/11376940.html