美文网首页React or React-Native前端成神之路
React Customize hooks -生命周期

React Customize hooks -生命周期

作者: 吴佳浩 | 来源:发表于2023-03-26 17:06 被阅读0次

    背景

    当你只是自己在开发的时候怎么方便怎么来，当你水平高一点的时候知道自我约束，当你成为一个小团队管理的时候只能无奈的制定规则，放弃自由和便捷。一下内容适合团队开发的规则制定

    废话：

    React Hooks 是 React 16.8 中引入的一项新功能，它允许你在不编写 class 组件的情况下使用 state 和其他 React 特性。通过使用 Hooks，你可以将组件的逻辑提取到可重用的函数中。React Hooks 没有类似于 class 组件中的生命周期方法，但是你可以使用 useEffect这个 Hook 来模拟生命周期行为。
    在 React Hooks 中，没有与 class 组件中的生命周期方法完全对应的概念。但是，你可以使用

    1.中级

    以下是如何使用
    useEffect
    来模拟生命周期行为的示例：

    import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  // 相当于 componentDidMount
  useEffect(() => {
    console.log('Component did mount');
    return () => {
      // 相当于 componentWillUnmount
      console.log('Component will unmount');
    };
  }, []); // 空数组表示这个副作用只会在组件挂载和卸载时执行

  // 相当于 componentDidUpdate
  useEffect(() => {
    console.log('Component did update');
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

    在这个示例中，我们使用

    useStateHook 来管理组件的状态，并使用

    我们使用了两个 useEffect

    Hook。第一个 useEffect 传入了一个空数组作为依赖项，这意味着它只会在组件挂载时执行一次，类似于 componentDidMount。同时，它返回了一个清除函数，这个函数会在组件卸载时执行，类似于 componentWillUnmount。

    第二个 useEffect没有传入依赖项数组，这意味着它会在每次组件更新时执行，类似于 componentDidUpdate。请注意，这个 useEffect 也会在组件挂载时执行一次，因为挂载也被视为一次更新。

    useEffect Hook 来处理副作用。useEffect
    接受两个参数：一个函数，以及一个可选的依赖项数组。函数中的代码将在组件挂载和更新时执行，如果提供了依赖项数组，那么只有当数组中的值发生变化时，才会重新执行副作用。

    在这个例子中，我们将文档的标题更新为显示点击次数。我们将 count作为依赖项传递给useEffect，这意味着只有当 count值发生变化时，才会重新执行副作用。

    注意:useEffect函数return的匿名函数是一个可选的清除函数。这个清除函数将在组件卸载时执行，类似componentWillUnmount生命周期方法。

    2.进入正题

    我们当前需要考虑的是如何对高中初级的使用进行规范的约束，即使这可能会丧失Hooks 提供的更灵活、更简洁，但是我们的整体的代码质量和风格会在一个可控的范围内。
    可以创建自定义的 React Hooks 函数来模拟生命周期行为。以下是一个示例，展示了如何创建自定义 Hooks 来模拟

    2.1. componentDidMount 和 componentWillUnmount

    我们可以使用 useEffectHook 来模拟 componentDidMount 和 componentWillUnmount。useEffect 接受一个函数作为参数，这个函数会在组件挂载后执行，并在组件卸载时执行清理操作。

    import { useEffect } from 'react';

function useComponentDidMount(callback) {
  useEffect(() => {
    callback();

    return () => {
      // 在这里执行 componentWillUnmount 相关的操作
    };
  }, []); // 传入空数组，确保 useEffect 只在挂载和卸载时执行
}

    2.2. componentDidUpdate

    我们可以使用useEffectHook 来模拟 componentDidUpdate。useEffect 接受一个函数作为参数，这个函数会在组件挂载后以及依赖项更新时执行。

    import { useEffect } from 'react';

function useComponentDidUpdate(callback, dependencies) {
  useEffect(() => {
    if (dependencies.length > 0) {
      callback();
    }
  }, dependencies); // 传入依赖项数组，确保 useEffect 在依赖项更新时执行
}

    2.3. shouldComponentUpdate

    我们可以使用 React.memo 和自定义比较函数来模拟 shouldComponentUpdate。React.memo 是一个高阶组件，它会对组件的 props 进行浅比较，只有在 props 发生变化时才会重新渲染组件。

    import React from 'react';

function shouldComponentUpdate(Component, compareFn) {
  return React.memo(Component, compareFn);
}

    2.4. getDerivedStateFromProps

    我们可以使用 useEffect和 useState Hooks 来模拟 getDerivedStateFromProps。useEffect 会在组件挂载后以及依赖项更新时执行，我们可以在这个函数中更新 state。

    import { useState, useEffect } from 'react';

function useDerivedStateFromProps(props, getDerivedState) {
  const [state, setState] = useState(getDerivedState(props));

  useEffect(() => {
    setState(getDerivedState(props));
  }, [props]);

  return state;
}

    2.5. getSnapshotBeforeUpdate

    目前没有直接的方法来模拟 getSnapshotBeforeUpdate，因为函数组件没有类似于 componentDidUpdate 的生命周期函数。但是，我们可以使用 useLayoutEffect 来在 DOM 更新之前执行一些操作。

    import { useLayoutEffect } from 'react';

function useSnapshotBeforeUpdate(callback) {
  useLayoutEffect(() => {
    callback();
  });
}

    2.6 componentWillUnmount

    分别模拟了 componentDidMount

    import { useEffect } from 'react';
function useComponentWillUnmount(callback) {
  useEffect(() => {
    return () => {
      callback();
    };
  }, []);
}

    3.完整代码如下customHooks

    import { useLayoutEffect,useEffect,useMemo,useState } from 'react';

/**
 *`componentDidMount` 和 `componentWillUnmount`
 * callback 接受一个函数作为参数，这个函数会在组件挂载后执行，并在组件卸载时执行清理操作
*/


export function useComponentDidMount(callback,delfun=()=>{}) {
  useEffect(() => {
    callback();
    return () => {
      delfun()
      // 在这里执行 componentWillUnmount 相关的操作
    };
  }, []); // 传入空数组，确保 useEffect 只在挂载和卸载时执行
}


/**
 *`componentDidUpdate`
 * dependencies传入依赖项数组，确保 useEffect 在依赖项更新时执行
*/



export function useComponentDidUpdate(callback, dependencies) {
  useEffect(() => {
    if (dependencies.length > 0) {
      callback();
    }
  }, dependencies); // 传入依赖项数组，确保 useEffect 在依赖项更新时执行
}


/**
 *`shouldComponentUpdate`
 * `React.memo`
 * Component第一个参数为纯函数的组件，
 * compareFn第二个参数用于对比props控制是否刷新
*/

export function shouldComponentUpdate(Component, compareFn) {
  return useMemo(Component, compareFn);
}



/**
 *`useDerivedStateFromProps`
 * props对比控制是否刷新，让组件在 props 变化时更新 state。
 * getDerivedState我们需要定义一个 `getDerivedState` 函数，它接收 `props` 作为参数，并返回一个新的状态值
*/
export function useDerivedStateFromProps(props, getDerivedState) {
  const [state, setState] = useState(getDerivedState(props));

  useEffect(() => {
    setState(getDerivedState(props));
  }, [props]);

  return state;
}



/**
 *`useSnapshotBeforeUpdate`
 * 在 DOM 更新之前执行一些操作。
 * callback Dom更新前传入一个处理函数
*/

export function useSnapshotBeforeUpdate(callback) {
  useLayoutEffect(() => {
    callback();
  });
}

    请注意，这些自定义 Hooks 只是模拟类组件生命周期函数的方法，并不是完全等价的替代。在某些情况下，可能需要对这些自定义 Hooks 进行调整以满足特定需求。

    现在你可以在你的组件中使用这些自定义 Hooks：

    import {
  shouldComponentUpdate,
  useComponentDidMount,
  useComponentDidUpdate,
  useDerivedStateFromProps,
  useSnapshotBeforeUpdate,
} from "@/customHooks";

//test useDerivedStateFromProps
const Child1 = (props) => {
  function getDerivedState(props) {
    console.log("child component will render");
    return props.value * 2;
  }
  // 使用自定义的 useDerivedStateFromProps Hook
  const derivedState = useDerivedStateFromProps(props, getDerivedState);

  // 在这里，你可以使用 derivedState 来根据需要渲染组件或执行其他操作

  return (
    <div>
      <p>Original value: {props.value}</p>
      <p>Derived value: {derivedState}</p>
    </div>
  );
};
//test shouldComponentUpdate
const Child2 = (n) => {
  console.log(n);
  return <div>Child2{n <= 1 ? "unchange" : "changed"}</div>;
};

const App = () => {
  const [count, setCount] = useState(0);
  const [Vl, setVl] = useState(1);

  //test componentDidMount & componentWillUnmount
  useComponentDidMount(
    () => {
      console.log("Component did mount");
    },
    () => {
      console.log("Component will unmount");
    }
  );

  //test useComponentDidUpdate
  useComponentDidUpdate(() => {
    console.log("Component did update");
  }, [count]);

  // test useSnapshotBeforeUpdate
  useSnapshotBeforeUpdate(() => {
    console.log("useSnapshotBeforeUpdate");
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
      <Child1 value={count}></Child1>
      {/* test shouldComponentUpdate */}
      {shouldComponentUpdate(() => Child2(count), [count])}
    </div>
  );
};
export default App;

    小结

    通过这种方式，我们可以将组件的生命周期逻辑抽离到自定义 Hooks 中，使得代码更加清晰和可维护。
    实际使用根据各个团队情况微调后使用。
    风格一向如常不喜欢说废话，有用拿走，没用出门右拐。

    相关文章

      网友评论

        本文标题：React Customize hooks -生命周期

        本文链接：https://www.haomeiwen.com/subject/jwcordtx.html

        延伸阅读

        深度阅读

        • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

        栏目导航

        热点阅读

        React or React-Native

        前端成神之路

        关于我们|服务条款|联系我们|React Customize hooks -生命周期|投稿指南|网站地图|RSS订阅|排版工具|手机版

        提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

        Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

        备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

        本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

        所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！