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

详情：